Logo
Logo

Cart Page

The Cart Page Element allows you to create and customize the shopping cart page on your website. This element provides various controls to adjust the layout, content, and design, ensuring that the cart page fits seamlessly with the rest of your site’s aesthetic and functionality.

Design Controls

Layout

These controls manage the overall layout of the cart page, including the positioning of totals and how elements stack on different screen sizes.

  • Totals Position – Choose where the totals section is displayed on the page.
  • Stack Vertically At – Select the breakpoint at which elements stack vertically.
  • Sticky Totals – Enable sticky positioning for the totals section. (This control is only available when Totals Position is set to top-right or top-left)
  • Sticky Offset – Set the offset for the sticky totals. (This control is only available when Sticky Totals is enabled)

Contents

These controls adjust the appearance and layout of the cart’s content, including the wrapper, rows, and individual elements like icons and thumbnails.

  • Wrapper – Customize the wrapper of the cart contents.
    • Border Color – Set the color of the wrapper’s border.
    • Border Width – Adjust the width of the wrapper’s border.
    • Border Radius – Set the border radius for rounded corners.
  • Rows – Adjust the spacing and separators between rows.
    • Spacing – Set the spacing between rows.
    • Separator – Toggle the display of separators between rows.
    • Separator Color – Set the color of the row separators. (This control is only available when Separator is enabled)
    • Separator Height – Set the height of the row separators. (This control is only available when Separator is enabled)
  • Remove Icon – Customize the remove icon used to delete items from the cart.
    • Size – Adjust the size of the remove icon.
    • Color – Set the color of the remove icon.
  • Thumbnails – Customize the product thumbnails in the cart.
    • Size – Adjust the size of the thumbnails.
    • Opacity – Set the opacity of the thumbnails.
    • Borders – Customize the borders of the thumbnails.
  • Typography – Customize the typography of various text elements in the cart.
    • Table Heading – Customize the typography of the table headings.
    • Product Title – Customize the typography of product titles.
    • Prices – Customize the typography of prices.
    • Attributes – Customize the typography of product attributes.
    • Attribute Value – Customize the typography of attribute values.
  • Hide Coupon & Actions Row – Toggle the visibility of the coupon and actions row.
  • Override Global Styles – Allows you to override Global WooCommerce Styles.

Totals

These controls manage the display and styling of the totals section, which includes the overall order summary and the checkout button.

  • Hide Title – Toggle the visibility of the totals title.
  • Space After Title – Set the spacing after the totals title.
  • Wrapper – Customize the wrapper of the totals section.
    • Max Width – Set the maximum width of the wrapper.
    • Background – Set the background color of the wrapper.
    • Borders – Customize the borders of the wrapper.
    • Padding – Adjust the padding inside the wrapper.
  • Rows – Adjust the spacing and separators between rows in the totals section.
    • Spacing – Set the spacing between rows.
    • Separator – Toggle the display of separators between rows.
    • Separator Color – Set the color of the row separators. (This control is only available when Separator is enabled)
    • Separator Height – Set the height of the row separators. (This control is only available when Separator is enabled)
  • Button – Customize the checkout button in the totals section.
    • Space Above – Set the space above the button.
    • Alignment – Set the alignment of the button.
    • Styles – Customize the styles of the button.
  • Typography – Customize the typography of various text elements in the totals section.
    • Heading – Customize the typography of the headings.
    • Labels – Customize the typography of the labels.
    • Values – Customize the typography of the values.
    • Price Amounts – Customize the typography of the price amounts.
    • Total Label – Customize the typography of the total label.
    • Total Amount – Customize the typography of the total amount.
    • Links – Customize the typography of the links.
  • Override Global Styles – Override Global WooCommerce Styles.

Cross Sells

These controls manage the display and styling of cross-sell product suggestions, encouraging customers to add more items to their cart.

    • Disable – Toggle the visibility of cross-sells.
    • Hide At Breakpoint – Choose to hide cross-sells at specific breakpoints. (This control is only available when Disable is not set)
    • Title – Customize the title section of the cross-sells.
    • Space After Title – Set the spacing after the title.
    • Layout – Define the layout of the cross-sells.
      • Layout – Choose the layout style.
      • Slider – Configure the slider layout. (This control is only available when Layout is set to slider)
    • Products Per Row – Set the number of products per row. (This control is only available when Layout is not slider)
    • Between Products – Set the space between products. (This control is only available when Layout is not slider)
  • Elements—Set different styles for the elements available within the Cross Sells element. The Products List element provides more information about these settings.
  • Product Wrapper – These controls allow you to customize the container for individual products, including alignment, background, borders, and padding.
    • Align Content – Set the alignment of the content within the product wrapper.
    • Background – Choose a background color for the product wrapper.
    • Borders – Adjust the borders around the product wrapper.
    • Padding – Adjust the padding inside the product wrapper.

Spacing

These controls manage the spacing around the cart page elements, ensuring a well-organized layout.

  • Container – Adjust the container’s margins.
    • Margin Top – Set the top margin of the container.
    • Margin Bottom – Set the bottom margin of the container.
  • After Notification – Set the space after the notification section.
  • After Cart – Set the space after the cart section.
  • Before Cross Sells – Set the space before the cross-sells section.
  • Between Columns – Adjust the spacing between columns.