{"id":6033,"date":"2022-09-30T13:44:23","date_gmt":"2022-09-30T10:44:23","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&p=6033"},"modified":"2026-10-08T10:28:31","modified_gmt":"2026-10-08T07:28:31","slug":"cart","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/cart\/","title":{"rendered":"Cart"},"content":{"rendered":"\n
\n
\"Cart\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
The Cart element in action.<\/figcaption><\/figure>\n\n\n\n

The Cart<\/strong> element gives WooCommerce customers quick access to their current shopping cart directly from the website header. It can display the number of products in the cart, the current cart total and a mini-cart interface for reviewing or adjusting items without first visiting the Cart page.<\/p>\n\n\n\n

To use it, open the Customiser \u2192 Header<\/strong>, drag the Cart<\/strong> element into the desired header row, and select it to configure its appearance and behaviour.<\/p>\n\n\n\n

\n

WooCommerce required<\/strong>
The Cart element is available when WooCommerce is installed and active on the website.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Granular Controls<\/h2>\n\n\n\n

Element Appearance<\/h3>\n\n\n\n
\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Cart element appearance controls.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n

Icon<\/h4>\n\n\n\n

Choose from six built-in cart icons to represent the element in the header. Blocksy Pro also lets you upload your own custom SVG icon.<\/p>\n\n\n\n

The icon size can be configured responsively, allowing you to use different values for desktop, tablet and mobile devices.<\/p>\n\n\n\n

Icon Badge<\/h4>\n\n\n\n

Enable the Icon Badge<\/strong> to display the number of products currently added to the customer’s cart.<\/p>\n\n\n\n

Cart Total<\/h4>\n\n\n\n

Choose whether the current cart total is displayed alongside the cart icon, giving customers an immediate overview of the value of their cart.<\/p>\n\n\n\n

Label<\/h4>\n\n\n\n

The Cart element includes several controls for displaying additional text alongside the cart icon:<\/p>\n\n\n\n

    \n
  • Label Visibility<\/strong> – choose whether the label is displayed on desktop<\/strong>, tablet<\/strong> and mobile<\/strong> devices independently.<\/li>\n\n\n\n
  • Label Position<\/strong> – place the label to the left<\/strong>, right<\/strong> or bottom<\/strong> of the cart icon.<\/li>\n\n\n\n
  • Custom Label<\/strong> – customise the text displayed by the element. The default {price}<\/code> placeholder dynamically outputs the current cart total, and can be combined with additional text if needed.<\/li>\n<\/ul>\n\n\n\n

    Hide Cart When Empty<\/h4>\n\n\n\n

    Enable this option if you want the entire Cart element to remain hidden until the customer adds at least one product to their cart.<\/p>\n<\/div>\n<\/div>\n\n\n\n

    Cart Drawer<\/h3>\n\n\n\n

    The Cart Drawer controls how customers preview and manage the contents of their cart after interacting with the header element.<\/p>\n\n\n\n

    \n
    \n
    \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
    Cart Drawer configuration options.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n

    Cart Drawer Type<\/h4>\n\n\n\n

    Choose how the mini-cart is presented when the Cart element is opened:<\/p>\n\n\n\n

      \n
    • Flyout<\/strong> – displays the cart in a compact panel attached to the header element.<\/li>\n\n\n\n
    • Off Canvas<\/strong> – opens the cart inside a larger panel that slides in from the side of the browser window. This presentation is available with Blocksy Pro.<\/li>\n<\/ul>\n\n\n\n
      \n

      Blocksy Pro<\/strong>
      The Off Canvas<\/strong> Cart Drawer is a Blocksy Pro feature. The standard Flyout mini-cart remains available without it.<\/p>\n<\/div>\n\n\n\n

      Panel Width<\/h4>\n\n\n\n

      When the Off Canvas<\/strong> drawer is selected, use the Panel Width control to define how much horizontal space the cart occupies when opened.<\/p>\n\n\n\n

      Reveal From<\/h4>\n\n\n\n

      Choose whether the Off Canvas cart slides into view from the left<\/strong> or right<\/strong> side of the screen.<\/p>\n\n\n\n

      Open Cart Automatically<\/h4>\n\n\n\n

      Automatically open the cart drawer after a customer successfully adds a product to their cart. This provides immediate confirmation of the action and lets them review the updated cart without opening it manually.<\/p>\n\n\n\n

      Automatic opening requires the add-to-cart action to be handled through AJAX. If adding a product performs a full page navigation or reload instead, the cart drawer cannot be opened automatically as part of that interaction.<\/p>\n\n\n\n

      Quantity Input<\/h4>\n\n\n\n

      Enable quantity controls inside the mini-cart so customers can adjust the quantity of products already added to their cart without leaving the drawer.<\/p>\n\n\n\n

      Product Images<\/h4>\n\n\n\n

      Control how product thumbnails are displayed inside the mini-cart. These settings apply regardless of whether you use the Flyout<\/strong> or Off Canvas<\/strong> Cart Drawer.<\/p>\n\n\n\n

      You can adjust the image ratio<\/strong> to control the proportions of each thumbnail and select the preferred image size<\/strong> used for the product images. This lets you balance image quality and available space while keeping the mini-cart layout consistent with the rest of your store.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

      \n

      Visual Reference<\/h2>\n\n\n\n

      The examples below show the difference between the standard Flyout mini-cart and Blocksy Pro’s Off Canvas presentation.<\/p>\n\n\n\n

      \n
      \n
      \"Blocksy\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
      Flyout mini-cart.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
      \n
      \"Blocksy\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
      Off Canvas mini-cart.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

      The Cart element gives WooCommerce customers quick access to their current shopping cart directly from the website header. It can display the number of products in the cart, the current cart total and a mini-cart interface for reviewing or adjusting items without first visiting the Cart page. To use it, open the Customiser \u2192 Header, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[124],"class_list":["post-6033","documentation","type-documentation","status-publish","hentry","doc_categories-header-elements"],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=6033"}],"version-history":[{"count":4,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6033\/revisions"}],"predecessor-version":[{"id":15250,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6033\/revisions\/15250"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=6033"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=6033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}