How to Add a Cart Button to WooCommerce Product Pages
The Product Add to Cart widget allows you to place the WooCommerce purchase button inside Elementor product templates. This widget is used when creating custom WooCommerce product pages with Elementor.
The widget connects directly with WooCommerce product data and allows visitors to add items to the shopping cart from the product layout. You can customize the button design, spacing, and alignment using Elementor styling controls.
This widget is typically used when building WooCommerce product templates with Elementor Theme Builder.
Part of WooCommerce Elementor Widgets #
The Add to Cart widget belongs to the WooCommerce widget collection included with Spexo Addons. These widgets allow you to design complete product layouts and shopping experiences directly inside Elementor.
You can view the full widget library on the WooCommerce widgets for Elementor page.
When to Use the Add to Cart Widget #
This widget is used when designing custom WooCommerce single product templates. It displays the purchase button dynamically for the active product.
It is usually placed below the product pricing section and works together with widgets that display the product title, show WooCommerce pricing, and display product images and galleries.
Requirements #
Before using this widget confirm that the required plugins and product settings are configured. The widget only works inside WooCommerce single product templates.
- WooCommerce plugin installed and activated
- Products created in the WooCommerce store
- Product price configured
- Elementor product template created
- Spexo Addons plugin installed and active
This widget works inside Elementor product templates created with the Theme Builder.
How to Add the Add to Cart Widget #
Follow these steps to add the purchase button inside a WooCommerce product template.
- Open the WooCommerce single product template in Elementor.
- Search for the Product Add to Cart widget in the Elementor panel.
- Drag the widget into your product page layout.
- The button will automatically connect with the current WooCommerce product.
After completing this step the Add to Cart button will appear inside the WooCommerce product layout.
Content Settings #
To configure the widget settings open the Content tab in Elementor.
Button Settings #
This section controls how the purchase button behaves and appears on the product page.
The widget automatically connects with WooCommerce purchasing functionality and allows users to add the product to the cart.
Style Settings #
The appearance of the purchase button can be customized from the Style tab inside Elementor.
Button Design #
From this section you can customize the button color, typography, padding, border, and hover effects.
These settings help match the Add to Cart button with the overall WooCommerce product page design.
Common Issues and Fixes #
If the Add to Cart button does not appear confirm that you are editing a WooCommerce single product template. The widget will not display dynamic product data on standard pages.
If the button is missing confirm that the product is purchasable and pricing is configured in WooCommerce.
If the widget is not visible in Elementor check the widget configuration guide and confirm that the widget is enabled.
Related WooCommerce Widgets #
The Add to Cart widget is usually combined with other WooCommerce elements to build a full product page layout.
- Product title widget documentation
- WooCommerce price display widget
- Product image and gallery widget
- Product rating widget guide
Related Documentation #
You can review additional guides to configure WooCommerce templates and Elementor widgets.
- How to enable Elementor widgets
- Using global templates in Elementor
- Breadcrumb navigation for WooCommerce products
Frequently Asked Questions #
Why is the Add to Cart button not visible? #
The widget only works inside WooCommerce single product templates. It will not show dynamic purchase buttons on normal pages.
Can I customize the Add to Cart button style? #
Yes. You can modify typography, colors, borders, spacing, and hover effects using Elementor style settings.
Can the button text be changed? #
Yes. The button label and layout options can be adjusted from the widget content settings.
Need help? Feel free to contact our support team for assistance.
Navigation:
