The Cart widget in 10Web Website Builder allows you to personalize your cart layout. You can edit section titles, labels, and placeholders of the form fields. The layout, typography, and color options can be styled as a whole or customized further by sections. When publishing, you will have the option to set your new page as the default cart page automatically.
Adding Cart widget
Add the Cart widget to the canvas. For details, see Add Elements to a page.
Content tab
General
- Layout: Select between a one-column or two-column layout from the dropdown menu.
- Sticky right column: If using a two-column layout, enable or disable the sticky option for the right column with the toggle control.
- Offset: If the sticky option is enabled, enter a value in pixels to offset the top margin of the sticky effect.
Order Summary
-
Update Cart button:
Text: Enter the desired text in the field or use dynamic options.
Alignment: Choose the alignment from left, center, right, or justified options.
Coupon
- Show/Hide coupon: Toggle to hide the coupon field from the cart page.
-
Apply Coupon button:
Text: Enter the desired text in the field or use dynamic options.
Alignment: Choose the alignment from left, center, right, or justified options.
Totals
- Section Title: Enter the desired text in the field or use dynamic options.
- Alignment: Choose between left, center, or right alignment.
-
Update Shipping Button:
Text: Enter the desired text in the field or use dynamic options.
Alignment: Choose between left, center, right, or justified alignment. -
Checkout Button:
Text: Enter the desired text in the field or use dynamic options.
Alignment: Choose between left, center, right, or justified alignment.
Additional options
- Update cart automatically: Enable or disable AJAX loading of the cart totals.
- Customize empty cart:
- Navigate to dashboard > Templates > Saved templates and create a new template for your empty cart.
- Return to your WooCommerce Cart page. In your Cart Widget > Content > Additional Options, toggle the Customize empty cart option.
- Click the Choose template field and enter the name of your created template.
Style tab
Sections
- Background color: Choose the background color for your sections.
- Box shadow: Click the pencil icon to set the color and shadow options.
- Border type, width, color and radius: Customize the border and radius as per your preferences. For details, see the Border Type and Border Radius guide.
- Padding: Enter the value in pixels, em, or percentage.
- Margin: Enter the value in pixels, em, or percentage.
Typography
Titles
- Color: Choose the color for your titles.
- Typography: Choose the font family, weight, transform, style, decoration, line height, and letter spacing.
- Text Shadow: Set the shadow properties.
- Spacing: Adjust the spacing between components.
Descriptions
- Color: Choose the color for your descriptions.
- Typography: Choose the font family, weight, transform, style, decoration, line height, and letter spacing.
- Spacing: Adjust the spacing between components.
Links: Set the color for links in normal and hover states.
Radio Buttons
- Color: Choose the color for your radio buttons.
- Typography: Choose the font family, weight, transform, style, decoration, line height, and letter spacing.
Forms
Layout
- Rows Gap: Set the gap between rows.
Labels
- Color: Choose the color for your labels.
- Typography: Choose the font family, weight, transform, style, decoration, line height, and letter spacing.
- Spacing: Adjust the spacing between components.
Fields
- Typography: Choose the font family, weight, transform, style, decoration, line height, and letter spacing.
- Text color: Choose the color for your field text.
Note:
The below settings can be separately set for Normal and Focus modes.
- Background type: Choose between a solid or gradient background.
- Background color: Select the color(s) for the field.
- Box shadow: Click the pencil icon to set the color and shadow options.
- Transition duration: Set transition duration time in ms for the Focus mode.
- Border type and radius: Customize the border and radius as per your preferences. For details, see the Border Type and Border Radius guide.
- Padding: Enter the value in pixels, em, or percentage.
Buttons
- Typography: Choose the font family, weight, transform, style, decoration, line height, and letter spacing.
- Text color: Choose the color for your button text.
Note:
The below settings can be separately set for Normal and Hover modes
- Background type: Choose between a solid or gradient background.
- Background color: Select the color(s) for the field.
- Box shadow: Click the pencil icon to set the color and shadow options.
- Transition duration: Set transition duration time in ms for the Hover mode.
- Border type and radius: Customize the border and radius as per your preferences. For details, see the Border Type and Border Radius guide.
- Padding: Enter the value in pixels, em, or percentage.
Order Summary
Layout
- Rows Gap: Set the gap between rows.
Titles
- Color: Choose the color for your titles.
- Typography: Choose the font family, weight, transform, style, decoration, line height, and letter spacing.
- Text Shadow: Set the shadow properties.
- Spacing: Adjust the spacing between components.
Items
- Color: Choose the color for your items.
- Typography: Choose the font family, weight, transform, style, decoration, line height, and letter spacing.
Variations
- Color: Choose the color for your variations.
- Typography: Choose the font family, weight, transform, style, decoration, line height, and letter spacing.
Product Links: Set the color for links in normal and hover states.
Dividers: Choose the color and weight for your dividers.
Quantity borders
- Color: Choose the color for your borders.
- Padding: Enter the value in pixels, em, or percentage.
- Border radius: Set the border radius to control corner roundness.
Remove Icon: Set the color for the icon in normal and hover states.
Totals
Layout
- Rows Gap: Set the gap between rows.
Titles & Totals
- Color: Choose the color for your titles and totals.
- Typography: Choose the font family, weight, transform, style, decoration, line height, and letter spacing.
Divider total: Choose the color and weight for your dividers.
Checkout Button
- Typography: Choose the font family, weight, transform, style, decoration, line height, and letter spacing.
- Text Shadow: Set the shadow properties.
- Text color: Choose the color for your button text.
Note:
The below settings can be separately set for Normal and Hover modes.
- Background type: Choose between a solid or gradient background.
- Background color: Select the color(s) for the field.
- Box shadow: Click the pencil icon to set the color and shadow options.
- Transition duration: Set transition duration time in ms for the Hover mode.
- Border type and radius: Customize the border and radius as per your preferences. For details, see the Border Type and Border Radius guide.
- Padding: Enter the value in pixels, em, or percentage.
Customize
The customize option allows you to style a section(s) independently. Click the + icon to add or remove actions from the customizer. Additional styling options per section will appear below the customizer.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.