{"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":"2024-04-17T16:23:27","modified_gmt":"2024-04-17T13:23:27","slug":"cart","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/cart\/","title":{"rendered":"Cart"},"content":{"rendered":"\n
\"\"\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 is very important for your e-commerce website. It lets users see what’s in their shopping cart and make quick decisions about what to purchase from your business. It comes with a lot of customisation options which can help streamline the experience for your visitors, including some neat enhancements for our Blocksy Pro<\/strong> subscribers.<\/p>\n\n\n\n

Granular Controls<\/h3>\n\n\n\n
Top Level Options<\/h5>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

These options will let you control how the Cart element is represented visually on the front-end of the website.<\/p>\n\n\n\n

Icons<\/h5>\n\n\n\n

The first option lets you select the little icon that’s displayed as the cart representation. You get six gorgeous choices by default, with Blocksy Pro users having the ability to upload their very own custom SVG icon in place.<\/p>\n\n\n\n

There is also an option that will let you define how big the icon will be on the screen, controllable on a per-device basis.<\/p>\n\n\n\n

The icon badge<\/strong> option will show your visitors a little indication of how many products they have added to the cart.<\/p>\n\n\n\n

And the cart total visibility<\/strong> setting lets you display the sum of the products that have been added to the cart.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Cart Drawer<\/h3>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

These options will let you control how the mini-cart pop-up will look like. With Blocksy Pro, you get a secondary mini-cart view that reveals itself from the side of the screen.<\/p>\n\n\n\n

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

This lets you select the aforementioned mini-cart design type. Blocksy Free users get the standard mini-cart fly-out, while Blocksy Pro users have the ability to select the off-canvas type of design. Since the options for the fly-out are simple, we will note down the options for the off-canvas cart.<\/p>\n\n\n\n

Panel Width<\/h5>\n\n\n\n

This option will let you select the width of the panel that slides in. Simple enough.<\/p>\n\n\n\n

Reveal From<\/h5>\n\n\n\n

Select from which side the side off-canvas cart is revealed from. Left or right!<\/p>\n\n\n\n

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

This is a very nice enhancement for the off-canvas cart. It lets you convert more customers by automatically opening the cart pane after they have added a product to the cart. This induces the user in some sort of an urgency feeling, as the side cart can be customised further using Content Blocks<\/a>.<\/p>\n\n\n\n

Please note that this option will only work if AJAX is enabled in WooCommerce’s settings.<\/p>\n\n\n\n

Quantity Input<\/h5>\n\n\n\n

Pretty self explanatory, as this setting will let your users quickly adjust the quantity of the products that have been added to the cart.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Visual Reference<\/h3>\n\n\n\n

Here’s a quick look at how the two different cart designs look like.<\/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 fly-out design <\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Cart off-canvas design<\/figcaption><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

The Cart element is very important for your e-commerce website. It lets users see what’s in their shopping cart and make quick decisions about what to purchase from your business. It comes with a lot of customisation options which can help streamline the experience for your visitors, including some neat enhancements for our Blocksy Pro […]<\/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"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6},"docs_item_badge":""},"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":2,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6033\/revisions"}],"predecessor-version":[{"id":10219,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6033\/revisions\/10219"}],"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}]}}