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 #

The 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 #

By 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 #

• 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.

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 #

• 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 #

Do 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.