Using the Elementor WooCommerce Cart Widget, you may customize your cart layout. You may edit the section titles, labels, and placeholders of the form fields. You may also style the layout, typography, and color options as a whole, or customize even further by section.
When publishing, you will be prompted with the option to automatically set your new page as the default cart page rather than needing to go through the WooCommerce settings.
Content
General
Layout: From the dropdown menu, select between one column, or two column layoutSticky Right Column: If two column layout is used, use the toggle control enable / disable sticky option for the right columnOffset: If sticky option is enabled, enter a value in PX to offset the top margin of the sticky effect
Order Summary
Update Cart Button
Text: Enter the desired text in the field or using the dynamic options
Coupon
Apply Coupon Button
Text: Enter the desired text in the field or using the dynamic options
Totals
Title
Section Title: Enter the desired text in the field or using the dynamic optionsAlignment: Using the icons, select between left, center, or right alignment
Update Shipping Button
Text: Enter the desired text in the field or using the dynamic options
Checkout Button
Text: Enter the desired text in the field or using the dynamic optionsAlignment: Using the icons, select between left, center, right, or justified alignment
Additional Options
Update Cart Automatically: Use the toggle control to enable or disable AJAX loading of the cart totals.
Style
Sections
Background Color: From the color picker, choose the background color for your sections. This color will apply to all sections. You may apply a different background color to a section(s) in the Customize options shown below Box Shadow: Click the pencil icon to set the color and shadow optionsBorder type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %Margin: Enter a chosen value in the fields based on px, em, or %
Typography
Titles
Color: From the color picker, choose the color for your titles. This color will apply to all titles. You may apply a different color to a title(s) in the Customize options shown below Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsText Shadow (Titles Only): Click the pencil icon to open the shadow properties options.Spacing: Use the slider to increase or decrease the spacing between components.
Descriptions
Color: From the color picker, choose the color for your titles. This color will apply to all titles. You may apply a different color to a title(s) in the Customize options shown below Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsSpacing: Use the slider to increase or decrease the spacing between components.
Links
Choose the appearance of the link options on normal and hover states
Link Color: From the color picker, choose the color for your links. This color will apply to all links. You may apply a different color to a link(s) in the Customize options shown below
Radio Buttons
Color: From the color picker, choose the color for your titles. This color will apply to all titles. You may apply a different color to a title(s) in the Customize options shown below Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
Forms
Layout
Column Gap: Use the slider or enter the value in the field in PXRows Gap: Use the slider or enter the value in the field in PX
Labels
Color: From the color picker, choose the color for your labels. This color will apply to all labels.Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsSpacing: Use the slider to increase or decrease the spacing between components.
Fields
Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsColor (Text): From the color picker, choose the color for your field text. This color will apply to all field text.Background Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.
Borders (Fields)
Border type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %
Button
Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsColor (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the Customize options shown belowBackground Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.
Borders (Button)
Border type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %
Order Summary
Layout
Rows Gap: Use the slider or enter the value in the field in PX
Items
Color: From the color picker, choose the color for your ItemsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
Variations
Color: From the color picker, choose the color for your VariationsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
Product Links
Choose the appearance of the link options on normal and hover states
Link Color: From the color picker, choose the color for your links. This color will apply to all links. You may apply a different color to a link(s) in the Customize options shown below
Dividers
Color: From the color picker, choose the color for your DividersWeight: Use the slider or manual enter a value in the field (PX, EM)
Quantity Borders
Color: From the color picker, choose the color for your DividersWeight: Use the slider or manual enter a value in the field (PX, EM)
Remove Icon
Choose the appearance of the link options on normal and hover states
Color: From the color picker, choose the color for the icon.
Totals
Layout
Rows Gap: Use the slider or enter the value in the field in PX
Titles & Totals
Color: From the color picker, choose the color for your Titles & TotalsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
Checkout Button
Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsText Shadow: Click the pencil icon to open the shadow properties optionsText Color: From the color picker, choose the color for your button text. Background Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.Border type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %
Customize
The customize option allows you to style a section(s) independently of the other sections. Click the + icon to add or remove actions from the customizer. Additional styling options per section will appear below the customizer.
Advanced
Global Advanced tab options are available for this widget.