WooCommerce Single: Add To Cart (Pro)

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.