# Cart

{% embed url="<https://youtu.be/oJtNZQNCsZo?feature=shared>" %}

<figure><img src="https://lh6.googleusercontent.com/tBhzob9yQjf6kqhj8qU7eTo_kkvMP4zA0-eK5haPvJKl4KskZXZ2QV0bq7LebWi3W0Lx5_tdQWlOhFp_Blj5NTUcyKyCyTjoNRoRuI52wfvDMYFPP7Mqww4-PV4zqSGxoqgpgduFMe1B-GOeH7-gW5n8o4jF90s3nZhlVbaQ9imFZRHzY8ZOdb_WDM1tEw" alt=""><figcaption></figcaption></figure>

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.&#x20;

A well set up Cart saves your customers time and helps your business to grow.

{% hint style="info" %}
The Cart context always forces front end rendering.
{% endhint %}

## 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.

{% hint style="info" %}
The blocks inside the Div that contains the Cart need to be told that they are in a cart.
{% endhint %}

{% hint style="info" %}
In order to add Cart Context, you need to have dynamic product data available on your installation.
{% endhint %}

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.

<details>

<summary>Cart Context Variables</summary>

Cart

* Cart Items Count
* Cart Shipping Total
* Cart Subtotal
* Cart Total

Cart Items

* Cart Item Name
* Cart Item Description
* Cart Item Short Description
* Cart Item Quantity
* Cart Item Sale Percentage
* Cart Item Total
* Cart Item Price
* Cart Item Sale Price
* Cart Item Low Stock Quantity

Pricing

* Price
* Regular Price
* Sale Price
* Currency&#x20;
* Currency Symbol
* Sale Percentage

Weight and Dimensions

* Weight
* Height
* Width
* Length

Description

* Description
* Short Description

Stock

* Quantity in Stock
* Max Purchase Quantity
* Min Purchase Quantity

Date

* On Sale From
* On Sale To

Meta

* SKU

Reviews

* Rating Count
* Review Count
* Average Rating

Misc

* Total Sold
* Notice

</details>

### 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.&#x20;

* Add a Div inside the Section.

<figure><img src="https://lh6.googleusercontent.com/Ms5v_HD3oB-5V7ko_R6i59_Gl887zgb7CZBMqNy7lC2o-umQT6-XuCsTVI1W0iGBpAuN2y2oQJz9GtIfnD-LKFyfdCucOqQI4eEXnssmYQn6YcGKfb45U7i3IpXYVS9caLmiw67CvuHZXVr2ghCk_or5-IP5SXgRdzknIvPCeDY3NgXQpdlzE1wnGYJmcg" alt=""><figcaption></figcaption></figure>

* With Div selected, in the Primary tab, find the Context tab.

