Add to cart
Shoppers can choose options and add to cart from the modal, without leaving the page.
- Variable product with options chosen
- "“Linen Shirt” has been added to your cart." with a View cart link
Add to cart form
Shows WooCommerce's own form: quantity, variation options and stock.
When hidden, one item is added at a time (the product's minimum quantity, usually 1).
The other settings on this tab show only while Show add to cart is on.
- Add to Cart Form, After Adding and Button Appearance cards
Product types
| Type | In the modal |
|---|---|
| Simple | Added without leaving the page |
| Variable | Choose options (the image, price and stock update), then added without leaving the page |
| Grouped | WooCommerce's normal behavior: the page reloads with the products added |
| External / affiliate | The button goes to the external link |
| Other types | WooCommerce's normal form submit (developers can add types with siteryn_qv_ajax_product_types) |
After adding
Or Close the modal, Go to the cart page, or Go to the checkout page. WooCommerce's own "redirect to the cart" option doesn't apply to the modal.
Shown only with Keep the modal open and show a confirmation.
Your mini cart, side cart and cart count update straight away, as with WooCommerce's own AJAX add to cart. While adding, the button shows "Adding…".
Messages
- "“Product” has been added to your cart."
- "Please choose product options before adding this product to your cart."
- "Please enter a quantity of 1 or more."
- "This product cannot be added to the cart from here."
- WooCommerce's own errors, such as out of stock, appear in the modal.
- "Sorry, this product could not be added to your cart. Please try again."
Button appearance
Style: Theme button (default) keeps your theme's add to cart button; Custom uses the colors below.
| Setting (Custom) | Default |
|---|---|
| Background · Text | #111827 · #ffffff |
| Hover background · Hover text | #2563eb · #ffffff |
| Corner radius (px) | 6 (0–50) |