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.


add To Cart 2 - BdThemes


add To Cart 3 - BdThemes

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.

add To Cart 4 - BdThemes

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.


add To Cart 5 - BdThemes

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.


add To Cart 6 - BdThemes

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.


add To Cart style 1 - BdThemes


add To Cart style 2 - BdThemes

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.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design. 

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.