Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

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.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.