Cart Page

Cart Page displays the complete WooCommerce cart layout, including contents, totals, and cross-sells. WooCommerce must be installed and active.

Add and configure Cart Page

1. Click Add, choose Cart Page, and place it in the container.
2. Place Cart Page on the page assigned as WooCommerce's cart.
3. Configure Design > Layout, Contents, Totals, and Cross Sells.
4. Set Spacing and review the cart at desktop and phone widths.
5. Save your changes.

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Design > Layout

Setting	Purpose and options	Behavior
Totals Position	Top Left, Top Right, Bottom Left, Bottom Right.	Shared
Stack Vertically At	Breakpoint.	Shared
Sticky Totals	On/off. When: Totals Position = Top Right, Top Left.	Shared
Sticky Offset	Sticky offset and unit. When: Sticky Totals is set.	Shared

Design > Contents

Setting	Purpose and options	Behavior
Wrapper > Border Color	Color or supported fill.	Shared
Wrapper > Border Width	Border width and unit.	Shared
Wrapper > Border Radius	Border radius and unit.	Shared
Rows > Spacing	Spacing and unit.	Responsive
Rows > Separator	On/off.	Shared
Rows > Separator Color	Color or supported fill. When: Separator is set.	Shared
Rows > Separator Height	Separator height and unit. When: Separator is set.	Shared
Remove Icon > Size	Size and unit.	Shared
Remove Icon > Color	Color or supported fill.	Hover
Thumbnails > Size	Size and unit.	Responsive
Thumbnails > Opacity	Set the numeric opacity value.	Hover
Thumbnails > Borders	borders controls.	See linked controls
Typography > Table Heading	typography controls.	See linked controls
Typography > Product Title	typography controls.	See linked controls
Typography > Prices	typography controls.	See linked controls
Typography > Attributes	typography controls.	See linked controls
Typography > Attribute Value	typography controls.	See linked controls
Hide Coupon & Actions Row	On/off.	Shared
Override Global Styles	woocommerce global styles.	See linked controls

Design > Totals

Setting	Purpose and options	Behavior
Hide Title	On/off.	Shared
Space After Title	Space after title and unit.	Responsive
Wrapper > Max Width	Max width and unit.	Shared
Wrapper > Background	Color or supported fill.	Shared
Wrapper > Borders	borders controls.	See linked controls
Wrapper > Padding	spacing controls.	See linked controls
Rows > Spacing	Spacing and unit.	Shared
Rows > Separator	On/off.	Shared
Rows > Separator Color	Color or supported fill. When: Separator is set.	Shared
Rows > Separator Height	Separator height and unit. When: Separator is set.	Shared
Button > Space Above	Space above and unit.	Responsive
Button > Alignment	Left, Center, Right, Justify.	Shared
Button > Styles > Size > Size	Custom, Small, Default, Large.	Responsive
Button > Styles > Size > Padding	Padding. When: Size = Custom.	Responsive
Button > Styles > Size > Override Width	Override width and unit.	Shared
Button > Styles > Size > Full Width At	Breakpoint.	Shared
Button > Styles > Background	Color or supported fill.	Hover
Button > Styles > Outline	On/off.	Shared

Shown when Outline is set.

Setting	Purpose and options	Behavior
Button > Styles > Color	Color or supported fill.	Hover
Button > Styles > Width	Width.	Shared
Button > Styles > No Fill On Hover	On/off.	Shared

Setting	Purpose and options	Behavior
Button > Styles > Typography	typography controls.	See linked controls
Button > Styles > Corners	Square, Round, Custom.	Shared
Button > Styles > Corner Radius	Corner radius and unit. When: Corners = Custom.	Responsive
Button > Styles > Effects > Transition Duration	Transition duration.	Responsive
Button > Styles > Effects > Scale On Hover	Set scale on hover. Range: 0–3.	Responsive
Button > Styles > Effects > Shadow	Shadow offset, blur, spread, color.	Responsive, Hover
Button > Styles > Icon > Icon	Icon.	Shared
Button > Styles > Icon > Position	Before, After.	Shared
Button > Styles > Icon > Size	Size and unit.	Responsive
Button > Styles > Icon > Color	Color or supported fill.	Hover
Button > Styles > Icon > Space Before	Space before and unit.	Responsive
Button > Styles > Icon > Space After	Space after and unit.	Responsive
Button > Styles > Icon > Hover Transform	Hover transform and unit.	Shared
Typography > Heading	typography controls.	See linked controls
Typography > Labels	typography controls.	See linked controls
Typography > Values	typography controls.	See linked controls
Typography > Price Amounts	typography controls.	See linked controls
Typography > Total Label	typography controls.	See linked controls
Typography > Total Amount	typography controls.	See linked controls
Typography > Links	typography controls.	See linked controls
Override Global Styles	woocommerce global styles.	See linked controls

Design > Cross Sells

