Cart widget

Overview

By utilizing the Elementor WooCommerce Cart Widget, it is possible to customize the layout of your shopping cart. You have the option to modify section titles, labels, and placeholders of the form fields to fit your specific requirements. Additionally, you have the ability to alter the overall layout, typography, and color scheme, or further customize each section as needed.

• Cart widget demo 1
• Cart widget demo 2
• Cart widget demo 3

Content Tab

 

General

1. Layout: From the dropdown menu, choose between one column, or two-column layout
2. Vertical Alignment: Choose vertical alignment top or middle
3. Items Layout: Choose cart items layout, Standard or Compact
4. Heading: Enable or disable the cart header
5. Table Header: Enable or disable the table header
6. Thumbnail: Enable or disable the cart thumbnail
7. Continue Shopping button: Show or hide the Continue Shopping button
8. Main Column Size: Set the main column size

 

 

Custom text

Here you can customize all the texts on the cart page

1. Apply Coupon Button: Chance Apply coupon text
2. Update cart button: Change Update Cart text
3. Update Shipping Button: Enter the desired text in the Update Shipping button
4. Cart Total Title: – Change Cart total title text
5. Checkout Button: Change the checkout button text

 

Style Tab

Customize the Cart widget from the Style tab

Enhance your visitors’ shopping experience by customizing the cart widget

Sections

 

Cart

• Background type: you can choose the background type image, solid color or gradient fill
• Padding – Enter desired values in px, em, or %
• Margin – Enter desired values in px, em, or %
• Border Type – From the dropdown menu select between solid, double, dotted, dashed, or grooved, you can also set width, color
• Border radius – Enter desired values in px, em, or %
• Box Shadow – click the pencil icon to configure Box Shadow properties

Cart totals

• Background Color – Click the pencil icon to configure background color properties
• Padding – Enter desired values in px, em, or %
• Margin – Enter desired values in px, em, or %
• Border Type – From the dropdown menu select between solid, double, dotted, dashed, or grooved, you can also set width, color
• Border radius – Enter desired values in px, em, or %
• Box Shadow – click the pencil icon to configure Box Shadow properties

 

Typography

 

 

Buttons

Primary Button

Choose the appearance of the primary button options on normal and hover states

• Text Color – From the color picker, choose the right color for your button text.
• Typography – Click on the pencil icon to choose the family, weight, transform, style, decoration, line height, and letter spacing options
• Background Type: Use the icons to choose between a solid or gradient background
• Color (background): From the color picker, select the color(s) for the field
• Image: Click to select or upload an image to the media library to use as the background image of your field
• Box 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 grooved
• Width (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 border
• Border 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 %

Secondary Button

Choose the appearance of the secondary button options on normal and hover states

• Text Color – From the color picker, choose the right color for your button text.
• Typography – Click on the pencil icon to choose the family, weight, transform, style, decoration, line height, and letter spacing options
• Background Type: Use the icons to choose between a solid or gradient background
• Color (background): From the color picker, select the color(s) for the field
• Image: Click to select or upload an image to the media library to use as the background image of your field
• Box 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 grooved
• Width (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 border
• Border 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 %

Checkout Button

• Width: Enter a chosen value in the fields based on px, em, or %

Form Fields

Fields

Choose the appearance of the fields on normal and focus states

• 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
• Color (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 background
• Color (background): From the color picker, select the color(s) for the field
• Image: Click to select or upload an image to the media library to use as the background image of your field
• Box Shadow: Click the pencil icon to open the shadow properties options.

Placeholders

Choose the appearance of the placeholders 

• 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
• Text Color: From the color picker, choose the color for your field text. This color will apply to all field text.

Value

Choose the appearance of the values

• 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
• Text Color: From the color picker, choose the color for your field text. This color will apply to all field text.

Radio

Choose the appearance of the radios

• Size: Use the slider to increase or decrease the size of the radios.
• Spacing: Use the slider to increase or decrease the spacing between components.
• Spacing Between: Enter a chosen value in the fields based on px, em, or %

Choose the appearance of the radio in normal and checked states

• 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 
• Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
• Width (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 border

Divider

• Color: From the color picker, choose the color for your Dividers
• Weight: Use the slider or manual enter a value in the field (PX, EM)
• Gap: Use the slider or enter the value in the field in PX

Remove link

• 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

Choose the appearance of the Remove link options on normal and hover states

• Color: From the color picker, choose the color for your links. 

Customize

Add more level of customization for different sections of your Cart widget

You can customize more elements on the cart widget including:

• Table Heading

   Typography, Text Color, Background Type, Border Type, Width (Border), Color (Border), Border Radius (Border), Padding, Gap

• Quantity Inputs 

  View (Up / Down | Plus / Minus), Width, Typography, Border Type, Width (Border), Border Radius, Padding, Text Color (Focus, Normal), Background Color (Focus, Normal), Border Color (Focus, Normal)

• Coupon Form

  Space Between, Typography, Border Type, Width (Border), Border Radius, Padding, Text Color (Focus, Normal), Background Color (Focus, Normal), Border Color (Focus, Normal), Box Shadow

• Update Cart Button

  Typography, Border Type, Width (Border), Border Radius, Padding, Text Color (Hover, Normal), Background Color (Hover, Normal), Border Color (Hover, Normal), Box Shadow

• Thumbnails 

  Image Size, Max Width, Border Type, Width (Border), Border Radius, Box Shadow