Table Of Contents

How to Use WooCommerce Add To Cart Widget

The most important element of any online store is a WooCommerce Add to Cart widget and this button allows you to add products to the cart. However, in the doc below, I’m going to tell you about the WC-Add To Cart widget that will allow you to set the layout and style of the button.

So, let’s get it started.

To Insert Widget

inserting WooCommerce Add To Cart widget

To insert a widget into the section is really fun. Simply, drag and drop the shopping cart widget you want to use for your project. As you see in the screenshot above.

Content Tab

Using the Content Tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot in designing the customize cart widget.

Now, I’m going to show the sections of the tab and how they work behind the widget.


Just, go to the Content Tab > Product. Read the lines below.



In general, this section will allow us to set what products to be added to the cart. Along with this, you can show how many products will be added to the shopping cart. See the images above.

N.B: If you hit the Add to Cart button, you’ll find the View cart option to the whole products cart. Before using the widget, don’t forget to add products into the WooCommerce Add To Cart widget. Simply, go to the WordPress Dashboard > WooCommerce > Products. Look at the image above.


Go to the Content tab > Button.

Actually, this section is here for helping you to set the layout of the button. For example, go to the Button section > select button Type (Info, Success, Warning, etc.) with the default one.

In addition, you can add text to the button > set the Alignment > choose Size > select Icon and adjust the Icon Spacing.

The important thing is Button ID, you, using the Id(you’ll find the Id, only follow WooCommerce > Products), you’ll also be able to add products to the card. Please, read the message under the Button ID field. Keep your eyes on the image example above.

Style Tab

Now, let’s work with the Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design the add to cart button. 

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.


The image example above shows what you will mainly be able to do in this section. Normally, you can set Typography and Text Shadow.

In both Normal and Hover mode, you can add Text color, Background color, Border Type and Radius, Box Shadow, and Padding.

Mostly, in regard to the Hover mode, you’ll able to add Animation too. See the image below.



Video Assist

Finally, if you read the whole article with full attention, you’ll get more knowledge about the Add To Cart widget by Element Pack. You are lucky because we have made a video and demo page for your more support.


Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Enjoy Black Friday Exciting Deals Right Now. Check Here
© Copyright 2021 All Rights Reserved by BdThemes

Enjoy Black Friday Exciting Deals Right Now. Grab The Deals Before The Time Ends!