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.