Custom Add To Cart (Pro)

Add an Add to Cart button to a specific product anywhere on your site by dragging the Custom Add to Cart widget wherever you need it.



  1. Product: Select the product to be added to the cart
  2. Show Quantity: Set to Yes to allow the user to change the quantity
  3. Quantity: If Show Quantity is set to No, this option becomes available so that you can predetermine the number of items to add to the cart


  1. Type: Select the type of button to use, choosing from Default, Info, Success, Warning, and Danger
  2. Text: Enter the text to be displayed on the button
  3. Alignment: Align the [widget] to the left, right, center, or justified
  4. Size: Select the preset button sizes, from Extra Small to Extra Large
  5. Icon: Select a Font Awesome icon to display on the button
  6. Icon Position: Choose to display the Icon Before or After the button text
  7. Icon Spacing: Set the amount of space between the Icon and the button text
  8. Button ID: (Optional) Assign a unique button ID to use for situations such as Google Analytic’s events



  1. Typography: Set the typography options for the button text

Normal | Hover

The following options can be set independently for both the normal and hover states.

  1. Text Color: Choose the color of the button text
  2. Background Color: Choose the background color of the button
  3. Hover Animation: Choose an animation effect when hovering over the icon, such as Grow, Pulse, Skew, etc.

  1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  2. Border Radius: Control border roundness of the button
  3. Box Shadow: Adjust box shadow options
  4. Padding: Set the padding within the button

Note: “Enable AJAX add to basket buttons on archives” must enabled in WooCommerce Settings > Products in order for this to properly function.

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email
Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page

Cyber Monday Sale
Ends Soon!