WooCommerce Single: Add To Cart

Insert an “Add To Cart” button and control the layout and style of the Add to Cart button in the WooCommerce Single template

Style

Button

1. Alignment: Align the title to the left, right, center, or justified
2. Typography: Change the typography options for the Add To Cart button
3. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
4. Border Radius: Set the border radius to control corner roundness
5. Padding: Change the padding settings of the button

Normal | Hover

The following options can be set independently for both the normal and hover states.

1. Text Color: Choose the color of the button’s text
2. Background Color: Choose the background color of the button
3. Border Color: Choose the border color of the button

Quantity

1. Spacing: Adjust the amount of space between the Quantity field and the Button
2. Typography: Change the typography options for the Quantity text
3. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
4. Border Radius: Set the border radius to control corner roundness
5. Padding: Change the padding settings of the Quantity field

Normal | Focus

The following options can be set independently for both the normal and focus states.

1. Text Color: Choose the color of the Quantity’s text
2. Background Color: Choose the background color of the Quantity field
3. Border Color: Choose the border color of the Quantity field

Variations

1. Spacing: Change the amount of space between the variations and the Add To Cart button
2. Space Between: Change the amount of space between each variation

Label

1. Color: Choose the color of the Variations’ Label text
2. Typography: Change the typography options of the Variations’ Label text

Select Field

1. Color: Choose the color of the Variations’ Select field text
2. Background Color: Choose the background color of the Variations’ Select field
3. Border Color: Choose the border color of the Variations’ Select field
4. Typography: Change the typography options of the Variations’ Select field
5. Border Radius: Set the border radius to control corner roundness

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.