The Add to Cart with Options block displays an Add to Cart button along with quantity selectors and, depending on the product type, additional selection inputs. This block allows customers to add a product directly to their cart with their chosen configuration.
Introduced in WooCommerce 10.0, the new Add to Cart + Options (Beta) block offers a fully blockified, customizable add-to-cart form. It can be used on the Single Product templates or within the Single Product block, which is ideal for complex product types and flexible design needs.
Features
↑ Back to topThe new block comes with key features:
- Enables adding products to the cart without a page reload, leading to a smoother and faster experience
- Quantity updates are reflected instantly across Mini Cart, Product Collection, and this block, no refresh required.
- You can use pill view instead of dropdowns for a more engaging variation selection experience.
Block Structure
↑ Back to topBy default, this block includes:
- Add to Cart Button: Displays a button to add the configured product to the cart. You can customize this button’s styles like fill styles or outline
- Product Quantity (Beta): A quantity input field that customers can use before adding a product to their cart.
Depending on the product type, additional selection blocks are available:
Variable Products
↑ Back to top- Variation Selector: Attribute Name (Beta): Customizes how the attribute name is displayed (e.g., “Color”, “Size”). You can configure the colors, dimensions, and typography from the block settings.
- Variation Selector: Attribute Options (Beta): It allows you to render the product’s attribute values as: Pills or a dropdown.
Grouped Products
↑ Back to top- Grouped Product Selector (Beta): Displays a group of configured products that customers can select and add to the cart together.
- It is displayed in grid style with input selector for the configured grouped products, their product titles, product Price, and stock.
Questions and support
↑ Back to topDo you still have questions and need assistance?
This documentation is about the free, core WooCommerce plugin, for which support is provided in our community forums on WordPress.org. By searching this forum, you’ll often find that your question has been asked and answered before.
If you haven’t created a WordPress.org account to use the forums, here’s how.
- If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the WooCommerce Marketplace.
- Need ongoing advanced support or a customization built for WooCommerce? Hire a Woo Agency Partner.
- Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.
If you weren’t able to find the information you need, please use the feedback thumbs below to let us know.