---
title: Advanced Add To Cart Overview
description: "The [Advanced DiviMerc Add To Cart module](https://divimerc.com/modules/advanced-add-to-cart/) lets you customize the WooCommerce purchase with quantity selector, cart behavior, stock output, variation price and more. **Important Note:** - Use the module on a WooCommerce product page or Single Product template so…"
url: "https://divimerc.com/docs/advanced-add-to-cart/"
updated: "2026-09-26"
category: Modules
---

# Advanced Add To Cart Overview

The [Advanced DiviMerc Add To Cart module](https://divimerc.com/modules/advanced-add-to-cart/) lets you customize the WooCommerce purchase with quantity selector, cart behavior, stock output, variation price and more.

**Important Note:**

- Use the module on a WooCommerce product page or Single Product template so it can display a stepper with an add to cart button.
- By default, it will show the default variation dropdown. To remove it, go to **Content → Additional Setting** and toggle on to hide native variation dropdown.

Let’s see the settings in brief and how to make better use of them.

## Content Tab

The Content tab lets you choose the product, preview different purchase scenarios, customize the add-to-cart button, control cart behavior and choose which purchase information appears.

### Content

The **Product** option lets you choose which product’s add to cart button will be displayed in the product page.

![](https://divimerc.com/wp-content/uploads/2026/08/advanced-add-to-cart-1.webp)

- **This Product:** Dynamically displays the cart of the current product.
- **Latest Product:** Automatically displays the cart button of the most recently added product.
- **Specific Product:** Lets you select a specific product and display its cart button wherever the module is used.

### Add To Cart Button

- **Button Text**: Enter the text displayed on the purchase button, such as “Add to cart.”
- **Show Icon**: Enable this option to display an icon with the button text. When enabled, additional icon settings appear:
  - **Button Icon**: Choose the icon to display on the button.
  - **Icon Position**: Choose whether the icon appears before or after the button text.
  - **Reveal Icon On Hover**: Show the icon only when shoppers hover over the button. When enabled, the Slide From setting appears.
    - **Slide From**: Choose the direction the icon enters from on hover.
- **Show Price On Button**: Enable this option to display the product price inside the add-to-cart button. When enabled, additional price settings appear:
  - **Price Layout**: Choose how the price and its label are arranged inside the button
    - Inline (separator)
    - Label left, price right
    - Price chip
    - Vertical divider
    - Two lines
    - Price first
  - **Show Sale + Original**: Show both the sale price and original price when a product is on sale.
  - **Variable Products**: Choose how the button price behaves for variable products, such as hiding the price until a variation is selected.

![](https://divimerc.com/wp-content/uploads/2026/08/advanced-add-to-cart-2.webp)

### Cart Behaviour

- **AJAX Add To Cart**: Add the product to the cart without reloading the entire page. When enabled, the Loading State setting appears:

○ **Loading State**: Choose the feedback shown while the product is being added to the cart:

○ Spinner icon

○ Loading text

○ **Loading Text**: Enter the text shown during the AJAX action. This field appears when the Loading text is selected.

- **Already-In-Cart State**: Enable a separate button state after the product has been added to the cart. When enabled, additional settings appear:

○ **In-Cart Text**: Enter the text shown after the product is already in the cart.

○ **Show Tick Mark**: Show or hide a tick mark with the in-cart state.

![](https://divimerc.com/wp-content/uploads/2026/08/advanced-add-to-cart-3.webp)

### Additional Settings

- **Hide Native Variation Dropdown**: Hide WooCommerce’s default variation dropdowns when you do not want them displayed with the module.
- **Show Quantity**: Show or hide the quantity selector. When enabled, the Quantity Label field appears:

○ **Quantity Label**: Enter a custom label for the quantity selector.

- **Show Stock**: Show or hide the product stock information.
- **Show Variations Price**: Show or hide the price for the selected product variation.

**[Note:** When using the **Variation Swatches** module, enable **Hide Native Variation Dropdowns** to avoid showing both the default WooCommerce dropdowns and swatches.

![](https://divimerc.com/wp-content/uploads/2026/08/advanced-add-to-cart-4.webp)

**Background:** Configure the module background with further controls.

**Element Label:** Rename the module for easier identification inside the Divi Builder. This label is visible only in the Builder.

## Design Tab

The Design tab lets you style each part of the Add To Cart interface independently.

![](https://divimerc.com/wp-content/uploads/2026/08/advanced-add-to-cart-5.webp)

**Quantity:** Use text, background, sizing, spacing, border and box shadow controls to customize the quantity area further.

### Stepper Buttons

- **Divider Width**: Control the width of the divider between the quantity value and the stepper buttons.
- **Divider Color**: Set the color of the divider.

![](https://divimerc.com/wp-content/uploads/2026/08/advanced-add-to-cart-6.webp)

There, you will also find options to further customize text and background as needed.

### Add To Cart Button

- **Icon Size:** Control the size of the icon displayed on the add-to-cart button.
- **Icon Color:** Set the color of the button icon.

![](https://divimerc.com/wp-content/uploads/2026/08/advanced-add-to-cart-7.webp)

There, you will also find options to further customize text, background, sizing, spacing, border and box shadow as needed.

### Button Price

- **Regular Price:** Customize the regular price using available controls.
- **Offer Price:** Customize the sale or offer price using available controls.
- **Background (Chip):** Add and customize the background behind the button price.
- **Spacing:** Adjust the spacing around the price area.
- **Border:** Customize the price chip border using Divi’s standard border controls.
- **Separator / Divider Color:** Set the color of the separator shown between the price elements.

![](https://divimerc.com/wp-content/uploads/2026/08/advanced-add-to-cart-8.webp)

### Variations

- **Dropdown Color:** Set the color used for the variation dropdown control.

![](https://divimerc.com/wp-content/uploads/2026/08/advanced-add-to-cart-9.webp)

There, you will also find options to further customize label, text, background, border, spacing, sizing, and clear link as needed.

### Variation Price

- **Regular Price:** Customize the regular variation price.
- **Offer Price:** Customize the offer or sale variation price.

![](https://divimerc.com/wp-content/uploads/2026/08/advanced-add-to-cart-10.webp)

**Grouped Product**: Customize these items for further controls and look as needed.

### Stock

- **In Stock Text:** Customize the typography of the in-stock message.
- **Out Of Stock Text:** Customize the typography of the out-of-stock message.

There you will also find options to customize sizing, spacing, border, box shadow, transform and animation as needed.

**Sizing:** Adjust the module width, height, alignment and aspect ratio using sizing controls.

**Spacing:** Adjust margin and padding to control the space around the module.

**Border:** Customize the module border width, color, style and corner radius.

**Box Shadow:** Add and customize a shadow around the module to create depth.

**Transform:** Adjust the module’s scale, position, rotation or skew using Divi’s transform controls.

**Animation:** Apply Divi’s built-in entrance animations to the module.

## Advanced Tab

The Advanced tab provides the standard Divi settings for custom CSS, visibility conditions, transitions, attributes, positioning and other advanced controls.

## Need Help?

If you have any questions or experience issues while using the Add To Cart module, please contact our support team at: support@wprio.com