How to set up and style the Woo Add to Cart widget in Elementor.
Woo Add to Cart places an add to cart button for one chosen product, or for the product being viewed, anywhere on a page. It can show a quantity box, the price and a stock line, and it adds the product without a page reload. Use it on landing pages, in custom product templates, or as a buy now button that goes straight to the checkout.
Part of: Bright Addons Pro. Before you start: WooCommerce must be installed and active, with at least one published product.
| Option | What it does |
|---|---|
| Product | Choose a Product, or The Product Being Viewed for single product templates. The product list holds the 200 newest products. |
| Or Product / Variation ID | Sells a product or one exact variation by ID. It takes priority over the product list. |
| Option | What it does |
|---|---|
| Button Text | Your own wording. Leave empty to use the WooCommerce wording. |
| Icon | Icon shown on the button. |
| Icon Position | Places the icon Before or After the text. |
| After Adding | Stay on the Page and Show a Message, Go to the Cart or Go to the Checkout (buy now). |
| Message After Adding | Confirmation shown under the button when the visitor stays on the page. |
| View Cart Link Text | Wording of the cart link added to that message. |
| Option | What it does |
|---|---|
| Quantity Box | Shows a quantity field with minus and plus buttons. |
| Price | Shows the product price above the button. |
| Stock Line | Shows a line such as In stock, Only 2 left in stock or Out of stock. |
| Layout | Quantity Next to the Button or Quantity Above the Button. |
| Alignment | Left, Center, Right or Full Width. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
typography, icon size and spacing, colors, background, shadow, border, border radius and padding for normal and hover.
Space Between Quantity and Button, Text Color, Background, border color and width, Border Radius, Number Width and height.
Price Typography, Price Color, Old Price Color and Old Price Size.
stock typography, In Stock Color, Out of Stock Color, and the typography, color and background of the message.
Yes. Set After Adding to Go to the Checkout (buy now). The product is added and the buyer lands on the checkout page.
It can sell one exact variation when you enter its variation ID. With the variable product itself, the button links to the product page so the buyer can pick options.
The number only appears when the product manages stock, stock is low, and WooCommerce is set to show stock amounts. Otherwise the line says In stock.
No product is chosen, or the product is a draft, private or password protected. Those are only shown to users who may edit them.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide