Cancel

Sarah Gooding

WooCommerce Is Testing a Block-based Cart and Checkout

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.

Cart block

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.

Category: ,
Tags:
15

15 responses to “WooCommerce Is Testing a Block-based Cart and Checkout”

  1. This looks a nice feature to have but I’d rather the focus was on getting the basics in Gutenberg right first, like the ever evolving and yet still abysmal block navigation for example, rather than opening another front!

    Create forum topic from comment

    • They all work for Automattic and the WooCommerce team are building on top of an internal product. I’d rather see internal focus on the basics in refining the terrible UI/UX so it get’s to a point where we can say “this is it” and produce some documentation for clients that’s not going to have to be drastically changed in a few months.

      I’m down with the broader picture of Gutenberg but the nuts and bolts so to speak are failing to reach a useable standard by a mile – spend 5 minutes on the Github Repo and you’ll see what I mean. We’ve had to suspended any custom block dev and use ACF for the time being until some sort of stability emerges.

      Oh and to the other point @steve I said block navigation [selecting, moving etc] not the navigation block.

      Create forum topic from comment

  3. Suggestion –
    1. Making check out 2 step. 1st step will collect email and phone. 2nd step will collect rest of the information like, name, address, payment information. This will help to increase the conversion using retargeting after cart abandon.

    Ability to change the quantity, removal of product on check out page. Most customers want to make change to qty, product after knowing final price.

    Create forum topic from comment

  4. The WooCommerce people and the Gutenberg people are the same people. They’re both owned by Automattic.

    And to add on to what Sarah shared, while some Automatticians contribute to WordPress, many other work on various products for the company (such as WooCommerce and Jetpack, etc.).

    And, not all WordPress contributors are Automatticians. I have many colleagues outside of Automattic who care deeply about WordPress and contribute to it on a regular basis. Cheers!

    Create forum topic from comment

  7. It works great but this should never replace classic checkout; rather, it should remain optional to woocommerce core as it is now. There many sites -i have a couple of them- that could not be easily integrated, legacy code, payments gateways that are not mainstream in us/europe…and this would break hundreds of sites that are perfectly operational. Thanks!

    Create forum topic from comment

You may also like

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.