Add to Cart Button module for WooCommerce Singular theme layouts (Themer)

The Add to Cart Button module is in the WooCommerce modules category, which appears only when you're editing a Singular-type theme layout in Theme Builder and you've assigned a single product page as the location.

Besides the Add to Cart button, this module also displays the following controls when they apply (the same as default WooCommerce behavior).

  • Variation labels and options (if the product has them)
  • A Quantity selection list
  • The Add to Cart button

The following screenshot shows an option label and selection list for a Mug color variation, a Quantity selection list, and the Add to Cart button.

Module settings

This module has a  Style tab and an Advanced tab.

The Style settings for this module are button background and text color. Whether the button is the default or a custom background and text color, the color is applied as follows to the three button states:

  • Disabled (the state that applies if there are variations and an option hasn't been selected yet)
    A lighter version of the background and text color.
  • Enabled (ready to be clicked)
    The default or custom background and text color.
  • Hover (cursor moves over the button)
    A darker version of the background and text color.

On the Advanced tab, you can customize margins, responsive layout, visibility, animation, and assign an ID or class name.

Note: The Advanced settings apply to the entire module block. Using the screenshot above as an example if you set a Slide left animation, the variation (mug color), quantity, and Add to Cart button will all slide left as a block.