Call for Feedback: Stepper Layout in Add to Cart Block

Shani Banerjee Avatar
Shani Banerjee

•

With WooCommerce 9.5 in beta testing, we wanted to highlight a feature that has been often requested for the Add to Cart with Options block. The new stepper layout allows for the increase and decrease of items in the Add To Cart action in one fell swoop.

Since this is a new layout option that does alter some CSS rules, we want to make sure you are able to test your stores and extensions first. This could impact the layout of the Single Product Page if other extensions rely on the classic Add To Cart CSS.

Testing

Pre-requisites:

Download the WooCommerce Beta Tester Plugin or download the WooCommerce 9.5 Beta

Instructions:

  1. Visit wp-admin/tools.php?page=woocommerce-admin-test-helper.
  2. Enable add-to-cart-with-options-stepper-layout feature.
  3. Enable a block theme.
  4. Edit the Single Product Template.
  5. Ensure that you have the Add To Cart with Options block added.
  6. Click on it.
  7. Open the block settings.
  8. Ensure that you have the Quantity Selector option.
  9. Ensure that the default one is Input.
  10. Switch the option to Stepper.
  11. Save it.

The following steps should be checked for both options and with a Simple Product, a Variation Product, and a Grouped Product

  1. Visit the Product page. For instance, /product/beanie-with-logo/.
  2. Ensure that the input looks like the image above.
  3. Ensure that the input works correctly (pay attention to focus/border/etc…).
  4. Click Add to Cart.
  5. Ensure that the right amount of the products are added.
  6. Test with extensions that integrate with the Add To Cart with Options block you maintain or use.

Please feel free to open an issue or a GitHub discussion to provide feedback! Happy testing!

Keep yourself in the loop!

This field is hidden when viewing the form
This field is hidden when viewing the form
This field is hidden when viewing the form

5 responses to “Call for Feedback: Stepper Layout in Add to Cart Block”

  1. Kathy Avatar
    Kathy

    As I have been exploring the blockification of the Add To Cart Form block with inner blocks, I kind of think that the steppers should be held for a future quantity inner block. Otherwise, you’ll have to support it in 2 places later.

    Reply
  2. Kathy Avatar
    Kathy

    Oh, and I forgot to say that the quantity input needs to dispatch a change event after the value is programatically set by clicking plus or minus. If you type a new value a change event is fired, but NOT when using plus/minus buttons. This is a compatibility thing as a lot of plugins listen to quantity input change events.

    Reply
  3. Tommaso Avatar
    Tommaso

    The stepper quantity looks great and it’s great step up in terms of usability!
    And it is absolutely required for a good looking store.
    I wouldn’t suggest building a store with a block theme if this feature is not available.

    Reply
  4. David Allsop Avatar
    David Allsop

    Also seeing no change event fired on this, which can break functionality of third party extensions.

    I have raised an issue for that here: https://github.com/woocommerce/woocommerce/issues/53031

    Reply
  5. Tom Jackson Avatar
    Tom Jackson

    Great idea. I’ve been exploring this as well.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *