Back to contents

How to add a WooCommerce Shopping Cart to the header

Reading this tutorial will help you to grasp how to add a WooCommerce Shopping Cart to the header with JetBlocks plugin.

JetBlocks plugin allows you to add and customize the important content, such as the Site Logo, Search, etc. A shopping cart is one of the elements you can add.

The Shopping Cart widget is a useful tool for any online store that makes it easy to show the number of the chosen items and the total sum. It can be very convenient for the user to continue viewing the goods on the site and have a constant look at the total price.

In this tutorial, we’ll discuss how to add quickly a WooCommerce Shopping Cart to the header using one of our best plugins – JetBlocks.

Let’s go over the steps to add it!

Adding the widget to the header

First of all, you need to add the widget to the canvas.

Step 1 – Navigate to the Elementor editor and open the needed page. We need to edit the header section, so open any page, as the header usually covers all the pages.

Step 2 – After opening the canvas, click on Edit Header button.

Edit Header button

Step 3 – Upon button activation, you will be redirected to the header section that’s now open for editing with Elementor. Here, you can upload the logo, favicon or add any other changes to make the header look attractive.

Step 4 – Go to the left side panel and find the WooCommerce Shopping Cart widget. Drag and drop it to the most appropriate space in the header section.

WooCommerce Shopping Cart widget

Step 5 – In the Content > Settings tab you are able to add some general features, such as the icon, label, etc. Here you can also show or hide some elements, e.g. Products Count.

Customizing the style of the widget

Once you’ve set the widget to the header, let’s style the widget to match your brand.

Step 1 – Proceed to the Style tab > Cart Link tab where you can set the color and position for the normal cart style. You can choose from a whole range of different options.

Style settings od the WooCommerce Shopping Cart widget

Step 2 – Go to the Style tab > Cart Dropdown tab and set the colors, position and typography for the dropdown view. It will be shown after performing a click on the cart icon or while hovering it.

Step 3 – A little below in the Style tab you will find Cart Items Style tab. Here you have an option to choose the appearance for the items to be shown inside the cart. Set the style of the product icon and title. Change manually the remove button style (make it more bright or alternatively light).

Step 4 – The Cart Button Style allows you to change the settings of the container section buttons. It will be quite useful to change the style of the checkout button as well.

Lastly, once your Shopping Cart is customized and styled, it’s time to update the page!

That’s it!
We’ve covered how to add any changes to the style of the Shopping Cart widget in the header.