Cart
The Cart contains a summary of all of the products that a customer has added, as well as details about the purchase such as product type, quantity, subtotal, shipping, total price for the order, and a Proceed to Checkout button that directs customers to checkout page.
A well set up Cart saves your customers time and helps your business to grow.
The Cart context always forces front end rendering.
Cart Context
Cart Context is the dynamic information about the products that are added and removed from the cart. You need to apply Cart Context to the Cart Div (which contains the different kind of context you specify). This tells the Div and the blocks it contains where the data is coming from.
The blocks inside the Div that contains the Cart need to be told that they are in a cart.
In order to add Cart Context, you need to have dynamic product data available on your installation.
To navigate to Cart Context Variables, select the block to which you wish to add the Variable and click "Dynamic Values" in the Toolbar to open the Dynamic Content panel.
Set Source to WooCommerce and then choose the Variable you require in the WooCommerce dropdown.
Show/Hide
Show/Hide controls the way in which the Cart Context is displayed. This can be either Show or Show/Hide.
Show The context appears and remains.
Show/Hide The context appears and then disappears.
Set up Cart Context
The Cart and Cart Context are contained in a Div.
Add a Div inside the Section.
With Div selected, in the Primary tab, find the Context tab.
Click to open dropdown.
Select "Cart" in the dropdown.
In the Show/Hide dropdown, select required condition, Show or Show/Hide.
Duration
When the Show/Hide Appearance is selected, you can set a duration, that is how long you wish the Cart context to be visible before it is hidden again.
Add Cart Items Count
This is the number of items currently in the cart.
With the Cart Div selected, add a Heading or Paragraph block.
Click "Dynamic Values" to open the Dynamic Content panel.
Select WooCommerce in the Source dropdown.
Select Cart Items Count in the WooCommerce dropdown.
Before allows you to input something before your Cart Items Count
After allows you to input something after your Cart Items Count.
Fallback allows you to display information if there is no Cart Items Count.
To reset, click the blue button.
Style Cart Items Count
The Cart Items Count can be styled as required.
Set up Cart Items
Cart Items are the variables that you set up to appear in a customer's cart.
They may include all or some of the following: Name, Description, Short Description, Quantity, Sale Percentage, Total, Price, Regular Price, Sale Price, Low Stock Quantity.
Repeater for Cart Items
In order to contain the dynamic values for the Cart Items, we need to add a Repeater.
With the Cart Div selected, add a Repeater.
Set Source:
With the Repeater block selected, in the Primary tab, in the Source tab, select Cart Items in the Source dropdown.
With the Repeater selected, in the Design tab, open the Visual tab.
Set Overflow to Auto.
Set a max-height for the Repeater if required.
Navigate to Design tab, Sizing tab.
Set Max-Height of 300px (for example).
In the Design tab, Margin and Padding tab, Spacing tab, set 12px left and right Padding and 20px lower margin.
Click "+ Add Block" button.
Add a Div.
Style the Div as required, (for example a Flex Layout, flex-start, 12 px column gap in the Layout tab of the Primary tab).
And why not a bottom margin of 10px.
With the Repeater Div selected, add an Image.
In the Primary tab, set the Source to Dynamic.
Set Data to WooCommerce in the dropdown.
Set WordPress to Cart Thumbnail in the dropdown.
Set an Image size in the Primary tab, Size tab (for example Height 120px, Width 100px, Object fit to Cover).
Cart Context Div
Select the Repeater Div and add a Div. This will contain the Cart Context.
Customise layout (for example: Primary tab, Layout tab, Flex display, Column, Space-between).
Adjust size (for example 100% width, 120 px min-height).
With the newly added Div selected, add yet another Div.
Adjust layout (for instance: Primary tab, Layout tab, Flex, Space-between)
With the most recent Div selected, add another Div (see Navigator).
Adjust Layout (Primary tab, Layout tab, Flex, Column direction, 2 px row gap).
With the most recently added Div selected, add a Paragraph block.
Post Title
Post Title allows you to insert an Item Name to your Cart.
Click "Dynamic Values" icon to open Dynamic content panel.
Set Source to WordPress.
Set WordPress to Post Title.
Customise your Post Title (for example: In the Primary tab, Typography tab, modify font, font size and weight).
Attributes
Attributes allows you to add further details about your items such as size, colour etc.
They are product variations used during checkout to identify specific products. For example, an item of clothing in different sizes and colours.
In this example, the size and the colour are the product variations for this particular item of clothing.
Label: This is the name of the attribute (product variation): Attribute Type (for example size)
Value: This is the value of the attribute: Attribute Term (for example S, M, L).
In order to show Product Variations (Attributes) in your Cart, you may add another Repeater.
With the Div that contains the Post Title selected, add a Repeater.
Label Attribute
In the Primary tab, open the Source tab.
Set Source to Cart Item Variation.
Click "+ Add Block" and add a Paragraph block.
Click "Dynamic Values" to open the Dynamic Content panel.
Set Source to Cart Variation.
Set "Format" to Label for the Attribute Type.
Customise as required.
Value Attribute
With the Attributes Repeater selected, add a Paragraph.
Click Dynamic Values to open the Dynamic Content panel.
Set Source to Cart Variation in the dropdown.
Set Format to Value (Attribute Term)
Customise as required.
Cart Item Quantity
Allows the user to add or remove items from the Cart.
With the Div that contains the Cart Items repeater selected, add a Div.
Customise as required (for example Primary tab, Layout tab, Flex, Row direction, Centre, 5px Column gap).
With the Cart Item Quantity Div selected, add a Paragraph.
With the Paragraph block selected, Input required Text (for example "Quantity").
Customise as required (for example: Primary tab, Typography tab, Font style, Font size, Font weight).
With the Cart Item Quantity Div selected, add an Icon (for remove "-" an item).
Customise as required (Icon Style, Size etc).
Remember to toggle Icon "Active" on.
The Icon needs to be dynamic and interactive.
With the Icon selected, click the Link icon in the Primary tab.
This opens a Link panel.
Toggle "Active" on.
Set Type to "Action".
Set Action to "Quantity Step Down".
Dynamic Value
Now we need to add the Dynamic Value of the Cart Item Quantity.
With the Cart Item Quantity Div selected, add a Paragraph.
Click "Dynamic Values" to open the Dynamic Content panel.
Set Source to WooCommerce in the dropdown.
Set WooCommerce to Cart Item Quantity.
Customise as required (for example: Primary tab, Typography tab, font style, font size, font weight).
With the Cart Item Quantity Div selected, add an Icon (for add "+" an item).
Customise as required (for example Primary tab, Icon tab, choose Icon "+", adjust size).
Make sure that "Active" is toggled on to ensure that your Icon is visible.
The Icon needs to be linked and interactive.
With the "+" icon selected, click Link to open the Link panel.
Set Type to Action.
Make sure that "Active" is toggled on.
Set "Action" to Quantity Step Up.
Cart Item Price
Select the Div that contains the Post Title, the Attributes and the Pricing.
Add a Div.
With the Div selected, add a Paragraph.
With Paragraph selected, click Dynamic Values ot open the Dynamic Content panel.
Set Source to WooCommerce.
Set WooCommerce to Cart Item Regular Price.
Set Type to Formatted Tax Currency.
With Paragraph selected, click "Conditions".
In the Show Conditions panel, click "+" to add a condition.
Set Condition to "On Sale".
Set Operator to False. This will hide the price when the item is on sale.
Click "X" to close dialog.
Style as required ( for instance Font style, Font size, Font weight).
Because the Div we added before has a condition added to it, and we want to add more conditions to other Prices, we need to put the next two Paragraphs in a new Div.
With the Cart Item Div selected, add another Div.
With the Div selected, click "Conditions".
In the Show Conditions panel, click "+" to add a Condition.
Set Condition as "On Sale".
Set Operator to "True".
Click "X" to Close Dialog.
Cart Item Sale Price
With the new Div selected, add a Paragraph.
Click Dynamic Values to open the Dynamic Content panel.
Set Source to WooCommerce.
Set WooCommerce to Cart Item Sale Price.
Set Type to Formatted Tax Currency.
Customise the Paragraph ( for example in the Primary tab, Typography tab, change text colour to red).
Further customise as required (for example Font type, Font size, Font weight).
Cart Item Regular Price
With the Cart Item Sale Price Div selected, add a Paragraph.
Click Dynamic Values to open the Dynamic Content panel.
Set Source to WooCommerce.
Set WooCommerce to "Cart Item Regular Price".
Set Type to Formatted Tax Currency.
Style as required. You can use "line-through" to show the normal price.
Select the Cart Context Div.
Add a Div inside it.
Style the Div as required (for instance, in Layout tab, set Flex, Row, Flex-end).
In the Sizing tab of the Primary tab, you could add 100% width so that it takes up the whole width.
This will be useful for placing the "Remove" link later.
Select the Div you added to the Cart Context Div.
Add a Paragraph.
Style as required (For instance you can customise Font type, size and weight).
For a "Remove" link, write in "Remove".
Change the Text colour or not as required.
Now we need to add a Link to "Remove".
With the Remove Paragraph selected, click "Link".
In the link panel, set Type to Action.
Set Action to Cart Remove Item.
Click "X" to Close dialog.
Cart Total
Select the Section Div.
Add a Div.
In the Primary tab, Margin and Padding tab, add 12px left and 12px right padding.
Subtotal
Select the most recent Div and add a Div.
Style the new Div as required (For example, Primary tab, Layout tab, Flex, Row, Centre, Space-between).
With the Div selected, add a Paragraph.
Style as required. Write in "Subtotal".
Select the most recent Div.
Add a Paragraph.
With Div selected, click Dynamic Values to open the Dynamic Content panel.
Set Source to WooCommerce.
Set WooCommerce to Cart subtotal.
Set Type to Formatted Tax Currency.
With the Cart Subtotal Paragraph selected, style as required.
Select the Div that contains the Subtotal Div.
Add a Div.
Style as required.
Style layout.
Sizing.
Add a bottom Margin.
Shipping
With Div selected, add a Paragraph.
Style as required. Write in "Shipping".
Select Shipping Div.
Cart Shipping Total
Add a Paragraph.
Click to open Dynamic Values.
In the Dynamic Content panel, select WooCommerce.
Set WooCommerce to Cart Shipping Total.
Set Type to Formatted Tax Currency.
Style as required.
Select the Section Div.
Link to Cart and Checkout
Cart and Checkout buttons can be linked to their respective pages.
Add a Div.
Add a See Cart button and a Checkout button inside the Div.
Style as required.
Rename the first button "See Cart".
Rename the second button "Checkout".
With the See Cart Button selected, open the Link modal.
Set Type to URL.
Set Source to Dynamic.
Set Data to Cart.
With the Checkout Button selected, open the Link modal.
Set Type to URL.
Set Source to Dynamic.
Set Data to Checkout.
Last updated
