Singular layout: Add to Cart Button module

The Add to Cart Button module is in the WooCommerce modules category, which appears only when you're editing a Singular-type layout in Beaver Themer 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.


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.

Last updated on