Home > WooCommerce > Docs > How to Show the WooCommerce Cart Icon in Header?

How to Show the WooCommerce Cart Icon in Header?

Last updated: March 01, 2024
This article has been written and researched by our expert Avada through a precise methodology. Learn more about our methodology

Sam

Author

Daniel

Researcher

Have you ever seen a tiny cart icon in the header of a WooCommerce store? If you have a WooCommerce website, you can definitely do the same thing to enjoy its benefits.

In today’s article, we’ll show you how to show the WooCommerce cart icon in header.

Let’s get started!

Why Show the WooCommerce Cart Icon?

  • Adding a WooCommerce cart icon to your website’s header will provide customers with a more customized shopping experience.
  • Displaying a WooCommerce cart icon would make navigating easier for consumers and give your website a more appealing look.

How to Show the WooCommerce Cart Icon in Header?

In this part, we’ll show you two different ways to show the WooCommerce cart icon in the header: using WooCommerce settings and a plugin.

Method 1. Using WordPress Settings

Here we’ll be talking about displaying the WooCommerce cart icon in the header of two major WordPress themes, Nimva and Astra.

1. In the Nimva theme

After the WooCommerce plugin has been installed and active, the shopping cart icon will display in the header menu by default.

shopping cart icon

If the shopping cart icon does not display next to the Navigation Menu in the Header section for whatever reason, you can still enable it via WordPress settings. To do that, navigate to Theme Options > Menu Options > WooCommerce Shopping Cart Icon and set the option to On.

shopping cart icon

Simply change the option to Off if you want to disable the shopping cart icon from the header.

Furthermore, you can also show the shopping cart icon individually, on particular posts or products.

To accomplish this, use the backend editor of WordPress to modify the exact page where you want the cart icon to appear, then scroll down below the content area until you find the Advanced Customization box. After that, go to Header Settings > Show Shopping Cart Icon in Header and select the option Yes.

shopping cart icon

2. In the Astra theme

If you use the old Astra header, you can add a WooCommerce cart icon to the primary header by doing some basic settings.

First and foremost, ensure that the WooCommerce plugin is activated. Then from the WordPress dashboard, go to Appearance > Customize > Header > Primary Menu > Last Item in Menu and choose WooCommerce.

After that, you’ll see a WooCommerce cart icon displayed at the bottom of the primary menu.

WooCommerce cart icon

With Astra Pro , you can also add the WooCommerce cart icon to the Above/Below Header.

With the Astra Pro Addon plugin, you can access many premium features. But you must have the Astra theme and the Astra Pro Addon installed on your website to utilize these Pro features.

You can add a cart icon to the Above Header and Below Header in Astra Pro by following the instructions below.

To begin, make sure that the Header Sections addon is enabled. Then from the WordPress dashboard, go to Appearance > Customize > Header > Above Header > Section (1/2) and choose WooCommerce.

Astra theme

Method 2. Using a plugin

Here we’ll use the free plugin WooCommerce Menu Cart .

This plugin will automatically add a shopping cart button to your website’s menu navigation bar. The plugin is lightweight, as well as simple to install and set up.

Now let’s display the WooCommerce cart icon!

Step 1: Install and activate the plugin

First of all, please install and activate the WooCommerce Menu Cart plugin by going to this link https://wordpress.org/plugins/woocommerce-menu-bar-cart/.

This can also be done directly from the WordPress admin dashboard. To begin, go to the plugins page and type WooCommerce menu cart into the search box.

Step 1: Install and activate the plugin

After you’ve installed and activated the plugin, you’ll need to go to the main settings page to customize the settings. To do so, click WooCommerce > Menu Cart Setup.

Step 1: Install and activate the plugin

This will take you to the WooCommerce cart icon plugin’s main settings page, where you can customize it to meet your requirements.

Step 2: Configure WooCommerce cart icon

Now that you’re on the main settings page, you’ll see all of the configuration options.

The first four settings let you customize the icon’s display functionality. This contains details such as the e-commerce plugin you’re using (in this context, WooCommerce), the menu where you want the icon to appear, and whether or not it seems while the menu is empty. You can also choose to disable or enable the icon completely.

Step 2: Configure WooCommerce cart icon

Now scroll down to customize a broader range of settings. You can choose from a variety of fly-out display modes and the number of products to display. You can also select your cart icon from this menu.

Step 2: Configure WooCommerce cart icon

It’s worth mentioning that the free version of the plugin, which we’re using, only allows you to show the default icon. You have to upgrade to the pro version if you want additional icon options.

You can also choose whether to show pricing, cart items, or both. Finally, decide where you’d like the cart to appear. You can choose to have it float right, left, or use the default menu alignment.

Scroll down more to the WooCommerce menu cart plugin’s last few configuration options. You have the option of displaying pricing in the menu cart in a variety of ways. You can show the whole number of products or only the pricing with discounts.

You may also provide any custom CSS classes that you like. Do this only suppose you are sure of what you’re doing. Finally, you have the option of whether or not to use custom AJAX.

Step 2: Configure WooCommerce cart icon

Step 3: Save changes

Don’t forget to choose the Save Changes to apply all of your configuration changes.

Now the WooCommerce cart icon will appear on the front end of your WordPress website based on the previous settings you’ve configured.

Final Words

Displaying the WooCommerce cart icon in the header can provide your customers with a more personalized purchasing experience and bring about so many more benefits.

We hope that our article about how to show WooCommerce cart icon in header has been of great help to you.

Thank you for reading, and we’ll see you in the next post.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.