No results found. Try again with different words?

Search must be at least 3 characters.

Improvement: WooCommerce – Modify the Cart label design

We made a significant improvement to the WooCommerce cart design. We believe that this will change the way we see the Cart icon and also the subsequent drawer when the visitors click on the cart. Cart label is one of the major improvements that we have chosen to implement in the new version of the Astra theme. Here are a few changes that we have made.

Cart Label

You can now design the cart level by using 4 different shortcodes that are available directly inside the header builder. To access these options, please navigate to the Appearance>Customize>Header Builder>Cart. Under the general tab, you will see the options called “Cart Label”. There are 4 different options that are available inside the cart label that will be visible once you click on the “+” icon next to the cart label.

Currency name: This will add the name of the currency that is set in the WooCommerce settings by adding the shortcode {cart_currency_name} to the cart.

Currency Name

Total Amount: by selecting this option you can show the total amount of the products that the user has added to the cart. This will add the shortcode {cart_total} to the cart.

Total Amount

Currency Symbol: This will add the shortcode {cart_currency_symbol} and display the currency symbol of the currency that is selected in the WooCommerce settings.

Total + Currency Symbol: This will add the shortcode {cart_total_currency_symbol} and will display the currency symbol and the total amount of the product that the user has added to the cart.

The best part is that you can use these shortcode as a single or combination of each other. For example, in the image below, we have added all of the shortcodes together.

Combination

Display Cart Count

This toggle button displays the number of items added in the cart. If you would like to turn this feature off, simply click on the toggle button to turn it off.

Cart Count On

Off-canvas Cart Flyout

This option enables you to customize the flyout when a user clicks on the cart after selecting the product. This new and amazing feature provide you with more control over the flyout design such as:

  • Controlling the width of the cart flyout: You can select the width of the cart flyout by simply dragging the Flyout Width option. You can also set a custom pixel to your flyout width by typing the number of pixels into the adjacent box.
  • Changing the position of the cart flyout: This feature enables you to change the position of the cart flyout to either left or right side of the screen.
Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form