![](https://lh6.googleusercontent.com/w7MEmhEActKSpMZpkT7jD_ZQ1nNorG-zZLoLHbuP13j7iZEUy4ZFaKDsvjx5Dsu1DcrL2UVLQhuONq6jAXtOTtHzxL6W_OIrOw3gCcItUN-41HiWEj_KWY9UU9bFawAWKrZvfvHeaejlVZyVC2zAisI8Y-WwJiIvulP39ES5O0rhyvP-9z5ZLyUeYYL3Xg)

* Click to open dropdown.
* Select "Cart" in the dropdown.

![](https://lh6.googleusercontent.com/wdQarGc-IyYOai-Vz796xUWPhVx7OsWwIiU6Y2-FrIYPk1vYz5mvQWMxM1EIEQvcqrAH6qVvA8P7myL_hqQjbtkCSCLehe7nRJgjusCGdjSoaQaaCfF6wM_1xLhLYzASY09SzY-KnJdHMOS4r51LVzDFPGPf5CuQ1kDLBpBucfYDSVEgK5M6DanHJ_39dA)

* In the Show/Hide dropdown, select required condition, Show or Show/Hide.

![](https://lh4.googleusercontent.com/d0PPrqwejvIVxwoAcUp5aYinQSv62ZMTFwi_aNkDHeCGZlVnz_LabEw0LrhsnhNe90r5j8LUnzMh87-W1yVEWDgxWrzE8GKY6dO2uJVUeTF4it_b7uT601w3JQDmIW_Uz6ly2cDHrxsPDQelYllOTE1xvxpjzYnB_J-k3eAmSpssiN6PHL-JBSeCn-XQ9Q)

### 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.

![](https://lh4.googleusercontent.com/nnQA4jpt-F1jFXdU-SUtw45o7OTZMV74r5x9xOwp4t6mNRfHOnza2VnhyMsqPnfTgynCczr56D64PNAUHHrxKxjB1yWQKoa3lb5e07eDm5Qau-QhIOYoE6V3LxMBdldZejv0iKJnoWanPhBomtw86Imz37BPKKNJXKFSLDe3F_XOeIVNAyZF63RIymRDgg)

### 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.

<figure><img src="https://lh5.googleusercontent.com/w3u4M_Sm2KGxQ4Wehscys84QW0IrrfZRQm6S-UK6Dmw_jjK_8iZU9eP-l6u_iCJ1uGtg9tSS6g6_HZSbjBJHFYAys2_mzTf3O3ItfU94Adn_mCvD-MxI6wrWV7v7NO2X3xS9FWJcqCx2OK7q55qD3n7pS9S-6LwDySo-4Tv9-3hEgFPwHdegKu3dFVOf0w" alt=""><figcaption></figcaption></figure>

* Select WooCommerce in the Source dropdown.

<figure><img src="https://lh3.googleusercontent.com/NJG_xKwSH74gNzqwR9actMUpikrvvd3nxPikz7dLwm6dqme0043XhHdP9KqQZTiQ3XlMogePCHHvldQUH20bBgvoMaxsgkt_-PZBMdyG8UruOVFzKIg4Uu8CahF-b1DqCAuYbdFRd9ZeLDm5shhI90IkcI1LfvFn2Znk-HjYFmnaH4efUscXmv2yyVMxOQ" alt=""><figcaption></figcaption></figure>

* Select Cart Items Count in the WooCommerce dropdown.

<figure><img src="https://lh4.googleusercontent.com/5rJ0pgDQy1sY94gdDhSpIP_lV4Qxn5Q5bGBI52LMO7gRCZPezhvE6HOvif2Q5JkNPAun796hleWjETjIWaVfZFl2xKw-f17jnrMAGhhC7gLj1MjL27K8DUIoTvZJ4ejLjPq6pMlOnxkAcGzW0dCObU9awDP3Tb0GcQxqGJWdOeI1PejyLpJwlWpis8T7Pw" alt=""><figcaption></figcaption></figure>

* ***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.&#x20;

<figure><img src="https://lh3.googleusercontent.com/YOZS4w5sM313oddevwNzVnPqp-VD67ZfM1_Xt8tf7kOIA0MqczSqv6afbKewAFXloHwUMhpCZqTpchzQKCkHdcixSZjSiM4DRxP_qXz16u2yeggPS3hftabPfX2yIDM0b_7i34fjkW5gIdqsJfyRlp2plmXbOWRmFu2ezlpM2yqsXsv8Q8JqC8tvGoOa4g" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh6.googleusercontent.com/Mlk--XtBCn0WqFyytv3PF2lr_Rs5zehaJPJJM1965PBXAlQYP6xZeSzVC66vbirhqfmhfg-HfDXCwYuftASLWqUWR4neuWHzHEDFfjNjTuSEGx2zCHG7EwRN6qfn76DN720Z6MVE7gvpg7AAX_O7aHpNIaWu8mYpHOOsPs6iyanE36QQ95wzZR8bfdJVNg" alt=""><figcaption></figcaption></figure>

### Style Cart Items Count

The Cart Items Count can be styled as required.

<figure><img src="https://lh4.googleusercontent.com/PaaFkDKKkhTc-P8wnwgcnDl8QHUdmu8TD3ZzBERfLpcTqOeCoImdyWHNSrpQwhVYemouMkMhMzgMbtU4KJhatm4R04gbIGQc50VTCzAyMToPF2zXXuP8jih_M5ZjA28psZbPhsg0WTqVpyBSktq_Rj4rUPKcP0TG1kAkQ511Nmcn0CyhVmx626aIrDf3XA" alt=""><figcaption></figcaption></figure>

## Set up Cart Items

![](https://lh5.googleusercontent.com/Nu6Fo6H5f-d6jSydQNVdasEh0cTwsRU0XCYeN3G2hhE2QEyOkVy3Ky8gmN2VTgJgsms_TTk3zYzY3qCEV8BCf36gR5rJDVtHaZ0CI335RKUR4EKizDcoiMgl2ibRGGMC7LBsy0IA6-wCczWgVzMNe_7C1YP2ibr894tW-w7tRQrXIfDLqUAY8zXfXW17Jw)

Cart Items are the variables that you set up to appear in a customer's cart.&#x20;

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.&#x20;

* With the Cart Div selected, add a Repeater.

<figure><img src="https://lh6.googleusercontent.com/NNvNtAKzg2aZQiscFILBxTwo0JR1Sfb_Aa6JB6_WAENF0lCo2zUUiEgUzuU9sU1iK5fJFzEm_TxoL5SSP3NVUIISUUEdqOBa2jz81IQaN5OJlk2KA3Ju1sHdJ2S8hXDUzOkNwMC8qL95QxDDXDJL9dP5pEIdmafkuu3SuRpbSCyszMtEqigMQcGKT4gXlA" alt=""><figcaption></figcaption></figure>

* Set Source:
* With the Repeater block selected, in the Primary tab, in the Source tab, select Cart Items in the Source dropdown.

<figure><img src="https://lh5.googleusercontent.com/wHIww2WKL9k5t8ahBzqLupb7MZHQOxeKoFFNVYZacAFvvf8LmgetouiL8eRBw7dvnXTsDLwNNAoFDN-RhWj03z4PTQVTDJf32zWROL9H94nfFRJ628q4QVimnx4OMFOXCKHeKKvf42O06tuIhQfMisS7Bymi4Z_mTZUxAEZw3zBh8xO_OgQaUenZM8mkQw" alt=""><figcaption></figcaption></figure>

* With the Repeater selected, in the Design tab, open the Visual tab.
* Set Overflow to Auto.

<figure><img src="https://lh6.googleusercontent.com/z0W3XzpdUWqCMJw_q5ls24bzkFJX18hPkceVTLe5fXwZhOZgrr5KKJAiq-OekuP9bkM646yxaTstay9nBGltfeElcHjkpO0LYO05SV9fI66IbKOQ0KwWvzXVy2EJAkWEMv1h9R1xs_w4g0KsD9xjQsJKtAkyv3itAsmU5WQDueK-2NxtEtcxzKf12ryjGw" alt=""><figcaption></figcaption></figure>

* Set a max-height for the Repeater if required.&#x20;
* Navigate to Design tab, Sizing tab.
* Set Max-Height of 300px (for example).&#x20;

<figure><img src="https://lh6.googleusercontent.com/YHXmacFo8AdZOLdFWxjmWz6MCuzAccBOLZejrTcyKJqh9lYQFqechYR7S-7UCkadimmKQblTA4pjNA52lv1-XZNCxIdsZBIidoRV8Ep8GNIJV1AeYQrbCvBwLeWguhGf1Claiof7YRl5wBWXwUSkMK4ttd7B6CR1WsQ6dMr8NpUZrEDmrN5ibFv6OhPrJA" alt=""><figcaption></figcaption></figure>

* In the Design tab, Margin and Padding tab, Spacing tab, set 12px left and right Padding and 20px lower margin.

![](https://lh5.googleusercontent.com/w467PXo4DrcuzJ1Cj_8yZvl03mSqF3hX5mM-ndsdLVmXaTLx7o1YSWG2F3VwOEC-Khn1t-elBtZtCdT6t0n0LHGr9olsWJcKv1uXgA8XS9TJmvfRoblHr7uo4pcTIoKRK8huQ8p1PKDzuw2qt7dAOCMVT_LMQ9JTtAMMWh8qkfyptA7bx5rOOTWVAfRnQQ)

* Click "+ Add Block" button.

<figure><img src="https://lh6.googleusercontent.com/vxZfqSojX4_tz-0mfMTwuIRbAP7hEQCzvb8pWWiiDklr8Aabjs0ush_VNRuZ6g_zthSbXO-jCaxFy-FvVdvckXodwKTSNBQrmexKA6x_h19PEPP2eFVZSgUZWqb21J1MTCWHmi-zY3ss99hVETr06jdciO7BnSlwstDnAm50R4lrUzxXq_Wq645OEMlQPw" alt=""><figcaption></figcaption></figure>

* Add a Div.

<figure><img src="https://lh5.googleusercontent.com/lc9S1BxsFf6dmYFwFyibQa3OW7f_o7nN13Abhw0M_AA7Hg8jABe5wtDe4P0Uqm7LbwzQkxAGWfrFbE2KzGsav7MRw_1_j1Ua6K_3e17UZeAoJLNNWQ-BpeQEX9n_KZ3rvV6V3-6udoe-eisDTL3aqJN0P_vZgBQhQp7gOcpSL4papoNRdvWureVrfgr_UQ" alt=""><figcaption></figcaption></figure>

Style the Div as required, (for example a Flex Layout, flex-start, 12 px column gap in the Layout tab of the Primary tab).

<figure><img src="https://lh3.googleusercontent.com/_kDNVrAkmM4B4jYx08VFC17jAdDfCXUsc0dlK-gokMpNUa1uBEZ9BEuy3Ni47D-y2X59kPsWx6SIeSPGMdml_dLSrf8-O8qSfMuLOrqUwI-10cgxANFCJnNiDd-S-gKT7NVAqdcGQj-xO391B5QUw5IfwS4l_Q3yiDR8C3nhLJd6Y-hv__lPAHpcyzfHVA" alt=""><figcaption></figcaption></figure>

* And why not a bottom margin of 10px.

<figure><img src="https://lh6.googleusercontent.com/Uqmj_pEqPz_aI62Eu1WmAdgzp3Su6GIFk91DYY0oF0DB9rCJtWhslmEZO33AwcufG6jBzNJ2TlHwu6372TIPavLtcCVHbznm9MM1mgmZtUsL6-RtDyrE2-sJSH43YqrFdZcQfQK_yfwuVNQN-MvqYu4ICyJHFpaLtViQQd-ptDwiASvtCuk3SYePOFHWbQ" alt=""><figcaption></figcaption></figure>

* With the Repeater Div selected, add an Image.

<figure><img src="https://lh6.googleusercontent.com/Q5LXn4Hbh-RUKApEVym6MC-RSzKC0pXRRn2z5B_P-sgiEzoa_hfXyGElxYE0P3M-GflatkTISE1qN31gWS_3EfDk1x0qThRP60K3CdRWt8dJg4oQY1epUehAH1VjdCmIo8so3E6V6gg5CyFlYFW3TPpfbz5oIQi7w1jGoL--hBeJCQqPCqorskxsWdkRaw" alt=""><figcaption></figcaption></figure>

* In the Primary tab, set the Source to Dynamic.

<figure><img src="https://lh6.googleusercontent.com/ubYSY5gHczHmoAYKnj6Dmg8ic68Awn_dfW0PUWS14qw2vq0xuUmdBM2gW5b3haDInak0N1kX_Q--kSiyVOtYYH6BQYQ6JdXoMH-PGSXfYyk26WYIcqW4iMIfURE_s4ZTUcaUdaQ2eERgpX55TCRN-MU4xEK8SoaGQXlGRoXsO0jUGFF5QOAg3Wy9hd5fGA" alt=""><figcaption></figcaption></figure>

* Set Data to WooCommerce in the dropdown.

![](https://lh6.googleusercontent.com/2PIpmtyjlbkpFFHGxJ6MXL21MYYuOOsAQ9ecT_761lZsvA2Kd22foS8bjGEuvCzk4VltHrQQkTUUkUmsD_WhSfeOTinGZAUCMLUPYVt1Nskugl4CGRswDOkMRl9QkNYXAzsxUmZrpboFc2LEL0mrkt95bU-BuPQwil7dzqDzJMl-m15zxDSuJf4nWJ8ESw)

* Set WordPress to Cart Thumbnail in the dropdown.

![](https://lh4.googleusercontent.com/ikjpJ4rNw1ypj6r-Tl4P5ARa2AoqmxgsOU34HnoXpQybNw-Xoxhhm5MaCEdTkARnTbR8ze_Wvnpk43Tj5WGjuEa_yC_SDOqbkoM0ThgAGH1Qmhf-8gsLPK1zgF5J_71hzvghdt_2PZSDj52wZR0kHEoQr_IDFJI0Vhmx1joTK83qKc3ZEMeRcKSQgEq0vQ)

* Set an Image size in the Primary tab, Size tab (for example Height 120px, Width 100px, Object fit to Cover).

<figure><img src="https://lh3.googleusercontent.com/9TGGMJ1x1gyfKDJSZDJ8ZTPuODzwMYenpf1q7jwrkt3TFBgBG3MYb0ZpIh-csp9JDiDqY0qFUpbUfxciVPJAu0Z-9DQPQvpUl0vnTIc4GpHphAoWFBx2Myva2MTUp2AezZE_gtDBbJ0NRWJGj3SVUkaTKyzqoQu1eLzJdwK3d988ObTupTAEvxCdbJMY8A" alt=""><figcaption></figcaption></figure>

### Cart Context Div

* Select the Repeater Div and add a Div. This will contain the Cart Context.

<figure><img src="https://lh5.googleusercontent.com/FG5mRq928UoZjKw9-XIPYncV0RSJZQ214cMHIndHuRXWSFazz-UZthRAvAzZBLV2_y8P9UTioJ3gU6lUTVQVWtkb7SUPFioM0ek7diteiusFS2okWnMpNoKyvzHzRXWsPMSHXZ--6BgVraEZnJQUvO92ianM0yiGFHZ4PIjumugznFAtOq3awViRwA62Jg" alt=""><figcaption></figcaption></figure>

* Customise layout (for example: Primary tab, Layout tab, Flex display, Column, Space-between).

![](https://lh6.googleusercontent.com/wVhdSimEljCSnnf0nRJ_yLIg2XG-yIaxphHYmgoxsWTyzbK-elka9K9a0CooNtNop5NKQMLLCOD5AVGAAjWo4UU5mt6yEOaYLYqshErUPmAPf8w3Wg3OeD6nr8PmdUcSI3hqd--jsAbkTbnyXe4HQP_WA2q4cxKWgU6wcgr48YHfSuUeNszg3T2NYqesAg)

* Adjust size (for example 100% width, 120 px min-height).

![](https://lh5.googleusercontent.com/-YQfUQ6dUD8NsyxS3XTlH39mO7S25OJiGOsoxCSxEIUaw5wdPJqzaBIhOb1MSLeQSORl8LriEfRLEBigazj4ikmxDdafx9uE-Iu_GzWMytJO2UW0hElRiqbET76bpQfPeL6Ab5WuMGAYcFNsqqbYmf0Kuv8jtq0_9-ddcrcoRh6kF35UzX-h1SRCgY7leg)

* With the newly added Div selected, add yet another Div.

<figure><img src="https://lh4.googleusercontent.com/XXzwGEI8kKyALIoBdG0BLqNmSgyXO4Sm_hbMnl327ok3HpjiPQTCEaR5V2Sdqblcb24tHrjYxMe0EBJ0l9ErrStQGt9a3SXLfjgC6OZp05T47OuKvTNASMqQGbpm6nKQu6Phii2BaqnMQCKo49BB5qCk2BFoaUFiAJm7Ss60s53y0UrtdcJJ7EjCWN1WJg" alt=""><figcaption></figcaption></figure>

* Adjust layout (for instance:  Primary tab, Layout tab, Flex, Space-between)

<figure><img src="https://lh6.googleusercontent.com/pJCAd6P3AwjjEw6Ldd6qfg06h-EdcWUZQE-xh685otGTHn-s31eyVeS8i5QEbP7Y2XLowoYqzIjRNg_inZSUBVQ4olq2kw0HqCyWXwBe6Ef5eRNdeQwScdhYrtHAC9eEWlfT4fUXuP_UlaO9p7DIafJWMrbfZ_OlYR7ZxWZUqsLYY2vBB2qxFQz8X-b8gw" alt=""><figcaption></figcaption></figure>

* With the most recent Div selected, add another Div (see Navigator).

<figure><img src="https://lh3.googleusercontent.com/9-NZAE4QLnIaKG7u9JyNVZ8s5mq6N9gCIORbzSxjgCV9tC-nTdwnIaZCdcAEZV2FLJErO9Yag81P3QTMWcgEYhUWbUStS4h5Qop6LWaWEfjBUgqls6RsIdXc4TF6NP3D3k7nqXzXAKYGGXjhrs0AXo6rfDlYKAZDHZGywLCYIxhaS9CbjJycCP3TOtoegg" alt=""><figcaption></figcaption></figure>

* Adjust Layout (Primary tab, Layout tab, Flex, Column direction, 2 px row gap).

<figure><img src="https://lh5.googleusercontent.com/Sm4eLLdqt0WE20BV2J0dukoPa3JQcQkYJrpKghcxONonj8a8nYtXnh141Hu3wMcsVfxMAugRp9CMaQjAQtQUjx2UKlsfBa7LB_jURBQO5nTeis2zAilEKg0CdmKuJOHEUfQFJI3byRpBpIWgCYzPTpd17GhOPa_FauIUftUNwFQBhC6_YmtrVpEDYt4Q8A" alt=""><figcaption></figcaption></figure>

* With the most recently added Div selected, add a Paragraph block.

<figure><img src="https://lh6.googleusercontent.com/Ly018kcWTybB5hTUOUcmb0tF9-8U8QdYGfIll4BDSs1N0SDmqon-EcOS2CJVUBy9ACMCqYdXPxdVuZCTRPLMvNN5QnMGN1dWUNQtf2ZYzgJHHZn5yBM5_2OLmmBru4Oxbs_9Yz7dS9bpgG7FkL-7kHPBkVlE39oyTRyqFGnCvqMOQgk7OFg74p7yV0a8kw" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://lh6.googleusercontent.com/dX0S0y05jQAM8z-cUt92sMvGjoDmslgJbShHFnPiOBigK_vVXWJjeBa-Gj_79FbHibjOrCzhgZJzrdIhAG8YlI7jbW6qcSQHWOQ3OP_pMTv4oyxUNqxE2WbSeIgA4p8v3PrGRxsLRdWAL6MfSTxL1d1ymTV592-swBbEWkoLMXCO6yTki86UDtwg2vI_LA" alt=""><figcaption></figcaption></figure>

* Set WordPress to Post Title.

<figure><img src="https://lh3.googleusercontent.com/AwvAcqASSInT2y0lCFUQWFPEg6hJ0AgZrFVPgid68_lNZUPSna-yHrBro5VL4lD8107j4PIdBNe9QNczYs4XHG90J1o18fbUX3lVcmCv2W6G6dV1bqjYzN3WDF2r7yGU56AQmK64G9hYYQ7i8_sype_9Lzf8pd1ypYvoTChg-YJrAaI30O29gst52jk1zA" alt=""><figcaption></figcaption></figure>

* Customise your Post Title (for example: In the Primary tab, Typography tab, modify font, font size and weight).

<figure><img src="https://lh4.googleusercontent.com/60T8qH5DThkIKoetpMidnHAw5iCN0t1nXCpk4y7vEjDaXDy9zTc1N_rz2AncbIe7rzWmhZLIwq2RyonRv5mtCNXvtgXNGiP8046Bh3Itr4m7BtsL1yOfxMqrlTS_T9_vQAkzgNwKN3qOb7LEoTQoixMI5rZXUwwTaEFfp0uVxqX2HZP6kfNHM_HkyKS-ow" alt=""><figcaption></figcaption></figure>

### 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.&#x20;

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.

<figure><img src="https://lh3.googleusercontent.com/ZYxlisYxra6HuAsbegDoJgfgbmc4x-bNkTpCoPFto1XpsojwrIbiFF08KLBSguLYPO5tJN5bG4wv9eANiFN173NhsCS8TJuya0T0v-VkIycARCZxWoxgxUFCR5gEupFL2W2kCFZXW07_e6h9YwaoW1_XO0ZQBwJCqTEZuBhxfh5-ahxaRNxJeZpuihBtRg" alt=""><figcaption></figcaption></figure>

### Label Attribute

* In the Primary tab, open the Source tab.
* Set Source to Cart Item Variation.

<figure><img src="https://lh6.googleusercontent.com/q7J83RYmZ4jl8duoY8xGC6IA__cbW4glofqpC0JTKTQaJAsBWhd016OLMXj24TTJc3SpUsfJRn8Y2mezjTgg08acIOuk3tTSgfVdbqegXoY9ThER3NXD3Pf3Vhkad7DRxTs4QSKq6teCmtfPZCc4zmUS-HchF7-a-h_7tBr3xOK8HPEVrhK3asgz-zVJCw" alt=""><figcaption></figcaption></figure>

* Click "+ Add Block" and add a Paragraph block.&#x20;

<figure><img src="https://lh5.googleusercontent.com/w-xtKn3ZsskLfYaU7KvoaDRIvnruzksELaCvUKTrCGkWOX1OxC7qtFz59wqu_ix3vHvJOYz-GDlcAxuSG8S4kPIc2_Xq4fRyI_U38hgKc7s5ZAWWyEEw1mx0YtPd_JEyadyU3wtcgTzjqFcLRLLS1AWVT1C1dB-48VLixo8hy-zqqM6w7EklbJqrDzQFyQ" alt=""><figcaption></figcaption></figure>

* Click "Dynamic Values" to open the Dynamic Content panel.
* Set Source to Cart Variation.

<figure><img src="https://lh4.googleusercontent.com/z9-jE9SiQcOLoCX9B7EgVrsSM9OozB8EWl_RF2aXdKlopn-f1JrcZziS-_NynTAtBNa4A70cpiCJC3B-OnjXpGBvQwZp7usI2nvVnjttjBRTp_0zatceAcOi737EQvhXrvElTRbk4G6U_hosYqNIt16tl7wr1M7TEBABl2qxEj77pV8JxYPYWgPqTWFzWA" alt=""><figcaption></figcaption></figure>

* Set "Format" to Label for the Attribute Type.

<figure><img src="https://lh6.googleusercontent.com/3kPJ44JcjX7M1H8Zpyrr9USKX2uaQFWonPTvEy9wpxtQyiOpMM39RANiXQJLvZYOoxRbPD59ejnsB5xo-84HCzzFaDILKq8JpxXMEafUidCEl0io3EQeZoAbmDFHM9PksNSx7u4wsSDIEMW-t7a7bnS0svu0349kJrsRHlaGMxGQSnqE07T2kKDraeiu-Q" alt=""><figcaption></figcaption></figure>

* Customise as required.

<figure><img src="https://lh6.googleusercontent.com/OYdVXZpS8WHbKlWNnoD4OrD8mSiU8W8U-X6pnY7Hh3J8Nh8eHIvPU7-jvG1_GisIjz7Ii0BRsR9j7emH7kjkNnV8R9VcBrRq8jySIIYSPLNFJsbIY-3M1_3Wgf6mn8Ua0WBTihB8UUFiQJTOz3K0gs-v1uLLyrW_yoyEJxqg6psTEdElPA0yd0y_Ruegvw" alt=""><figcaption></figcaption></figure>

### Value Attribute

* With the Attributes Repeater selected, add a Paragraph.

<figure><img src="https://lh3.googleusercontent.com/S9IKzwXXAmZzXcYu9WbCQVju2T7YfCVrbU2CKm-CIIky6cxSXakld8QH2_OvefWGgSutP4Uw_XMtdXdXTzxB3I7L2sg1TGab0Xr9z8INzHux8q451QhXGdsMbletJ6xcBdb5aik-MJJJsvjgU6f6Uu7HHZBaluuFv9cQyTHXHxAxdqTw6ftfUfYputTOZQ" alt=""><figcaption></figcaption></figure>

* Click Dynamic Values to open the Dynamic Content panel.
* Set Source to Cart Variation in the dropdown.

<figure><img src="https://lh3.googleusercontent.com/Q3H8BW8pOJUXGXKDr0CW_7E7yPvMvKgkTtcnfvnNTgvdBTVfO4e2fZcNPvodiXNf9WmIJiV9-X5pysXSKXsl8ibOw9ztpgiDts0qT4fCWVdaPWJhHAM7PX7tbN0Py3Nk3aQ0ZXJQwB_GzO6cLjenBa5d9VbbQa3W7GG3lBG8Onje63XUP-9XgxKq9havyQ" alt=""><figcaption></figcaption></figure>

* Set Format to Value (Attribute Term)

<figure><img src="https://lh6.googleusercontent.com/_84GEzOg51Sn5AmcVF6h6_7ArIbHvm-qWeJfwxtvqWmrq2YNa4p-Dy6mM1r4iGgvfb0MOMr1WEYclDoy_Os9eEAJt9CbD1e3rtxBN0srTUnSbPFjMN2_jG7oKX2JLbV2DSB6unFgmCcHrgcpHayaYm2ZVtoX5qzezep-5aaLBAdb47Za2H1iSraZrfHCaA" alt=""><figcaption></figcaption></figure>

* Customise as required.

<figure><img src="https://lh6.googleusercontent.com/fh3EnoxcQj3Z-L7JkdeyPM3Kw3O6m20eJrrjASJjJVyPLZCa-WwraFZQgBuTeMGmpZEJRrhBB3Z-43eeVt8qPEHxJ1NkjnV16_xQIlZipCngyf2AbUDTcIIV4Ux4I3qpXfAdMVneKYXbJXBCBUc4t3RvOAjQW8XH-_YTdZYCJ-UDiqUsKu9Q8T2-7qN8Eg" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://lh4.googleusercontent.com/nMlrQtPcTn0DfKJBmNvc7Vj7RnPtfHUlfSmnX8SgyRCi_tG1wukhsDW_aRWGjpe9OgmVpgwaxzLfv26y2Y7pxHp7X-Mm_Nx-U9xLxvW9LAqzmEVw5OZQQszFkTn0A2Zegg3b6x9qpZWDUMoCctZ5lzWCfh8vqTxZNX5TyuPt8RamhQ9FGlAZZIXNiFDQmw" alt=""><figcaption></figcaption></figure>

* Customise as required (for example Primary tab, Layout tab, Flex, Row direction, Centre, 5px Column gap).

<figure><img src="https://lh5.googleusercontent.com/a3XKccmBedObyqbKhP9_KoZxxIfCLkcjTfq7IoQKHxFo1dsWGuaIndNMmfWDL61b6QgWlbfNteSFBXQ5XlPE4mDVtI4JATcVnHy_9wcTvrHrtK0jVRB5VZwuHnfyg8kaMetBohsiTT9TdIzi_QIdoUgqahcVrPGhW-FCL8xpGDQ0nvCXaPixkqbfPw7xYA" alt=""><figcaption></figcaption></figure>

* With the Cart Item Quantity Div selected, add a Paragraph.

<figure><img src="https://lh5.googleusercontent.com/5Ra3I_N1ZzSt4tOl2sJKoHZv4FZrC1tuaOc_Y1oR2UaDi6H5-Y0fkcC4tONzsJFU4nia1uYVd5gk8rHpWyYtcTHzyt5l_9XyngzWnxBgrGYUsj025Xpjk6wKpIkfpzckFDnpgGHwSVDSembw3WoiUpmaMSXbEe0NcZELJtKcs-QKuXCxWd8ir7rpq9-wOQ" alt=""><figcaption></figcaption></figure>

* 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).

<figure><img src="https://lh5.googleusercontent.com/rdx2h3OucAwEebF-zQVk20ERoKRXSoWEucqq4UwXpwbmLdWsUX-nmEXprC-2sAdxEdQYrDH2pvafunv6oqgDYQBJlYJrL68j5FxRxKD8lPPaYXe56_zLa5O3BjIrYJuxcFz-I1qq7e6y1dXqdLf2hUHPX2vb0ytwR-vQFAik76WAk2TK5085FMHe1S0_PA" alt=""><figcaption></figcaption></figure>

* With the Cart Item Quantity Div selected, add an Icon (for remove "-" an item).

<figure><img src="https://lh5.googleusercontent.com/IPUH53PntV_Sz75jwcKBzPdKWIkgxNX5M3Gd2ZbICX8eSRSBRvv6X2SHET5gtPDHz9gIDqqiOaTCsnw57EKI1BsaQdHU3yDdov0c4gPbMMMIZYPvKryd3Pm6OozIosU5h2HEsjAF3uubtQPK_KgwCp4FSkJ7tMOoKjfBHSOD4g3qos_RDyPaRafi_diK8w" alt=""><figcaption></figcaption></figure>

* Customise as required (Icon Style, Size etc).

{% hint style="info" %}
Remember to toggle Icon "Active" on.
{% endhint %}

<figure><img src="https://lh5.googleusercontent.com/xa3BiqnuOsc3FINkSQtfp-4wAyJyxvMtdSmm30heBQpHQDFFqLRu2tpDRfJ8PqaBEBcAkZSLJMZUQfxLIwxc-kmJS6twouLt12H36WuAH7CBTeuB1sWaoVIQfjL-EuCAOdzkW3Xq7qHQpq5sbM8XLDJIxZbQDBsVzCz5SruOOyYxJ_kaq4buOnU4fIZUlw" alt=""><figcaption></figcaption></figure>

The  Icon needs to be dynamic and interactive.

* With the Icon selected, click the Link icon in the Primary tab.

<figure><img src="https://lh5.googleusercontent.com/P4pnhT9X0UDmcaDhJd4DEhGVhiXoNeVe2nxBnIlL6kzlDqTnDY4YCBbjYv3bGbwn4vRSTnYa0454QjeyrGQ992VsJKseZso5kwq_mMAuyd2qpx2U8ZEnHVkK-uh-UkZa68z8ylB1fwnMZI23KzUKHtv6VRngmy37aaPnZ4h18jBISureHI713Q3uIR0R_Q" alt=""><figcaption></figcaption></figure>

* This opens a Link panel.
* Toggle "Active" on.

<figure><img src="https://lh6.googleusercontent.com/rwGIfK81Bv89tAAB-drXmj_5QVNHfY-OzpM26OfESjttR2eqWR2h3FvUixBE74CSfzLBj62wcPV98AOEyJTNovkm-XbxQMQdFuRp6hpvF6oT5JdRb0gd6-BP_vH4L_DLcD7BkNkZKEKfTLXlDTrcxBdBcZ1bpnidEB39aLGxsv1mcS7Sb2XQ4agH5v86zA" alt=""><figcaption></figcaption></figure>

* Set Type to "Action".
* Set Action to "Quantity Step Down".

![](https://lh3.googleusercontent.com/7Mal0u18IAHs2xX1AnVbfa18eODxXupVR94Sfj7VZRQeeKP785FmmW7oBLUiSWDijys4M4GKFh9qAQNw3RjCX4oZhPE3ty8y1cLkZZZW2IeRkTnvd5OdW91k8kW14TJcD_43ZZknCeLnSlBCWEQcxaqT4PA4y0SKNIqNFKy6laUMT5cUQY-dOmRGJMEcww)     ![](https://lh5.googleusercontent.com/sCezJHPK8ifJeaA9go0V0caa9CNeNayT-9lJTRS-D3ON8rbIv7qhqlp_Mn4xydJZaZL9lnT952qhHVnN6u_DfDwS_GfP1uNK4PWdyWvIFgSkCEM5xpi5kF5GGgf1EKIVbaaET8gMR0rnBzpviEgfADTKrENwh1jJ9cNY0m4Dnik2gCHS5tvFTYa7deO8xQ)

#### 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.

<figure><img src="https://lh4.googleusercontent.com/3bN14RmsKpcMOMlcyah4FA1QTfKiYDHlElobMdP_m0K807bEqt_0Kmvlo1OUZ32doxnHV2It4JhFKTU-TpczasZ_dS0GPSsmHFNXNeUNa653rBHtEDXSnRUmCvKXweKk1EAeyZ3a7ljNNUNU6g4ZtGvjckUB0MIdmI3OC4u-9Ow4dwy4IUEaqOs8E2xS_g" alt=""><figcaption></figcaption></figure>

* Click "Dynamic Values" to open the Dynamic Content panel.
* Set Source to WooCommerce in the dropdown.

<figure><img src="https://lh3.googleusercontent.com/4x7z501S3IuOE4mizaX57KqfbDHRxC7aW3jyp_ETAoxGnSlCdS0czGDSZGkLg7EK0ZYbfMOOKVcgSI9QjdPWWo8qhLG93quMdKY2nch7jxkBc82XeLLfT3Ap1C3D54LD6XNCwbT6iq3JKrapAVfBcqKEvM4T9-v9AvNmFhBth_Zz-IAkdtZ-fHtVgSl7Rw" alt=""><figcaption></figcaption></figure>

* Set WooCommerce to Cart Item Quantity.

<figure><img src="https://lh6.googleusercontent.com/SJnlcmpzfuzPRcmPxYvbYczpYoffJ5I_wueiFfbbDaDBXRuBdsQm_60z70oEDkDGuTJfX9hXsGWlLCVeLQY6b5XUEdu1wQmsGVtMu0NNaEGxuPkWBB5X3ScmgEVbkw1J89xQ_rgx2WfW0PvB_K_A0bWc86Vpw1yjdFTokIeKH7Rdek3d1LdoB631V9qO2w" alt=""><figcaption></figcaption></figure>

* Customise as required (for example: Primary tab, Typography tab, font style, font size, font weight).

<figure><img src="https://lh3.googleusercontent.com/REZkav4_sBm5UTxvqZBx8531bNkSTZp9HjAStvm9_auADa-W-KXsgpZTmXqYHIY0NWB7jcWAcrGfdHuBQtacKPiffciB-SNTHiNPt-uAl8ZJ6vpeimAWcYYf-1CNtEVlKKPevjushX0nv7Si5_7LA2lpYy5Is8ma2jMUY8Ouh36k-_JzpXHnSMdAyIR3yw" alt=""><figcaption></figcaption></figure>

* With the Cart Item Quantity Div selected, add an Icon (for add "+" an item).

<figure><img src="https://lh6.googleusercontent.com/Zq3ySY8rdP55-qkicSpnAacTsa-c3DauPiCG1ebEcNM_ut_g2rWWHzUlHl251R9aCHSvw8zmjRq6KuLQrlHqa1K7ATNRTkZkO11Egawy9SUFjYKhhakdDvCAEQZaWjmk4VEITUe4RSn0yYX8LfA9pdT8lMpEjX5thA9LBT1lLMbVpaSe1FTSYozcXk7Dmw" alt=""><figcaption></figcaption></figure>

* Customise as required (for example Primary tab, Icon tab, choose Icon "+", adjust size).

{% hint style="info" %}
Make sure that "Active" is toggled on to ensure that your Icon is visible.
{% endhint %}

<figure><img src="https://lh5.googleusercontent.com/qUdm9u55h90Uk4ta4bCxNeP1uuLSTB180dBrbnTAyHEEgZXTGvtDc8sjroAZQCPTPgWAt1sYNdhxOC1YBPbJsgWRxajpMbif_v-yEEeyrQxQFB0gjp8Y5nq4wjReQczJP4CuXfWiIsYXDRKNh999lWa5Q83rQ8VbMXSlCZ_PGagvnvjCj8bFcZBFXkWbpg" alt=""><figcaption></figcaption></figure>

The Icon needs to be linked and interactive.

* With the "+" icon selected, click Link to open the Link panel.

<figure><img src="https://lh4.googleusercontent.com/R0AKGGRr8LeECOYzN6SI37-VNkFrOimT6Pch7acmz2mAfU6jrHtz2J3Jenk7aCjF0u_Od_3yJEhDP2Mc7zs58xRfXt7jzI9PSnW6SvbN3KmtshxE_YdElWNbQrFaxZrtLRzsgRCob3p2qJytQ9RYsAL2vhSqnrztkDrNap4O0x0hSOcu9GNv_lYXU6K04g" alt=""><figcaption></figcaption></figure>

* Set Type to Action.
* Make sure that "Active" is toggled on.

<figure><img src="https://lh4.googleusercontent.com/jgiDoS8PMp61qi0p9zrbDiurw5nKrYW2oNKRMj479_rXTK0RaJnZQw_oVGb5cU0ZZ8mybEvLpYAQ0ThG53fMp_J2FDXTAxWCEv5PXebGAc8gDOVF6Fu8lquRkc7Eb90OIrf6fTvX5h9iyQTyjvCtHkNOw4p0OfLvLE_JmumVRboL3_WJHl5pmoxyiF7VVQ" alt=""><figcaption></figcaption></figure>

* Set "Action" to Quantity Step Up.

![](https://lh3.googleusercontent.com/ZGq5-CTErhVipzAiw9sEwzxsq9B2QJ1rfHZ70sWPSSSJUGpjYYK28qLTD5UlOPnRUO9pgEo9VNteXMde6aOqC2VCQ-hw6rHv9PR7YpiF4mU6Knrja8NMdYiiNIelt69gtJ5ZR79JHah6tBg8g_N6p8u8Qs8kgowTNnwhVqpNPuX-NSjbm6Gu8quq8TFp_A)tt

### Cart Item Price

* Select the Div that contains the Post Title, the Attributes and the Pricing.
* Add a Div.

&#x20;

<figure><img src="https://lh6.googleusercontent.com/d_ZhqwqkUs_DuF821hJ8ccY-aMGSUYeTFgWehAS2vtEdkf679EfL9suUi675F6gf0iNBRG1texrYwma88LyPb8Xht3e0Gi_leUpUVeXjU38R-4EpuKTZ9gxM6sbjY0Ye80VCRIFl5MJO6PnYVHzb-3Qw77dSK9Soljh1devdAvQ1kPUMi_1f97ogN3abFQ" alt=""><figcaption></figcaption></figure>

* With the Div selected, add a Paragraph.

<figure><img src="https://lh3.googleusercontent.com/6gwyzWlSCYk2msvY368CKsMaqccCanQL4NrXVHr3IMzmXKKe8ICE9BTvDXBv-D1cZTJ3XISyLFupapU9pczxI5xI7-wAV60d2dT1YH--jKIbTC7RsiKEIGuvo-8uoLi0Jk9UbXSJFcOsqDIP-XTsNI6x0kGI_abDdZkMC0jrlApv2Zd9PQY9cHc5yWping" alt=""><figcaption></figcaption></figure>

* With Paragraph selected, click Dynamic Values ot open the Dynamic Content panel.
* Set Source to WooCommerce.

<figure><img src="https://lh4.googleusercontent.com/NKLJm3P4AnQmmRzcf5TV3YGMl1VHFPJCTzCRfBENzAD47OKOT_xRCNrqmiAphfc9rjT3mCnUagSfus6O7izZUSq_OoYEXRpP0yur5XOf4CkE0ld5U2swZNzIAgpReqgsWiCX7lS5WdVXqVDzB0d7UpQXPfGgxSqHPvGmOEVW3IjrkPVzGI6mxdpsN9Nb0A" alt=""><figcaption></figcaption></figure>

* Set WooCommerce to Cart Item Regular Price.

<figure><img src="https://lh4.googleusercontent.com/g_MuYp1Xgxfteec93bqr2zebmqLEgXLfDnyK3k4utrUBZ3xeLsk2r8s7iB_2Z2uq8GqeqjHnGrogs4Sm71uH0jmiGJJJoCDaOIpTKB1d2VYeh2q2jJOXupWHWnRMsamBJvUvCLIor6WdA0dQY_tvnnQY9iTnfbe4MSeNlMiHlu0znYook0skNFELSMgxAQ" alt=""><figcaption></figcaption></figure>

* Set Type to Formatted Tax Currency.

<figure><img src="https://lh3.googleusercontent.com/TmnMYA6tYR0vGvdP9GdlndT3Ip8CzHN-Xy_u8nuIX4uYL2dmTzxWTk02mKKwODh6ruwfotuoE-CayO7vWtLyxrcF6s6ocS-P_QKFOF5OHLL6c_Xh5oVPiB65tgBAYtdfZWRe8Cc7_uKsLyfvVm89BT4oAqljWtJrElmhy5dzenfIm6ximi_szxm6e06BTw" alt=""><figcaption></figcaption></figure>

* With Paragraph selected, click "Conditions".

<figure><img src="https://lh4.googleusercontent.com/u1vOnAdrNTw4-bpAXu5QBCyOoBebSYyQ7HhhBuJiP7bPb3sQxgqqUFfTBYTpRF82xQO6FudNsQE4LezdfhijyLH9jmYgof82nTn1oHKxDEbJ41Dz-ridJtaIYyonu3VyOsGbwG9reyDrM2Bg1ZG6HFwepId9K-V5lzkCC-QUwBHNtKweRVf2NzhUHxrV7w" alt=""><figcaption></figcaption></figure>

* In the Show Conditions panel, click "+" to add a condition.

<figure><img src="https://lh4.googleusercontent.com/m3tSROSXcfogmLOAFpkuZ-696WqAvKYH9ihfZrgz65bUyZDGbFugQBDWrp53I5z9aOHcFiBSSJSRZDST1hCKiNLlxxwhVZXKcLCWdVSzJ92Yqsxr0VA_9YQ1pYr9hN1AyxynuyV6U6SRFCE2bO1pC-2rtI_IKOK98cFTjeSu3pEnZxYgxAfJ890K4unI9Q" alt=""><figcaption></figcaption></figure>

* Set Condition to "On Sale".

<figure><img src="https://lh5.googleusercontent.com/4CS9TANbKyR2LC2V366KRyk_2vsn8z1K-7SdUvRA-k-lY0k0bToJq2kXr0-Xs-zcPFttqS-7CNaAMDtsy_CtQrcJMNoJTWHfKi9F6ILBeTIpOtHatXuLkFpBys6PVuhxTCpUOwa3bNjCgm4BYZNo-iQDAcNuvSc9VpqkYDmAz7Zbywm2qROzywL_-Da0oQ" alt=""><figcaption></figcaption></figure>

* Set Operator to False. This will hide the price when the item is on sale.

<figure><img src="https://lh3.googleusercontent.com/fyIEII4Uf6U0NsPt__-P-u2sJEUvsOPmroBto__6I5YOyo__hk5CiD-MwTxWcWlEvH34iIcoLF6MoiHAwRWMSP7EVvHAspvNyjbg-8MyIZQ7szfzOQP_f06bq9oPAyTwNEBQ1y5c7vvc-an3_GOtuISKwSSfUI0wACU-NWK_dMePZ4cLzfw0h-ku5xBkpA" alt=""><figcaption></figcaption></figure>

* Click "X" to close dialog.

<figure><img src="https://lh4.googleusercontent.com/HTnkbpiL5XYqxtuCMxOix8jkRL8LC5IAjHgFZxjNXYHr3DG14L6SJ2nhElxwmVDYTTAdF8B_LXOcnln7H03AsBxovAfd1b5a3J5CazjgDFsbW3OFCALWRfJnXiS3pXzumY6Rh-f9cjqIbH1rgW3u5wDcU7oqmekHcMp7_JU8602jn4iCInhsY7j0f6Hzpw" alt=""><figcaption></figcaption></figure>

* Style as required ( for instance Font style, Font size, Font weight).

<figure><img src="https://lh6.googleusercontent.com/sC07Bl2kXFgvKgf8WMaOxHeABtSTqBVvQDsycR-8Lg5wMC2OqCBY5SN8Zv-i1-hFkjDk9q2oXe4k4GD1MGLqd11a1qqZccnpJKwPEx5_aPsLePwYT-hkd2P5neonC19H9f3x9WF9abauAk9JQSS_SpQhl0NxLXRavUB2_o4JDKiS8Aa-MP2RpwVldXLkLA" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://lh3.googleusercontent.com/2Lmj_jROESGniYhfPwwdtbvDlXf7411PSdJFmi-1HnfP9k9KImulfOpbbH79aq4gUtwnkRwURDbFyDazTi8cJG203pMgUyhktzHCxGG2vpnsVhgDv2g2CeiprAB-gXJbhRjzxx0q1fol1C7eHF937dM6H8OV44kKICZDrdwrHdcLvInYHB6HTZA5Ssmgtw" alt=""><figcaption></figcaption></figure>

* With the Div selected, click "Conditions".

<figure><img src="https://lh4.googleusercontent.com/ZabHYSwWRkWc0YaXDupfDYPPKw91ZZIV3v32l-g7Yj-3scaXxi6xYNptnV4hFghvThCi9vuIfshoEHeKvpH6iX9KF-f9N5gC_WfCGKPfQqm-JMawk3pdlxUy496YlrnvFSp-Jw05RRjD_xYBAmkfSwEfLdWH5NszshGreSiMGDUevFzk2WJx3Wc4Y2USCw" alt=""><figcaption></figcaption></figure>

* In the Show Conditions panel, click "+" to add a Condition.

<figure><img src="https://lh4.googleusercontent.com/6_nPAlWhyMKas2yYN-gCvHE6afGVeaxmcmNQvdXWiQGQ3Chqs0nBTnGjIa_UEhNMSC6B1n5H7pk4H83VhuVy4wyyOBIJqEpposec4iq4LTYY8BVsEGu341P9Kz6CWbvF-W839H94Dci_BREbZaQepxZPud1d6PvFSzILZfbvhzuhMauZNt7GMADfY8e1kQ" alt=""><figcaption></figcaption></figure>

* Set Condition as "On Sale".

<figure><img src="https://lh3.googleusercontent.com/7ItfQdNDQhIspvF2J4oR5wBQa6D7CHnX1W1GNGQWX2cuQmT-o8FqYLW2K4PEsi-Vicq9K5uRXhfJUlKdWAg3cS6H34cPCxKoadbj1D25jCZ8OaO32lgTpFc6Nzt1iWEXIXw-6Oiuxx71qteT2txX8KcHKjUAS3ouQUkmSoQ3rLuzHyFvYE-tOBMAlQIFmg" alt=""><figcaption></figcaption></figure>

* Set Operator to "True".

<figure><img src="https://lh3.googleusercontent.com/brcB1EMloTFtp96TyOr37Ph835dZNAeqkDDZoWnaUxdsdgBHWWAaelUsrcKPtkdR0eiERTl4iuEH4OVzXvrdED2JSsOfHYcIu5RsytME_xQzaZ8vA_qy5DNe-6oAl3FRDZJ01QQTrgZ9h_mqdbkxeWAYTQU5wBSe1EqU_Lw-zCSuqOSXnAi7n4RGnhf2ww" alt=""><figcaption></figcaption></figure>

* Click "X" to Close Dialog.

<figure><img src="https://lh6.googleusercontent.com/9VR8BK7vXlxnLZpcQnArmW43AW9K21fHg_o3IC6Al2sey92yq5ixRD0o-r5mUKo2gcKHTU7JySWz0EwBT8e4DuC9l0dRU9sUMu1L0QNzwlhKPlScr2wFzSy2cEQWKoRWCwrFHgNkZ2liPctWxHRTYkTlZVu3odc-3R5eGYfu-fS0SVpEqrcp5tBXxUVaFQ" alt=""><figcaption></figcaption></figure>

### Cart Item Sale Price

* With the new Div selected, add a Paragraph.

<figure><img src="https://lh4.googleusercontent.com/RGnXm1dmzzQl4KW4Z9Jtyhfkf-fxXdhhXXQfVSMzBTTOeasvYMGVAWIhj27lPPKafgl4t8XL2VBi4-ANwP5XhdR9dKMDAZ4g1TU7y8wiCX6_d5_LSQ3eGgXmGFHgrPrcF_ukyUJnxpqCsJTF9pClQSomGkbV8Ow3n-gzr9rADxgfoydwEg3_9qjOgooE0g" alt=""><figcaption></figcaption></figure>

* Click Dynamic Values to open the Dynamic Content panel.
* Set Source to WooCommerce.

<figure><img src="https://lh4.googleusercontent.com/DOrOFgS8FgXaTLDWZVfVpjHaR8ZRVTde_RAosI0Z3D3MidKPNCaOomlFQhG9qzh7HeGvVENHAewtT0PbMb-zJxy6AixRi6AtGjzhYKv-rVYRwkwFwf5QIF2oESlymjo1x5p4GIRK_mrwenhQPXd7WL7qR5EYaDJGVQpJHx4tkUmJgsdo4TRai1Y1KKUwGA" alt=""><figcaption></figcaption></figure>

* Set WooCommerce to Cart Item Sale Price.

<figure><img src="https://lh4.googleusercontent.com/Lji4hptnfKb_LNMlh6u_vQFhZcX8V4C_2nUo7VHnK5Ti1tVgY3wdepldVikUIzGN1pZv6_6WOk3aBa9X94W_AQFU1GjNPBS6z-mX89LnpNWrMC3ENzk7lXpwMcjGokUUzoRXBxHYOOsvoQWrZOVI4exJr9vlBaS1eXAxqdKuynGd7KKMDyH9czIxu-DUEQ" alt=""><figcaption></figcaption></figure>

* Set Type to Formatted Tax Currency.

<figure><img src="https://lh3.googleusercontent.com/0_hx_NrFNxMkbRz32bRJNVKvKq6POhPHoppYHeHUh93Ms4cyUyDreQorcPnAKjN4HsuV4SM1LdkDpQDQECsFInfSJ2IFNl8DteLn3nK6-fKpTDeXkNNRF1hx3RV9zsFMzeeWKnF9rTu5dPBchA68yJkbS4GL8xBuOqXxCuTUYjxVwtxidWf8i2hk-Tiu1A" alt=""><figcaption></figcaption></figure>

* Customise the Paragraph ( for example in the Primary tab, Typography tab, change text colour to red).

<figure><img src="https://lh3.googleusercontent.com/Xg0a0gTbesIc9kewgImMXmwQ9M5I0xaPxQB6yI5gzhiN3D5_wyosoQhtv2oIZ4qbah8Scz4AqLmeg3wSeMoVF_6Iq9s-oI9m721vnP6brvkFphAKtGZREPoB1xhhJ6xi_xbbEkZT9DGPgk9oUKrHGOgRwIZ95ZhszqZmkkpIPnBUs92pAka_QwpYpU9I1Q" alt=""><figcaption></figcaption></figure>

* Further customise as required (for example Font type, Font size, Font weight).

<figure><img src="https://lh5.googleusercontent.com/oV3Wq8uY20dvFBQl_oxEqI1UBwgBVDSfpRW3i4RuJt4zKDKI1-FMD5IRZz6MsJrkIXqlyNQD-p-NZM6jHRM5UW7acmqrC4Bti8UB_jHp0WVHzwBuMw_Upm_GcHkmB5SJXXXBLjg7ysPxBtWOdQlEsDvJQUtiGUhdNQcIq57nwdqCRxJcSOxiHcoo-sKJvA" alt=""><figcaption></figcaption></figure>

### Cart Item Regular Price

* With the Cart Item Sale Price Div selected, add a Paragraph.

<figure><img src="https://lh4.googleusercontent.com/C47gmyFXfNV9EZlpMPsEWTdkFCxqZYvjwZCPbIG6F1fX3SDbPHQnHqwaIJdD7g-3muuwFUk_nrC854PBo7HCeVhnMjvsPjRc8eQ_23xRFolFK_MePiELSR1Z3IXfXdRtYlJ1cqHETh4EQJMi0wFJE14Mzdw0VDcAdZAekv96XK9RDvzYMG58Qq1kgzM1FQ" alt=""><figcaption></figcaption></figure>

* Click Dynamic Values to open the Dynamic Content panel.
* Set Source to WooCommerce.

<figure><img src="https://lh3.googleusercontent.com/sqxeGIwe5oGidk3JA_fM3bs2busDUjQnW1yWIz0cNUaHm-jxAW2b2b2oH8rv7OdCxqvnSB-wphJy16zt2bCmLsft3SbBIUIUtksu-NpES6HPp1Yv71NBEscPZtYGZiVCj3uqIUnHtZ68GPaBJWMSfjFMfAVqu-mWpbvMozfc5M5IvB8fdCCUvSbb7SJ_EA" alt=""><figcaption></figcaption></figure>

Set WooCommerce to "Cart Item Regular Price".

<figure><img src="https://lh5.googleusercontent.com/w14pjK4el-dcm6LGiUdHtoMLgbNYvu0lgn5WOMXKGSdm3vfMIW58rhyF6mcfkFSDorTXhkbf2ImNuCCqGviCEb7hFIm7uU3H4Hm7zuo5wJrR9ws2WNTgb_ngpf2f3VjcuVEeXtT1TVnuDrGSr3yMYDhnHWT1xAV8_Y6a574BzZ7TnzRpg5RNIRM-ZiLpLw" alt=""><figcaption></figcaption></figure>

* Set Type to Formatted Tax Currency.

<figure><img src="https://lh4.googleusercontent.com/vwTlhKRDCQgyclrlpWVUyUipSQT196Pv6g_u0MEAvQt7bT63T-ocdg-plptaB7ge7DvYO3pBKeLavud65YiVFQGh5sHP3YD0N2mHOxbGkv6L8yVKnlJumbMiYEvTwrOTKtNFZ5GZrurqQkE-HSuab2ps-71fogS3s87Xmte-bplHRf5IqIYTUilV53_Rsw" alt=""><figcaption></figcaption></figure>

* Style as required. You can use "line-through" to show the normal price.

<figure><img src="https://lh5.googleusercontent.com/VhR8n895CYegDnO2q7jxsZYicbn8_hmkbzxEzvxQJYG8OfCym946Fg2eaIYDEk75E0sgcH4efK5wSAFgjN2lz1pfT7DC1RaQhSnfpRvZOEwLfdw3n-yd3eAU2X0BxQUlUHUi2Bdj6dAhjnv6yG_NbAOAoW1ZU4WCYN35Hhpy9F7wUyI575M2nwCO9APSwA" alt=""><figcaption></figcaption></figure>

* Select the Cart Context Div.

<figure><img src="https://lh4.googleusercontent.com/Qa8lyBNFUDBKGCq1Dob5-E4DIeMmzck_cn50fM--TckY7a8UeDS365tjdgs5VTOeiDlhUSumcIpMW43KWpmOwGndt_CA565unOUNKXW6xD_is_1IQa2CVazCq_natsqSDJ3hSSlEGYTnzhw_q3iiluKzHUCzUM7wHf--aDpQtOT6oIWBqVXHzIzglHW9mA" alt=""><figcaption></figcaption></figure>

* Add a Div inside it.

<figure><img src="https://lh3.googleusercontent.com/1AfDiMdhm-gOtsVHXyQ7_gHcQI9UP2TAO1O1FbH4FDS0qya5ZboAJ2xBxFQSchDNQo61vMaalPyV0Od_80TjupSfI53ITD4pcXTylXkjKRM_Ia2HNNB3b1ykpV-UXb7ATcLqRUGw3rAy8rdO6fzeHWiTckOZOnbHaih5tveyJbXGIwJwgJPAMSbobcxvzw" alt=""><figcaption></figcaption></figure>

* Style the Div as required (for instance, in Layout tab, set Flex, Row, Flex-end).

<figure><img src="https://lh4.googleusercontent.com/fFHoPCq2wh5daFUOwSOjCLVm2NIcpOVfRplUZbQ8Q2p6AD7RPyPM1xldxjeO1U0oKRalRgQhPwNF_lEeTzJ_DgM1YYyEOw-lngT9lmXgV9mfSleZIAeHNjPgWbGbY_cMm0XcxNh9UEA7BzC3lm_BAY2c1iI5EHkhRnppDcUdgHuyaa1syHZGMdxfTcrxsA" alt=""><figcaption></figcaption></figure>

* 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.

<figure><img src="https://lh6.googleusercontent.com/28HFWFbySKvZIxOhtsK7orrUMGulzjH9tC6jI9HThOByEzTXAjSs1LWGa3g9zg7lydueGOJUM3Vh5eZqcOcREeZjdNWPEzkfk00EDb5KHZK6EsLVi070jDJPvz5b-gNhVBq1HW3fNJJE4HKB8GSpLINuBLayO1t3psmHf7uhB6Kp-_QQYS6-6luU5sX-hA" alt=""><figcaption></figcaption></figure>

* Select the Div you added to the Cart Context Div.
* Add a Paragraph.

<figure><img src="https://lh6.googleusercontent.com/bdtx3sOIn6fISSjTQTftoqbKxQEOrdVm2TiUskfigQPinRD0MrPLTVYVz5MR4akc5DnRgVLdjfZTK1huSNYiXsph4Cv7a-V6tvjKWP_6gja70gDKlOSZtOWmX8PY3R7U_9vmgU0HnYcQKxhT3uo_shsWdu6KHGg4wWE_lbKCwxOzUOO22f1j6H23PaiQzg" alt=""><figcaption></figcaption></figure>

* Style as required (For instance you can customise Font type, size and weight).&#x20;
* For a "Remove" link, write in "Remove".

<figure><img src="https://lh3.googleusercontent.com/z_Q2ZgR5DO6ylepu7HdQAFR7batj23IQpKbN0crdbwUzmV9O8zsBg9zuk-v_njJuRJVtrhn451z_waRTVeENPszT_jBiYiq6gxF562nR0mIlKfUUc6M3ylINVHqNAV9sLOVJ_Cdo9SRytbYzsd_bkJrOExos6B8679ty00878fAMGqRQr-y6yZBZlWTREw" alt=""><figcaption></figcaption></figure>

* Change the Text colour or not as required.

<figure><img src="https://lh5.googleusercontent.com/yBUEvYrfGtSMaSHBf4DAIv5pw8zNSm8ifdQ-mi2hP2YFPPyS7r_NR3swvgecbrWFGTn3OHviuHRc7dvbt-IC5lLPIgZ-nyUp25OtHq1Ru6PLT6J6P-0YBPDJ5IbXGe5xPe5m6IJ43qpAhu0ktyRo5JczIZfOQidqqQ4kEKxZR2WzysItZc0vqgqnDAI4mw" alt=""><figcaption></figcaption></figure>

Now we need to add a Link to "Remove".

* With the Remove Paragraph selected, click "Link".

<figure><img src="https://lh6.googleusercontent.com/o4cSdmqMgOCDrlzeUHfGkoONugVVllcALlsTcdv0AZl2IArV-j2ieQ4GEazjecXcNXWqE8zBW3NDge-vvV__eFKeKwU1Ha7Ob2mJkkc_1YYrEa41WjRLLpahZnDGdcTmW56XVhOqYz_Q43oKUl5ocmk7lEunIECTRmW7pJxZJjLgFtGPBC1iC809DaF7Cg" alt=""><figcaption></figcaption></figure>

* In the link panel, set Type to Action.

<figure><img src="https://lh5.googleusercontent.com/nGwvYdb57kssGyhonM_Dz0RTLIgWOLppoGfuU6nFM6aLZLX949uKOA-IMaYcYrjpB74pbJQ3L2AoJAtHCvDOy4qmN-5I0rw6NLUk9FixjOxxTYEiToZ5qYft6CkB-fpuj2Ajry5fes0oxkVqRvCRgFDPPqFIpiGLxjueG906MBwPUr0bvscA5Zx6u8AOhg" alt=""><figcaption></figcaption></figure>

* Set Action to Cart Remove Item.

![](https://lh4.googleusercontent.com/bl79C2VRQ4xLU-Je2jPB0TPUE9CKcNXNUmzvVg0BUJ2h1KdVuQK_-un4AokBoARLY6sdr4phPd6U1N7ULHv8unVGhHEwRhcQYsYo8z-AVTStgKCY7jusq9vNjWPkgm49_QLR_JB02E5BCw8cwtfFiBgMWLuUdFzUc698eedx5eX35Dr-B7Qmlx86x9cNIA)

* Click "X" to Close dialog.

![](https://lh3.googleusercontent.com/vN9qBeXheHSD-kVV2BvGDwyb8FPDtxybA1AA9oLxj7LS0ZFP9Y4VFkl6EAIhb1c8ER3BTfvjF5kHlkBpWGt5TAIv5QLR0vZNtCp4jSjvZn5_i5G7xQByKvD4UUfcJ2yv-R7VblwKOUzhQp84JSE-7TXViObIXHuJN1eakemrRcT-7DiTSeM6xxo5aMdjIg)

### Cart Total

* Select the Section Div.

<figure><img src="https://lh4.googleusercontent.com/Yt-S85wv_PdJwJ3AwLNJAPq353S2pGyvCdCEADU8pGkgFB6Hn67FxfeZb-edIIli--WSKHdxl-4ZYlD90nS5LSnEvXEpk8XcgJ8IJmwVsX-gJHXNhopdugKBqB_8UIt5NdfayOkgG0D4UwDr5LjlByA23I6YaaMkaxt2hjY3pSe7ygu0XImTsCZ8hzIHGw" alt=""><figcaption></figcaption></figure>

* Add a Div.

<figure><img src="https://lh5.googleusercontent.com/g7K9C--bLjZk2am1kfOxsB66EoKM0jj5boZ2a9edTCTAOzDDfGq6-PZwl0jb2l83TvuNfNyXkCc114gsoz09q1zX3jhmsJpojXRw1-eUM02sfAP548DXpm2YU3xJsVbozZWdiDZm2S49dxyWqYlik9iKDUVqazJiJ6vK3dl-iRNJG5RUA4uh8mJM3vJ65w" alt=""><figcaption></figcaption></figure>

* In the Primary tab, Margin and Padding tab, add 12px left and 12px right padding.

<figure><img src="https://lh5.googleusercontent.com/T2bcdr_7WRrIR-6gfLrBEP-D16oo5qAyTD5NiX2EuUolmRIxq5Zw4o8a-MZ6vVOtVj1lfzJBRKqiZSN_BqcU80hMxX8wikhapLz4Em6V1vqH_UR3nu3BFdt8GazYRJy0vs1SJNA34ZngrY8MgvdyULoUx6rX6b70VZkiA5XrWrvTKQ2lOrT6Jp9BtjDEIw" alt=""><figcaption></figcaption></figure>

### Subtotal

* Select the most recent Div and add a Div.

<figure><img src="https://lh6.googleusercontent.com/tKX5CZttBsHDE6pHw6PwTSwhMNvOcscVhqMJ1h_Cg-Je37ks22DE7Cz1dYJdRK2bjxCruTirA7YOEqB0n08ryP7N7PQ28NSCK03f-VS2CYThM56BlcNHVEG22QCKXf8FJY3S-yy1ujukHYmLBUhtSPrfUbuzuSk0v8nH14aUl3DmFyBZmdz-sCiUlqqjgw" alt=""><figcaption></figcaption></figure>

* Style the new Div as required (For example, Primary tab, Layout tab, Flex, Row, Centre, Space-between).

<figure><img src="https://lh5.googleusercontent.com/Om_vbByjWMxaE88Dlnug7TuYsWSs6kI0UDYFP0mY8Tn4tqPMd1kHr_hPYymz9zDjy5ANOBmj8reJfRjZ3oL3MHlZfkh1eU0-RiqFS6lWwrIYFVoCBEi5fX-VKl73_c3zEUQ2FKa60_m9yno67LVb3c13dg7WE6IpFj-ef7rlgrMBanTrgBmQdtRYsbfUNA" alt=""><figcaption></figcaption></figure>

* With the Div selected, add a Paragraph.

<figure><img src="https://lh3.googleusercontent.com/8wVvEkOM7O750poE7-qjT38YOLQqC2ywMhwRGNEo-oDtsQdCX5Wbl1axvFiuSaJgCLFLA2_DIX_E3op05rbUkunAekC_ViLHkmo1-01Es9MjikOL3e1dwJ5yJGM56lwNUROpN2xzRDWxjxHQpR-trzqoYL_Hkv-eo-UGXMP3VqaMyHfg7Lgd3fh4MSvMAA" alt=""><figcaption></figcaption></figure>

* Style as required. Write in "Subtotal".

<figure><img src="https://lh6.googleusercontent.com/PSi2SV4sWXWy-Nr7q6OXlzqltfTD2trGwq3AUEXaNFzG6D1O9-_V3WUtsOQS5BhpJTpI596UtGxml2pqCkhyR43AnXsXmQNiDS9mw2HFcs-XBzoBdtncxDsKjBWY90LCqRX6BSpY0fzq5UED6lNJAMGyeT54q9MU8UDeVq2p81VCLAN2BpEnPtxCA2DC9Q" alt=""><figcaption></figcaption></figure>

* Select the most recent Div.

<figure><img src="https://lh4.googleusercontent.com/vQv5OjErjLdNEzAyEI41gpC4nfvKzl11xIS8FCfOXbdB-K_8hhr3P08FSCJFZcBand7CSzPhirshdBEEvfWPja0DIvelGrAu2tDCRgxjDIONc2sp9so15ALpV6Zp-z7Z2EJV-iw3tzs6hQ9TXmncE2kDz6jnaLZ2_zpH09FIk1zY2PJ-0cTFLdqgDhBBdg" alt=""><figcaption></figcaption></figure>

* Add a Paragraph.

<figure><img src="https://lh4.googleusercontent.com/-PQHunACaU1flulvYy60qFeq9a6K4cVl_5LkbpSk68Z7FBnmtaYACiMuSD5nHfwPL2mb7esCineJPCinScG51JIlfFvrsE8FgxHK9laS3USIXn7FkET-zH2K80ff7NHSk_YtDv82LJQDCI51YDLMSf_BdY_gT0yDiEbvlvYeMIDqR1UGwNz_owNHM9CmNw" alt=""><figcaption></figcaption></figure>

* With Div selected, click Dynamic Values to open the Dynamic Content panel.
* Set Source to WooCommerce.

<figure><img src="https://lh3.googleusercontent.com/C82crEPn7i48LNwRVX8CTP3KsVeL5ckgZv_qHaFh3os2yrz8mqvFkBDX4xD6NpZ58kHE2V4Omy3wDj8wNw-pv32A5ie58yKKgz-XjThpzgPw9wdUSTHDY--nSz_8tWO2oHNlUUvB_Q6yjhcMw3Jb-GBDM7LFYSZiDo8FUf_xFg5Kyrrnyu09waiCQ3MdZg" alt=""><figcaption></figcaption></figure>

* Set WooCommerce to Cart subtotal.

<figure><img src="https://lh6.googleusercontent.com/t_UHXnVEGB33b__L1Cn5CFht-2Ka773RDke819bBnmViPmcYIui5461gbtrANUzGgqcAStHOxVn_hyJTxYJ8Ow5Jnhjo_Sl9H0KvjQP7-yv8PPd9ZNmxS2u-DCFsaFoEOW-t_HKXYGEFdPweaFOBdTO6jTgaRM0VoZ9l3hvrw9GWmmizv_fhZfylwJCgKw" alt=""><figcaption></figcaption></figure>

* Set Type to Formatted Tax Currency.

<figure><img src="https://lh3.googleusercontent.com/my0KmtFenOvHv3AEu6SjczyMbCJcIAHrlnc0v9iSp_Su5dbaNF9iePFA7qZb2hCiI9oVE21PTJDkTI7ji2Bg8WiB3Ia1j0VpJusg-NTNoZPG8mRcC5IYcX-pL0iVtgTL8fKR787yvouvIodx9IDJLKyhrdUmEjzkC0oG4scosemIJHTR9QTY91ei3yEG6A" alt=""><figcaption></figcaption></figure>

* With the Cart Subtotal Paragraph selected, style as required.

<figure><img src="https://lh3.googleusercontent.com/IzfrJblsLpO1yl2aUN39xcCc_vxpcD9X4nc8i3qA4pur0fKQ3U55UxEBFNqc20f1sBgzgUID2OT2SbVgQpUHNXHNYAdtaNA8pD_RCb7P9N861AhASmFNiUpQcvcBEckK3F-6LCRWgyOkIYuZTp-MKsLBTGmlfRNloOuRcvDvnOxa8ciMFirO-VvdAwWtwg" alt=""><figcaption></figcaption></figure>

* Select the Div that contains the Subtotal Div.

<figure><img src="https://lh5.googleusercontent.com/4-CeoQXIQlyyZ-C6ItBrxSM_yzfQgJC5F91H2mZL4PER-o0JEEQjgm2dFBUmzcMixYCcCqNQwnPRW4gTVYuMSGZD6oVS3TXdbOLO1R5fxzKOtB63XiK79oAfcd0lQUGy7bDXmT17qpR3qgMfo4ChKUvIUEyttj8IakeJ6oYFVKognIAhWN-PDXvuJlhhhw" alt=""><figcaption></figcaption></figure>

* Add a Div.

<figure><img src="https://lh5.googleusercontent.com/SriEGGlWolKSMNWCAwWH6Pw9Ko5WoiZoCwjjfFiZ_gqBuQeB-EaqBSTAxpBqgWNTZQUrEZkyr22jYCJw9717smUV-TWohEOi5xHQsb75DErnVz78cL1rIad3396labmQAqBr6RxA0hiqfiy58c6Yex0Acohz-nYiUTPmtVwAiwjyIKMHRZSeLmu2njlRpQ" alt=""><figcaption></figcaption></figure>

* Style as required.
* Style layout.

<figure><img src="https://lh3.googleusercontent.com/TugF1pBDVER4HIYm5TKXRrv5R1fMAeGZMR7abWnU1XGTfELc-hpo4ucmpWEdnzkwIByr1A0EaVLdP-NBLkVLi-zjjW2EsGDXZ09Y77Xx0ZWG_3zttx7dJu_XORTATV8DBwmoLLI2SNaV6TTPfeY6E8JhbdUuqNlo50uz-PeERHbULRJvzGk5t-ydyRlWDg" alt=""><figcaption></figcaption></figure>

* Sizing.

<figure><img src="https://lh5.googleusercontent.com/1Xmcavf9AWm1tsA166fgYI2NOEax4XF5lsFU7YVy3JGhT0TFL6eDydk6ZKdJAtHqUP1v903Dy_snUQKJoZfHYO8YLV6BkSfSmG48Y2HMBb3vD7c3OVK4S1hEdZtk9uazql-hva52mz1YUX6NCqssPwYDE-OwoMbSvEE6mKSoBxP-AWS5fcLQtTkJBzDANg" alt=""><figcaption></figcaption></figure>

* Add a bottom Margin.

<figure><img src="https://lh3.googleusercontent.com/qZwMK1AIkVd655H4NcmKEEB2_47QIyrTB8KCb4okyFAwcrBjdtJAmMCvrf2gCyotvL_zj0ktp09ZmccNfJhVE6wCyyhjOBIGtD8ICKhbJRAoT712mUtdKptm6iyhXcEX--YtK_XAMZ6RNW-4UAVPDlHxivwmLNqi7YYuTDj40YWwMEg6LdiJ_MyCRoHnxA" alt=""><figcaption></figcaption></figure>

### Shipping

* With Div selected, add a Paragraph.

<figure><img src="https://lh5.googleusercontent.com/zrxP3YD3degXvV8daiaxyebK3sJJsq3omdvelUzJcOXGvfe_d43XrEeaT9Tq-9_ojhGmRfF7YxtP6KPQdQDwF2CpyXiS6nvNSM0wIFvWHMoN7OvIsNDomJ5lnwJbECOyKmE4wffEJtPV3MFCgy40KwTe1ct-FCOhIMA0VmATVL-j7MpZc_XitXr5eex6rw" alt=""><figcaption></figcaption></figure>

* Style as required. Write in "Shipping".

<figure><img src="https://lh4.googleusercontent.com/OhxROcdqDHIIljU6n559IsQlAe5pu2Lcv--qFkPiyQWRCczoktRMPPjldCvsNwAHJp0lyy_AitJ7vXYGu0MHpDKfo2yK-DEKD0eO-T0qELE-ZMXt_VM6zptzJ2d05Z41EHgcGpeakd4yJse36ImKtn1O7C3Y0PmJL1Y9MMd1MRvd85NwbNFX059OWGELHg" alt=""><figcaption></figcaption></figure>

* Select Shipping Div.

<figure><img src="https://lh6.googleusercontent.com/um2bMD_LYHjiVulcweAeyWxXuaoRWcX0Sce0MT4OwOvMcUqMGumXouB8l6vi5-vtorC75g1Ajo_2EygkK7XSRbliqZ-Xcjs6pi_j4p21dou36L8WXlqRWls4NabAVUqO9Fr73QO5oFQPjK2i-ejfim_29hjmZEmUBs34FFdUYrNFYLMYZxCLj-YzHbFUcQ" alt=""><figcaption></figcaption></figure>

### Cart Shipping Total

* Add a Paragraph.

<figure><img src="https://lh5.googleusercontent.com/0LPszIzFw5EeYr5IM3JcHhyfBf1X2z4oCIosGoIgD-tFXm3TRFL30VCWnnf39QbZ9tgWXUdMoedRoL2bYeN-61X2c1dHBk2MqWjN-A089X4DzMyGgFXBVDU98UnhtyJ47zYfU-j_ix-6EaQvCnnW3eb5H7ivH58lIWGxIv5XGRq160DQlxs5iRP6XJgGqg" alt=""><figcaption></figcaption></figure>

* Click to open Dynamic Values.
* In the Dynamic Content panel, select WooCommerce.

<figure><img src="https://lh3.googleusercontent.com/gy9KNDQ8gewOJOlBkcql4KIVuFFpubR7Jrth1q2vbkXBw6j9OCmyJS4IKcsA4_kLVIuMRim-UsOjbHbDbIbK1bXEdlihrS_84KQXd3ArROlSHSwprPWbQvxeGzJ2X5147PtcNYn7a378tw3xVa78rIvv4fMHzgtOarZUxtI_OyWjGLlyA0rUHzrnUVmZKw" alt=""><figcaption></figcaption></figure>

* Set WooCommerce to Cart Shipping Total.

<figure><img src="https://lh3.googleusercontent.com/nONuH5hcVl3aneQw9YOEBXGtB2GKLoEmDQZxbQMryYuZqGcargnNSpC0HBdUA9AOA0XiIfTHNvQvvDDkIynYYkorgp4GMDwWJl2tCma7XNuhHs_oq6_fLxM_ql6D5-olBtGZ4Y0_MeBoHBgGZ_gStcTV_6jo7pMi_dEg02MYrkP5CwpYpQvVIyEtwxZ6Lw" alt=""><figcaption></figcaption></figure>

* Set Type to Formatted Tax Currency.

<figure><img src="https://lh6.googleusercontent.com/rGFEbhuLzr63EjigHV4tJ_10ujaDMJx0Yl3eUyO8Ic6uLT7yXZWaR_Dur7qWrdFYTAGHSy59xYC6LOHnANVqqkW6a7vRjyHqtynOzXDVSWevsFIuohLB0YoT8IvakssYJMDC0l0Q9Ss8YvYauuUulB5UJQiCLDIZne_tqJMiD643v4pHKNrtfWfdVrj9rQ" alt=""><figcaption></figcaption></figure>

* Style as required.

<figure><img src="https://lh3.googleusercontent.com/ZhfxjthcRMP2sp2lMLo87fM7gpsa3yAhQty046KangBPyz0MOzFQqAqB_A8ltyFlmNELO9_NCr4MkaHT_97fSbfFLgVRbFOZVXK3Ow1j66Z-VWHlewADvO8ObesyX_rWZlBNEn9vpgcaYw2BQMSjKSAZQnh7PWMw9d9wv-mbE0F8rEDyIYBd_NVFjG7MCA" alt=""><figcaption></figcaption></figure>

* Select the Section Div.

<figure><img src="https://lh6.googleusercontent.com/TnYWCMryZO6_O3QMhMg8p8wwTen9sgXU_ngtDY5CtpKxtLCuOI17phzieOQRwSuKrb3ukU_oXZWOVE8vVKfTzMN8_YpJc_cYGIwrRAuSz9zzSmGjEr6e98UG8lnyl1_wZe9zRVKD6Id7XbTCv7zk17GRrlmusyU3qSAkXAthyWXeB0hpNd3TAC9IiC4wYQ" alt=""><figcaption></figcaption></figure>

### Link to Cart and Checkout

Cart and Checkout buttons can be linked to their respective pages.

* Add a Div.

<figure><img src="https://lh5.googleusercontent.com/xCjlFzldTsD-pcMZ1x7uxqEsi1Dh_RTaZpXKs7a1euPHZP-_p1RoJ92kFhd-WPdlbSdNmcIeqjzIiLU8NTN60021AGNyM4XYxkyoEN87vV36WvE_3rxVbLMMgl6NZZm57uGx4hJJASk5v87bAT0XGhN3bO5cyrASTiVfMzqa4wXrCR1JO8tKtI8tHsQnmw" alt=""><figcaption></figcaption></figure>

* Add a See Cart button and a Checkout button inside the Div.
* Style as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FDWG4Tp4rhLEDwUJZBGqK%2FCart%20and%20Checkout%20Buttons.png?alt=media&#x26;token=b9759756-b2aa-488d-98dc-db5ada41d7cb" alt=""><figcaption></figcaption></figure>

* Rename the first button "See Cart".&#x20;

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fsgt7qP9HiMIUPJ7IJJSr%2FRename%20see%20cart.png?alt=media&#x26;token=71630934-b533-432a-869e-6e54f1b58688" alt=""><figcaption></figcaption></figure>

* Rename the second button "Checkout".&#x20;

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FvHfpVcXeUo7WYYVGfjhW%2FRename%20checkout.png?alt=media&#x26;token=edc98d79-3544-4e9e-96ba-18646b52fd54" alt=""><figcaption></figcaption></figure>

* With the See Cart Button selected, open the Link modal.
* Set Type to URL.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FdWv5Ag0boPEgCedtA3EP%2FOpen%20link%20for%20see%20cart%20button.png?alt=media&#x26;token=5ed7702f-0a73-4bba-8c2f-131a6fcce33f" alt=""><figcaption></figcaption></figure>

* Set Source to Dynamic.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FOyxsBoWH5SJmjrCw7rGi%2FChoose%20dynamic%20source.png?alt=media&#x26;token=4b52816d-79fd-46c3-849a-78fa1681ec52" alt=""><figcaption></figcaption></figure>

* Set Data to Cart.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FJSQ01YypX9ilKaZfNH75%2FSelect%20cart%20data.png?alt=media&#x26;token=851850a3-fe20-424a-a27a-bdebd167e5fb" alt=""><figcaption></figcaption></figure>

* With the Checkout Button selected, open the Link modal.
* Set Type to URL.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fb92efWhkjK7LjXX0K1Z2%2FSelect%20checkout%20button%20and%20open%20link.png?alt=media&#x26;token=0c953a57-d0dd-4eab-a25f-2391a82508f1" alt=""><figcaption></figcaption></figure>

* Set Source to Dynamic.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FLJ8o8VyhseEUK9JVvLf2%2Fselect%20dynamic%20source.png?alt=media&#x26;token=4593e5a4-374c-488d-9e97-a1fa1f6632cf" alt=""><figcaption></figcaption></figure>

* Set Data to Checkout.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F5XipJOdsP1G3sk6tdgqk%2FSelect%20checkout%20as%20data.png?alt=media&#x26;token=f9fb65b1-fab1-4387-9d54-c8111c7a637a" alt=""><figcaption></figcaption></figure>