Setting	Purpose and options	Behavior
Disable	On/off.	Shared
Hide At Breakpoint	Breakpoint. When: Disable is unset.	Shared
Title	typography controls.	See linked controls
Space After Title	Space after title and unit.	Shared
Layout > Layout	Grid, Slider, Masonry.	Shared
Layout > Slider	slider controls. When: Layout = Slider.	See linked controls
Layout > Products Per Row	Set the numeric products per row value. When: Layout ≠ Slider.	Responsive
Layout > Between Products	Between products and unit. When: Layout ≠ Slider.	Responsive
Elements > Image > Include	Enable, Disable.	Shared
Elements > Image > Space Before	Space before and unit.	Responsive
Elements > Image > Space After	Space after and unit.	Responsive
Elements > Image > Order	Numeric order.	Responsive
Elements > Image > Borders	borders controls.	See linked controls
Elements > Image > Show Second Image On Hover	On/off.	Shared
Elements > Image > Transition Duration	Transition duration. When: Show Second Image On Hover is set.	Shared
Elements > Title > Include	Enable, Disable.	Shared
Elements > Title > Space After	Space after and unit.	Responsive
Elements > Title > Order	Numeric order.	Responsive
Elements > Title > Typography	typography controls.	See linked controls
Elements > Price > Include	Enable, Disable.	Shared
Elements > Price > Space After	Space after and unit.	Responsive
Elements > Price > Order	Numeric order.	Responsive
Elements > Price > Old Price Typography	typography controls.	See linked controls
Elements > Price > Current Price Typography	typography controls.	See linked controls
Elements > Rating > Include	Enable, Disable.	Shared
Elements > Rating > Space After	Space after and unit.	Responsive
Elements > Rating > Order	Numeric order.	Responsive
Elements > Rating > Review Count	On/off.	Shared
Elements > Rating > Count Typography	typography controls.	See linked controls
Elements > Sale Badge > Include	Enable, Disable.	Shared
Elements > Sale Badge > Position	Top Left, Top Right.	Responsive
Elements > Sale Badge > Background	Color or supported fill.	Shared
Elements > Sale Badge > Typography	typography controls.	See linked controls
Elements > Sale Badge > Borders	borders controls.	See linked controls
Elements > Sale Badge > Padding	spacing controls.	See linked controls
Elements > Sale Badge > Nudge > X	X and unit.	Responsive
Elements > Sale Badge > Nudge > Y	Y and unit.	Responsive
Elements > Excerpt > Include	Enable, Disable.	Shared
Elements > Excerpt > Space After	Space after and unit.	Responsive
Elements > Excerpt > Order	Numeric order.	Responsive
Elements > Excerpt > Typography	typography controls.	See linked controls
Elements > Categories > Include	Enable, Disable.	Shared
Elements > Categories > Space After	Space after and unit.	Responsive
Elements > Categories > Order	Numeric order.	Responsive
Elements > Categories > Typography	typography controls.	See linked controls
Elements > Quantity Input > Include	Enable, Disable.	Shared
Elements > Quantity Input > Space After	Space after and unit.	Responsive
Elements > Button > Include	Enable, Disable.	Shared
Elements > Button > Space After	Space after and unit. When: Include = Enable.	Responsive
Elements > Button > Styles > Size > Size	Custom, Small, Default, Large.	Responsive
Elements > Button > Styles > Size > Padding	Padding. When: Size = Custom.	Responsive
Elements > Button > Styles > Size > Override Width	Override width and unit.	Shared
Elements > Button > Styles > Size > Full Width At	Breakpoint.	Shared
Elements > Button > Styles > Background	Color or supported fill.	Hover
Elements > Button > Styles > Outline	On/off.	Shared

Shown when Outline is set.

Setting	Purpose and options	Behavior
Elements > Button > Styles > Color	Color or supported fill.	Hover
Elements > Button > Styles > Width	Width.	Shared
Elements > Button > Styles > No Fill On Hover	On/off.	Shared

Setting	Purpose and options	Behavior
Elements > Button > Styles > Typography	typography controls.	See linked controls
Elements > Button > Styles > Corners	Square, Round, Custom.	Shared
Elements > Button > Styles > Corner Radius	Corner radius and unit. When: Corners = Custom.	Responsive
Elements > Button > Styles > Effects > Transition Duration	Transition duration.	Responsive
Elements > Button > Styles > Effects > Scale On Hover	Set scale on hover. Range: 0–3.	Responsive
Elements > Button > Styles > Effects > Shadow	Shadow offset, blur, spread, color.	Responsive, Hover
Elements > Button > Styles > Icon > Icon	Icon.	Shared
Elements > Button > Styles > Icon > Position	Before, After.	Shared
Elements > Button > Styles > Icon > Size	Size and unit.	Responsive
Elements > Button > Styles > Icon > Color	Color or supported fill.	Hover
Elements > Button > Styles > Icon > Space Before	Space before and unit.	Responsive
Elements > Button > Styles > Icon > Space After	Space after and unit.	Responsive
Elements > Button > Styles > Icon > Hover Transform	Hover transform and unit.	Shared
Elements > Custom Areas > Areas	Add, edit, remove, and reorder areas.	Shared
Elements > Custom Areas > Areas > Global Block	Existing Global Block.	Shared
Elements > Custom Areas > Areas > Position	Inside Link, Outside Link.	Shared
Elements > Custom Areas > Areas > Space Before	Space before and unit.	Responsive
Elements > Custom Areas > Areas > Space After	Space after and unit.	Responsive
Elements > Custom Areas > Areas > Order	Numeric order.	Shared
Product Wrapper > Align Content	Left, Center, Right.	Shared
Product Wrapper > Background	Color or supported fill.	Shared
Product Wrapper > Borders	borders controls.	See linked controls
Product Wrapper > Padding	spacing controls.	See linked controls

Design > Spacing

Setting	Purpose and options	Behavior
Container	spacing controls.	See linked controls
After Notification	After notification and unit.	Responsive
After Cart	After cart and unit.	Responsive
Before Cross Sells	Before cross sells and unit.	Responsive
Between Columns	Between columns and unit.	Shared

Troubleshooting