Important
This widget is a REQUIRED element on the WooCommerce Single template. If this widget is not added to the WooCommerce Single template, the Elementor editor will not load. For more information, see Create a WooCommerce single template.

Add the widget

WooCommerce Single Add To Cart
  1. In Elementor Editor, click +.
    All available widgets are displayed.
  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the WooCommerce Single: Add To Cart widget?

The Add to Cart allows you to insert an Add to Cart button onto your pages, particularly within the WooCommerce Single template. With this widget, you can control the layout and style of the Add to Cart button, adjusting settings such as button text, size, alignment, colors, typography, borders, and hover effects.

Common use case

John is building an eCommerce website that sells kitchen items online. Their client wants to make it easy for customers to add products directly from the product pages to their carts. John uses the Add to Cart widget to insert customizable “Add to Cart” buttons on each product page. 

They configure the buttons to match the website’s design and branding, ensuring a consistent user experience. By implementing this solution, John enhances the website’s functionality, making it effortless for customers to buy products with just a click.

WooCommerce Single Add To Cart 3 WooCommerce Single: Add To Cart widget 2

Additional use cases

  • Include an “Add to Cart” button for event ticket sales on a website.
  • Add a “Donate Now” button to a nonprofit organization’s website for fundraising campaigns.
  • Integrate a “Request a Quote” button for services offered on a business website.

Add a WooCommerce Single: Add To Cart widget: Step-by-step

  1. Add the WooCommerce Single: Add To Cart widget to the canvas. For details, see Add elements to a page.
    Important
    This widget is a REQUIRED element on the WooCommerce Single template. If this widget is not added to the WooCommerce Single template, the Elementor editor will not load. For more information, see Create a WooCommerce single template.
  2. In the Style tab, under the Layout section, choose how the Add to Cart button is positioned relative to other elements on the page. Options include Inline, Stacked, and Auto.
    WooCommerce Single Add To Cart 5
  3. Under the Button section, you get plenty of options to customize the Add to Cart button, such as:
    1. In the Typography field, set the typography options for the button text. Learn more about Typography.
    2. In the Border Type field, choose the type of border for the Add To Cart button from options such as none, solid, double, dotted, dashed, or grooved.
    3. In the Border Width field, set the width of the button’s border.
    4. In the Border Radius field, set the border radius to control the roundness of the button’s corners. For more details, see Border radius tools.
    5. In the Padding field, change the button’s padding settings to adjust the space between the button text and its border.
    6. In the Text Color field, choose the color of the Add To Cart button’s text for both normal and hover states.
    7. In the Background Color field, customize the background color of the Add To Cart button for both normal and hover states.
      WooCommerce Single Add To Cart 4
    8. Below the View Cart sub-section, in the color field, choose the color of the View Cart button.
    9. In the Typography field, set the typography options for the View Cart button text. Learn more about Typography.
    10. In the Spacing field, use a slider to adjust the spacing of the View Cart button.
      WooCommerce Single Add To Cart 8
  4. Under the Quantity section, customize the quantity number. The customization options are:
    1. Slide the Quantity toggle to Yes to display product quantity number.
    2. In the Spacing field, adjust the amount of space between the Quantity field and the Add To Cart button.
    3. In the Typography field, customize the typography options for the Quantity text, including font style, size, weight, line height, and letter spacing. Learn more about Typography.
    4. In the Border Type field, select the type of border for the Quantity field from options such as none, solid, double, dotted, dashed, or grooved.
    5. In the Border Radius field, set the border radius to control the roundness of the corners of the Quantity field. For more details, see Border radius tools.
    6. In the Padding field, change the padding settings of the Quantity field to adjust the amount of space between the Quantity text and its border.
    7. In the Text Color field, choose the color of the Quantity text for both normal and focus states.
    8. In the Background Color field, customize the background color of the Quantity field for both normal and focus states.
    9. In the Border Color field, select the border color of the Quantity field for both normal and focus states.
      WooCommerce Single Add To Cart 11
  5. Under the Variations section, you get to customize the appearance and functionality of variation selectors, such as
    1. In the Width field, set the width of the variation.
    2. In the Spacing field, adjust the amount of space between the variations (labels and select fields) and the Add To Cart button.
    3. In the Space Between field, change the amount of space between each variation.
    4. Below the Label subsection, in the Label Color field, choose the color of the Variations’ Label text.
    5. In the Typography field, customize the typography options of the Variations’ Label text, including font style, size, weight, line height, and letter spacing. Learn more about Typography.
    6. Below the Select field, in the Color field, choose the color of the Variations’ Select field text.
    7. In the Background Color field, customize the background color of the Variations’ Select field.
    8. In the Border Color field, choose the border color of the Variations’ Select field.
    9. In the Typography Field, customize the typography options of the Variations’ Select field text, including font style, size, weight, line height, and letter spacing.
    10. In the Border Radius field, set the border radius to control the roundness of the corners of the Variations’ Select field.
      WooCommerce Single Add To Cart 6
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.

Settings for the WooCommerce Single: Add To Cart Widget

You can customize your widgets using style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Style tab

WooCommerce Single Add To Cart 1

Choose how the Add to Cart button is positioned relative to other elements on the page. Options included are Inline, Stacked and Auto.

WooCommerce Single Add To Cart 2 WooCommerce Single: Add To Cart widget 10

Align the title to the left, right, center, or justified.

Change the typography options for the Add To Cart button.

Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.

Set the width of the button’s border.

Set the border radius to control corner roundness.

Change the padding settings of the button.

Choose the color of the button’s text for both the normal and hover states.

Choose the background color of the button for both the normal and hover states.

Choose the border color of the button for both the normal and hover states.

  • Color: Choose the color of the View Cart button.
  • Typography: Set the typography options for the View Cart button text. Learn more about Typography.
  • Spacing: Use a slider to adjust the spacing of the View Cart button.
WooCommerce Single Add To Cart 9

Slide the Quantity toggle to Yes to display the product quantity number.

Adjust the amount of space between the Quantity field and the Button.

Change the typography options for the Quantity text.

Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.

Set the border radius to control corner roundness.

Change the padding settings of the Quantity field.

Choose the color of the Quantity’s text for both the normal and focus states.

Choose the background color of the Quantity field for both the normal and focus states.

Choose the border color of the Quantity field for both the normal and focus states.

WooCommerce Single Add To Cart 10

Set the width of the variation.

Change the amount of space between the variations and the Add To Cart button.

Change the amount of space between each variation.

  • Color: Choose the color of the Variations’ Label text. 
  • Typography: Change the typography options of the Variations’ Label text.
  • Color: Choose the color of the Variations’ Select field text. 
  • Background Color: Choose the background color of the Variations’ Select field. 
  • Border Color: Choose the border color of the Variations’ Select field. 
  • Typography: Change the typography options of the Variations’ Select field. 
  • Border Radius: Set the border radius to control corner roundness.

Advanced tab

The Advanced tab provides options to control widget position, adjust spacing, add custom code, and more.

WooCommerce Single Add To Cart 7

Learn more about the Advanced tab settings.

Stuck?
Our Elementor Expert is Ready

Unlock Your Session Now

Book a 45-min video consultation call with an Elementor expert and elevate your site!