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.
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.