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.
Wishlists
↑ Back to topWooCommerce 10.9 includes an experimental Wishlists feature for stores using block themes. While the feature is experimental, store owners can enable it from WooCommerce > Settings > Advanced > Features.
When Wishlists is enabled, the Add to Cart + Options block can show an Add to Wishlist button on single-product templates. The button is shown only to logged-in shoppers and only for published products. For variable products, shoppers can save the selected variation.
Shoppers manage saved products from My Account > Wishlist. Items in the wishlist include an Add to Cart action when the product can be added to the cart.
If the wishlist button does not appear, confirm that Wishlists is enabled, that the shopper is logged in, and that the single-product template uses the Add to Cart + Options block. Stores using classic product templates will not show the core wishlist button.
For cart-page saving, see the Save for Later in Cart section of the Cart block documentation.
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): Renders the product’s attribute values as pills or a dropdown. When the experimental Color swatches for attributes feature is enabled and the selected attribute uses the Color / image type, pill options can display each term’s color or image swatch.
Dynamic Variation Updates
In WooCommerce v10.3.0, the Add to Cart + Options block has been updated so that when a variation is selected, it automatically updates related product blocks to display the correct variation data.
For example, selecting a variation will update the product image to show the selected variation’s product image. Similarly, the Add to Cart + Options block will also hide the Product Quantity block if a variation is sold individually.
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.