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.

Still puzzling over something?