Skip to main content
Elementor

WooCommerce Single: Add to Cart (Pro)




Insert an "Add to Cart" button and control the design and style of the Add to cart botón en la plantilla única de WooCommerce

Style

Button

  1. Alignment: Aligns 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 edge, choosing from none, solid, double, dotted, dashed or grooved
  4. Edge radius: Sets the radius of the border to control the roundness of the corners
  5. Filling: Changes the button fill setting

Normal | Float up

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

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

Quantity

  1. Spacing: Adjusts the amount of space between the Amount field and the Button
  2. Typography: Change the font options for the Amount text
  3. Border type: Select the type of edge, choosing from none, solid, double, dotted, dashed or grooved
  4. Edge radius: Sets the radius of the border to control the roundness of the corners
  5. Filling: Change the padding setting of the Amount field

Normal | Attention

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

  1. Text color: Choose the text color of the Quantity
  2. Background color: Choose the background color from 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: Changes the amount of space between each variation
Label
  1. Colour: Choose the color of the variations label text
  2. Typography: Changes the typography options of the variations label text
Select field
  1. Colour: Choose the text color from the Select Variations field
  2. Background color: Choose the background color from the Select Variations field
  3. Border color: Choose the border color of the Select Variations field
  4. Typography: Change the font options in the Select Variations field
  5. Edge radius: Sets the radius of the border to control the roundness of the corners

Note: The style of this widget is usually affected by the theme and plugins. If you experience any of these issues, try switching to a basic theme and disabling related plugins, or adjust the style within your theme settings.