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
Alignment: Align the title to the left, right, center, or justifiedTypography: Change the typography options for the Add To Cart buttonBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundnessPadding: Change the padding settings of the button
Normal | Hover
The following options can be set independently for both the normal and hover states.
Text Color: Choose the color of the button』s textBackground Color: Choose the background color of the buttonBorder Color: Choose the border color of the button
Quantity
Spacing: Adjust the amount of space between the Quantity field and the ButtonTypography: Change the typography options for the Quantity textBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundnessPadding: Change the padding settings of the Quantity field
Normal | Focus
The following options can be set independently for both the normal and focus states.
Text Color: Choose the color of the Quantity』s textBackground Color: Choose the background color of the Quantity fieldBorder Color: Choose the border color of the Quantity field
Variations
Spacing: Change the amount of space between the variations and the Add To Cart buttonSpace Between: Change the amount of space between each variation
Label
Color: Choose the color of the Variations』 Label textTypography: Change the typography options of the Variations』 Label text
Select Field
Color: Choose the color of the Variations』 Select field textBackground Color: Choose the background color of the Variations』 Select fieldBorder Color: Choose the border color of the Variations』 Select fieldTypography: Change the typography options of the Variations』 Select fieldBorder 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.