In 2019 we launched a number of new WooCommerce Blocks, first via the WooCommerce Blocks plugin, and then via WooCommerce itself that have replaced a large number of the old legacy shortcodes used by WooCommerce.
As part of this work, two of the shortcodes to be replaced were those used by the cart and checkout pages in WooCommerce. Instead of just replacing them with the same design though we took this opportunity to redesign both the cart and checkout.
Converting the cart and checkout to blocks has been a complex and challenging process but as of today we have made the new cart and checkout blocks available for preview via the WooCommerce Blocks feature plugin. If you’d like to test them please take the time to read the requirements below.
Testing the new cart and checkout blocks
Store requirements
As this is our initial release for testing and feedback – we do have some limitations on the type of stores that will be able to test this initial version of the new cart and checkout blocks – in order to test them stores need to:
- Be using WooCommerce Blocks 2.6.0
- Be using WP 5.3+ and WooCommerce 4.0+
- Be using using any of the following payment methods: Stripe Payment Request (ApplePay, ChromePay), Stripe CC payment method, PayPal Standard, or Cheque.
Please note:
- The cart and checkout blocks do not currently support all plugins that integrate with regular cart and checkout shortcodes. Support for extensions will follow in future releases.
- You may experience some styling issues between your theme and the new blocks as not all themes necessarily will provide support for the new blocks out the box. We are working on ways to provide greater default theme/block styling support though.
- Currently the blocks do not integrate with any of the other payment methods that Stripe supports. We are working on including more in future releases.
Feedback can left directly via the built in feedback section in the blocks themselves – or they can be left in Github.
Setting up the new blocks
Currently there are two ways to test the new blocks – you can either:
- Replace the existing shortcodes in the cart and checkout pages of your store with the new blocks by inserting them via the blocks inserter and saving the pages, or
- You can create new pages alongside your old shortcode powered cart and checkout pages – just remember to change the pages used for the cart and checkout in
WooCommerce -> Settings -> Advanced
What’s new?
The new cart and checkout sees the introduction of a brand new design. In some areas we have made incremental improvements (like the cart) while the checkout sees much bigger changes. Alongside these design changes we have also started the initial “migration” of core cart and checkout settings to block settings and have also included a few new features within the block settings to give merchants more “direct” control of their stores checkout experience.
Below is a brief overview of some of the new things coming in the block-based cart and checkout.
Full cart
The “full cart” state now includes a range of new features and block settings – these are:
- Features:
- The cart automatically loads demo products when previewing it.
- Shoppers will see a low stock notification if there are 3 products or less in stock.
- The cart now auto-updates the totals if items are removed or quantities are changed.
- Merchants can preview/switch between the full cart and the empty cart states.
- Block settings:
- The shipping calculator can be shown or hidden in the cart
- Shipping costs can be hidden until an address is entered
Empty cart
With the new blocks – we are also introducing a few basic options that allow the control of the empty cart. Merchants will be able to:
- Show/hide the icon and change its size or replace it with a custom image/graphic
- Edit the header text and “continue shopping” text and link
- Edit/change the default
New Productsblock which is shown - Add any additional blocks
Checkout
The checkout has seen a substantial redesign as part of this work and aims to address customer pain-points and implements a number of “best-practices” – these include:
- Features:
- The checkout also loads demo products – allowing merchants to preview how the checkout looks right within their wp-admin
- If the store has a payment gateway installed that supports express checkout an “Express checkout” section will be shown (this is currently limited to Apple Pay, but will include more express checkout options in future versions)
- New inline field validation vs the old stack of error notices
- Shown fields are required by default, optional fields are shown/marked as optional
- The checkout process now captures the shipping address first, and uses this as the default address
- Checkout interactions are kept in the left column vs the left/right experience of the existing shortcode checkout
- If the merchant has the coupon usage disabled in the WooCommerce Settings the field is hidden on the checkout page
- Block settings:
- Merchants can control which fields (apartment, company name, phone number) are shown and select if they are required/optional fields
- Merchants can enable/disable using the shipping address as the billing address. Using the shipping address as the billing address is enabled by default
- Terms of service, Privacy Policy and Refund policies are simplified and can be linked at the bottom of the checkout block
Why are we doing these blocks?
We have a few targets we’re shooting for with the development and release of these blocks and this initial preview release is the first step towards these goals:
Making it easier for merchants to customize the cart and checkout experiences for their stores.
We want to provide the best in class tools for merchants to modify these important flows in their store while promoting good standards from the industry.
This includes things like:
- Being able to configure settings for these flows and see how the changes affect the view immediately is one of the great things about blocks.
- Not having to dive into customizing specific theme templates for adjusting what is available in the cart or checkout.
- Having a default that “just works” and works well out of the box for merchants that just want to set their store up and start selling.
This initial preview gets us part of the way there but we still have much more to come so we look forward to the feedback (and know that we still have much planned).
Improving conversion rates for stores over the current shortcode implemented cart and checkout.
The current default layout and designs are borrowed from and informed by our research in this area and we want to expose the benefits of that research to our merchants.
We will be collecting aggregated data from opted-in merchants to help measure these conversion rates and yes, when we know the results, we’ll publish them!
This actively works towards our desire to see all merchants using WooCommerce have the best conversion rates in the industry and know they are backed by a team dedicated to their success. We win, when you win!
Provide an opinionated path for extension developers to integrate with the new blocks.
“Opinionated” means we still want to provide some flexibility with the options and extensibility provided to third party extensions for expanding the functionality of the cart and checkout flows, while also protecting the integrity of the process to the shoppers of the merchant’s store.
Practically, this means that there will likely be more defined APIs for integrating with the blocks that extension developers hook into to add additional functionality vs the general “anything goes” extensibility with the shortcodes.
In this initial preview, we’ve started with providing some extensibility points for payment methods to integrate and you can read more in some docs we’ve started here.
Note: During this preview period the current extensibility interfaces are subject to change so while we do encourage developers to start experimenting with them, if you use any of this in production you will need to actively monitor for changes in the API’s across releases until they are marked stable.
We still have much to do in the area of extensibility and we’re hoping this preview will help guide where we prioritize adding extensibility so if you are an extension developer your feedback is welcome.
Leave a Reply