How to Use WooCommerce Add To Cart Widget

How to Use WooCommerce Add To Cart Widget

The most important element of any online store is an Add to Cart Button 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

To insert widget into the section is a really fun. Simply, drag and drop your 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.

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 cart. See the images above.

N.B: If you hit the Add to Cart button, you’ll find View cart option to whole products cart. Before using the widget, don’t forget to add products. 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 Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design. 

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.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.