The Shop Cart widget allows selecting one or two columns block layout and enables/disables separate elements display. You can also customize the empty cart view using Elementor templates or regular text. Changing the button text for a coupon, total amount block title, and checkout is as easy as adding an icon or choosing a hover animation for the buttons.
For further work, you need Elementor and WooCommerce to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
In the Content section, you can manage basic settings of the Shop Cart widget such as layout, coupon, checkout button, and block of the total amount.
General
- Layout – select the block display layout: One column, Two columns
- Sticky right column – the toggle to enable/disable the sticky effect for the right column within the cart block. The option is available for Two columns layout.
- Show coupon – the toggle to enable/disable the coupon display.
- Update cart automatically – the toggle to enable/disable automatic cart update function
- Customize empty cart – The option allows you to enter plain text for the empty cart block or use an Elementor template.
Coupon
- Button text – enter the button text in the field.
- Alignment – manage the current button alignment (left, center, right).
- Enable button icon – the toggle to enable/disable the button icon. When the option is enabled you can select any icon from the Font Awesome library or upload your own SVG and select the icon position.
- Button hover animation – select one of the available hover animations for the button.
Totals
- Title text – enter the title of the total amount block.
- Alignment – manage the current text alignment (left, center, right) of the block.
- Show total – the toggle to enable/disable the total amount element.
- Show subtotal – the toggle to enable/disable the subtotal amount element.
- Show tax – the toggle to enable/disable the tax element.
- Show fees – the toggle to enable/disable the fees element.
- Show shipping – the toggle to enable/disable the shipping element.
Update shipping button
- Button text – enter the button text in the field.
- Alignment – manage the current button alignment (left, center, right).
- Button hover animation – select one of the available hover animations for the button.
Checkout button
- Button text – enter the button text in the field.
- Alignment – manage the current button alignment (left, center, right).
- Enable button icon – the toggle to enable/disable the button icon. When the option is enabled you can select any icon from the Font Awesome library or upload your own SVG and select the icon position.
- Button hover animation – select one of the available hover animations for the button.
Style tab
On the style tab, you can manage the element styles of the Shop Cart widget like a background in different states, borders, padding/margin, typography, etc.
Product table/Total
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The block style settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Total title/Coupon block
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The block style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Product thumbnail cell/Subtotal heading
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The block style settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Product thumbnail
- Alignment – specify the alignment of the block title: Left, Center, Right.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Image size – specify the image size using the slider.
NORMAL/HOVER
The block style settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Product title heading/Product price heading/Product quantity heading/Product subtotal heading
- Alignment – specify the alignment of the block title: Left, Center, Right.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The block style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Product title/Product price/Product quantity/Product subtotal/Product remove
- Alignment – specify the alignment of the block title: Left, Center, Right.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Width – specify the width of the element in different units(px, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The block style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Subtotal heading/Subtotal field/Shipping heading/Shipping field/Tax heading/Tax field/Total field heading/Total field/Fee heading/Fee field
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The block style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical
Shipping inputs/Quantity input/Update shipping button/Checkout button/Checkout button
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Width – specify the width of the element in different units(px, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER/Focus
Color – specify the text color and opacity using the color picker.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
