As part of an ongoing initiative to convert the plugin’s existing shortcodes to blocks, WooCommerce core developers are testing a new block-based cart and checkout experience. This major architectural change has also been redesigned to improve conversion rates for stores.
An initial preview release of the blocks can be tested using the WooCommerce Blocks feature plugin version 2.6.0, which was released yesterday. WooCommerce designer Gary Murray shared screenshots of the new design inside the editor, where store owners can now manipulate a live preview of the cart. It automatically loads demo products in the preview and users can switch between the full cart and the empty cart states.
So far, the block settings for the full cart include the option to hide/show the shipping calculator and hide shipping costs until an address is entered. The empty state allows users to do things like change the size of the empty cart icon or replace it with a custom image, edit the “continue shopping” text, and add more blocks.
Store owners can also preview the entire checkout form in the editor, allowing them to immediately see how any settings changes affect the checkout process.
“In some areas we have made incremental improvements (like the cart) while the checkout sees much bigger changes,” Murray said. “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.”
One of the major benefits of the new blocks is that it instantly gives store owners more customization options. This is much more user-friendly than the prospect of having to customize specific theme templates for the cart and checkout pages. This implementation of blocks in WooCommerce is another reminder of the magic of blocks to put more power in the hands of users.
The blocks currently support only the following payment methods: Stripe Payment Request (ApplePay, ChromePay), Stripe CC payment method, PayPal Standard, or Cheque. They also do not yet support third-party plugins that integrate with regular cart and checkout shortcodes. The WooCommerce core team is working on making these blocks more extensible but developers should still consider them as being in the experimental stage for now. Check out the initial preview announcement for more information on how to test the new cart and checkout blocks.
