Categories
Engineering Spotlight

Available for testing – a block-based WooCommerce Cart and Checkout

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:

  1. 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
  2. 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

Cart block in “Full Cart” View

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

Cart block in “Empty cart” view.

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 Products block 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.

By Gary Murray

Product Lead at WooCommerce

84 replies on “Available for testing – a block-based WooCommerce Cart and Checkout”

Wow!!! This is so great. Hopefully you will support other payment providers really soon so I can integrate this.

Liked by 3 people

Thanks Michael. Out of interest – what payment provider are you currently using?

Like

I’m using Mollie as a payment provider. They also support Apple Pay and PayPal FastCheckout. It looks amazing!! Thumbs up for this long wanted update 😉

Liked by 1 person

Not currently. In future updates as we add additional methods as part of the Stripe integration we should then be able to offer support for iDeal via Stripe.

Liked by 1 person

Mollie payments =). Is it also possible to add an extra field for a house number? Here in the Netherlands we use a different address format than in the US. We’d have to spit the street name and the house number.

Thanks!

Like

Thanks for the feedback Mia.

Is it also possible to add an extra field for a house number? Here in the Netherlands we use a different address format than in the US. We’d have to spit the street name and the house number.

I’m interested to know why the customer can’t or won’t enter the house number and street within the address field? Is it a specific requirement that you actually capture/record the house number as a separate piece of information/data from the street address?

Like

Hi Gary,
Thanks for your reply. The house number gets forgotten very often :(. And here it’s a specific requirement. You need the ZIP-code and the house number. Hope this could be included in the next update.

Thanks for the great work already it looks cool!

Liked by 1 person

Great tool! I’m waiting too. I use a Cielo provider payment app. Brazilian payment company

Like

Awesome! 3 features you should look at:
Checkout page:
1st: Payment gateways displayed are only Paypal and Credit Card – Other payment methods like Cash on Delivery or Multibanco (Most used in Portugal) are not displaying.

2nd: On the left Row I see the shipping cost without VAT, on the right row, on order summary it has VAT as it should. It’s also displaying a fee that I have for other payment method that I can’t even see and I can’t remove it.

3rd (Suggestion) : Would be nice if we could remove items from the checkout order summary without having to go back to cart.

Liked by 1 person

Hi Sérgio

Thanks for the feedback.

1st: Payment gateways displayed are only Paypal and Credit Card – Other payment methods like Cash on Delivery or Multibanco (Most used in Portugal) are not displaying.

Currently those are the only payment methods the blocks support as part of this release – we are working on adding more in the future.

2nd: On the left Row I see the shipping cost without VAT, on the right row, on order summary it has VAT as it should. It’s also displaying a fee that I have for other payment method that I can’t even see and I can’t remove it.

Would you be able to open issues for those in Github: https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new/choose – and include in information about your theme and the payment method in question.

3rd (Suggestion) : Would be nice if we could remove items from the checkout order summary without having to go back to cart.

This was debated during the design and build, it could be something we provide as an option in the future. As with your second point – if you could add that to Github when/if you log the the shipping cost vat issue what will be great – otherwise I will add them later for the team to assess.

Liked by 1 person

To continue my previous comment: The buttons from the “WooCommerce PayPal Checkout Gateway” plugin are not displayed as in the current cart added with shortcode. Hope will be added in the future.

Liked by 1 person

Hi

Just to check – are you trying to use the WooCommerce PayPal Checkout Gateway in the blocks?

Currently it only supports PayPal Standard which is in WooCommerce core itself – alongside the other payment methods outlined in the post.

Like

Hi Gary,

Yep, i’ve added the Cart block.

Currently the cart, which added with shortcode, also outputs the PayPal button which added with “WooCommerce PayPal Checkout Gateway” plugin. Hope the Cart block will also show the PayPal button.

Liked by 1 person

“WooCommerce PayPal Checkout Gateway” is not supported currently, support is being added gradually.

Like

Guys we have been waiting for this for too long, thanks a lot. But, really sad to know it only support those basic payment methods, please include these plugins: WooCommerce PayPal Checkout Gateway by woocommerce
and 2checkout by Craig Christenson. If i can hire a Dev to fast this step please let me know. Thanks

Like

Thanks for the feedback – while we would have loved to be able to support more payment methods at the start – we also had to balance the time spend integrating more vs getting feedback on the initial block concepts and design. As a result we started by providing support for the most popular payment methods and then will start including support for others as we keep working on the blocks.

and 2checkout by Craig Christenson. If i can hire a Dev to fast this step please let me know. Thanks

Other payment methods can also start looking at integrating with the new blocks themselves and make use of the initial set of documentation we have put together here: https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/master/docs/extensibility

Liked by 2 people

Thank you very much for your reply Mr. Gary Murray.
If the 3rd party payment provider done the integration, does it will be deleted or messed up in the new releases of this woo blocks?
Thanks

Like

As with any extension/integration – it would need to be updated as and when changes are made in WooCommerce or the blocks themselves. You’d be able to stay up-to-date on any changes in WooCommerce of the blocks themselves though via this blog.

Like

Suggestion –
1. Making check out 2 steps. 1st step will collect email and phone. 2nd step will collect the 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 products on check out page. Most customers want to make a change to qty, product after knowing the final price.

Liked by 1 person

This is a step in a semi-right way as this brings Woo closer to others that are better. Remove product from cart and change qty directly from checkout is a must. The same must go into the mini cart. The dev team is getting closer and yet, so far away from basic options.

Like

Hi, does the block support the “Braintree” plugin by Paypal?
Also, previously we could use various hooks on the woocommerce pages, is there documentation regarding hooks for these blocks?
Thanks!

Like

Hi, does the block support the “Braintree” plugin by Paypal?

Currently the blocks don’t support the Braintree plugin by PayPal. We’ll be looking to add support for additional payment methods in future releases.

Also, previously we could use various hooks on the woocommerce pages, is there documentation regarding hooks for these blocks?

We have put together some documentation here on how we plan to handle extensibility in the blocks: https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/master/docs/extensibility

Like

Please fix translation not available

Are you referring to translations of the blocks themselves? Currently the blocks are translation ‘ready’: https://translate.wordpress.org/projects/wp-plugins/woo-gutenberg-products-block/ – they just need to actually be translated – I’d encourage you to contribute if possible.

possibility to customize product page

To check – are you referring to the single product page in WooCommerce?

Liked by 1 person

Hi Gary yes i am referring to the single product page. 2. for the translation i am going to translate it to italian as i see some parts are not available in italian. I would like to contribute it so i do not have to touch the code by myself. If i send you the translation is possible for you to publish a new version as soon as possible? thanks in advance

Like

Hi Gary, may i please know if the translation i added will be published on the next plugin update?i urgently need it. Thank you in advance

Like

Thanks for submitting those translations.

However, the translations will only show automatically in the WooCommerce blocks plugin itself when the translations for the language in question reaches 95% (translated).

You can download the strings manually if you wanted, but you would also need to download the .json (JED 1.x format) and .mo files for your language and install them in the wp-content/languages folder on your site.

Also, please note, the JSON files are linked to the md5 paths for the js files in the plugin, in most cases this means the translations will work across versions, but it would be recommended to download new JSON files after each plugin update.

In a few weeks the Cart and Checkout block strings (not the blocks themselves) will be added to the WooCommerce main repository, so you will be able to translate them directly there: https://translate.wordpress.org/projects/wp-plugins/woocommerce/ – but again, they will only be available within the plugin once the translations for that language reaches 95%.

As such, if you urgently need your cart and checkout to be translated, I’d still suggest using the shortcodes provided by WooCommerce itself – or you would manually have to add your translations to your site.

Liked by 1 person

Hi Gary i translated more than 95% of the Translation of Stable (latest release): Italian, can you plese let me know if this translation will be published on the next release? Thanks, Nicola

Like

i also would like to make postalcode required field as i need to allow delivery just on some regions and if i do not have the postalcode required the user could leave the checkout after missing the postalcode because the message just says “No shipping options were found.”. Having the postalcode required the filtering can work correctly

Like

My client want to deliver only in Italy, so i would like if possible to show only Italy on the “country” dropdown and only one region. Then i would also like to add a custom field on checkout form. Having also the postalcode required field. Thanks

Like

Thanks for your suggestions.

Currently the checkout form does not allow for custom fields in this initial version, but adding compatibility with extensions that would provide this support is something we will be looking into. Feel free to add your suggestions to the ideas board for WooCommerce, this way they will get more visibility and might receive votes from other store owners with similar issues:

https://ideas.woocommerce.com/forums/133476-woocommerce?category_id=384565

Like

hello Gary i got the plugin properly translated and that is amazing. Just one question, i opened a feature request on the link you provided me about the possibility to add postalcode as required field and possibility to add custom fields. Is there any news about these two features? may i know if these are going to be free features or only with pro membership? thanks in advance

Like

Just one question, i opened a feature request on the link you provided me about the possibility to add postalcode as required field

We are still deciding on the best option here, if it is something the blocks should control, of if WooCommerce core should – can you add your comments here to please on this issue to help us decide: https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/2588

and possibility to add custom fields.

Something like this would be part of a paid extension like our Checkout Field Editor extension: https://woocommerce.com/products/woocommerce-checkout-field-editor/

We are still working on creating integrations between extensions like that and the cart/checkout blocks.

Like

I know this isn’t a top issue as you have mentioned that other payment methods are coming. But if later on, we can sort the payment methods by tabs like

Pay Now | Pay Later

e.g. Pay Now will have the credit card, Paypal and other options the admin selects
e.g. Pay Later will offer finance options that the admin selects.

This caters to a lot of e-commerce business that offers Buy now pay later solutions that have become increasingly popular worldwide.

Like

We use Paystack and Flutterwave for processing payment, but the WooCommerce Block doesn’t support this platform.

Like

Hi – as mentioned in this release post – with this initial launch of the blocks for testing we are only supporting a limited set of payment methods – we will look to add more in future releases.

For the two payment methods you mentioned in your comment – I’d suggest getting in touch with the developers of those extensions themselves as they would need to do the integration with the new blocks themselves.

Like

I am happy enough with the current layout that I don’t want to experiment with the cart block. But I am thinking ahead and wondering what will happen when this is a full roll-out. Will the shortcode continue to work? To change over to the cart block will it be a typical one-click ‘convert to blocks’ on the cart page?

Like

Hi David – we are still working on how we will “replace” the shortcodes – but to be clear – we are not there yet.

There are various permutations we need to think through – like brand new stores vs existing stores vs existing stores that have made customisations to their cart and checkouts – so there are lots of moving pieces we need to take into account.

Liked by 2 people

Please also add thank you page custimization feature … That is the most needed feature at the moment as we need to make our customers more loyal

Like

Hi Abdus – thanks for the feedback. We do have plans to allow customisation of the order confirmation page on our roadmap – the exact timing of that is still TBD.

Like

Hola! Excelente bloque! Están trabajando en la integración con mercadopago dentro del bloque? Supongo que además el bloque estara 100% traducido al español verdad? Excelente trabajo. Sigan así

Like

Hi Lucas – I’m using Google translate to help me reply to your comment:

Hola! Excelente bloque! Están trabajando en la integración con mercadopago dentro del bloque?

The creator of the mercadopago extension for WooCommerce would need to work on an integration for it with the blocks – I suggest reaching out to them here: https://wordpress.org/plugins/woocommerce-mercadopago/

Supongo que además el bloque estara 100% traducido al español verdad?

The blocks are translation ‘ready’: https://translate.wordpress.org/projects/wp-plugins/woo-gutenberg-products-block/ – they just need to actually be translated – I’d encourage you to contribute if possible.

Like

It works great but please this never replace classic checkout, it should be 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. please keep this as an optional feature. Thanks!

Like

Thanks for the feedback Daniel. Yes, the scenario you described is one of the things we will be taking into account as we plan out how we will make the blocks available for general use in the future.

Like

Thanks for the feedback. We will give consideration to how we handle this when we start looking at making these blocks parts of the WooCommerce core product experience.

Liked by 1 person

Thank you for the feedback. I personally really like the new design. So thumbs up for that. And until this becomes standard I might have made friends with Gutenberg at last …

Liked by 1 person

Love the new design – I’m really happy to see the checkout experience getting some much needed love.

Two things:

Will you be supporting account creation in these blocks anytime soon?
I know this is a much smaller use case than you’re probably working on, but I figured I’d share nonetheless. I have custom landing pages for some products, and I redirect customers to checkout by using “/checkout/?add-to-cart=” urls when they click the “Buy Now” buttons on the landing page.

However, I usually need these products to be limited to 1 per purchase – so I also have the “sold individually” setting checked on the product page. This is all fine and good, and everything works as expected – unless a customer clicks the “buy now” button, then returns to the landing page and happens to click it again. In this case, it gives them an error message telling them they need to go to the cart page to edit the cart before trying again. But it includes the full text of that alert, along with the tags for the button. e.g. “View cart You cannot add another “Rewards Kit – Standard” to your cart. Please edit your cart and try again.”

The old shortcode version of checkout handled this a little more gracefully – simply displaying the message above checkout, and allowing you to proceed right on the checkout page.

So I guess consider this a vote for updating how error messages are handled on the new checkout page.

Thanks!

Like

Thanks for the feedback.

Will you be supporting account creation in these blocks anytime soon?

This is on our backlog to add support for account creation in the blocks – you can subscribe to this blog if you want to get updates on new releases for the cart & checkout blocks.

I know this is a much smaller use case than you’re probably working on, but I figured I’d share nonetheless. I have custom landing pages for some products, and I redirect customers to checkout by using “/checkout/?add-to-cart=” urls when they click the “Buy Now” buttons on the landing page.

Thanks for reporting this issue. I have logged it here: https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/2670 as something for us to look into and provide a fix/solution for in a future release.

Like

i have one little issue of you can please help me: display variations attributes values as separate product in Woocommerce cart ( for me is very important to have the base product sepparate of the attributes). Thanks

Like

Can you perhaps explain what you are looking to achieve? Currently the cart does create separate line items in the cart based on the variations for the product – see screenshot below:

Variations in WooCommerce Cart block

That shows 4 different variations of the same product in the cart, based on selections made on the product page.

Like

The developers of that extension would need to work on an integration with the new cart and checkout blocks – I’d recommend reaching out to them directly.

Like

Thanks for the feedback. There is no plan to update the shortcodes to use what is being implemented in the blocks – we are investing in supporting Gutenberg and the future editing experience of WordPress.

Like

Understood, but if it does come up – would be great to get that tiered layout on the checkout, with the steps 1-4 back-ported, or possible to call via theme functions.

We build fairly locked down, design led sites – so at the moment Gutenberg doesn’t make sense for most of our clients ( too many options and design variance ). But guess at some point we’ll move to embrace it and lock down the options and blocks.

Like

“How about making check out a 2 step process. 1st step will collecting 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 would love to be able to change the qty or product after knowing final price.”

Like

Would love to use this but sadly the woocommerce product add-ons are not displayed in the cart or checkout pages

Like

Thanks for the feedback. We will be looking to add support for various extensions in future releases.

Like

Hi Abdullah – currently if you use a combination of these settings in WooCommerce:

Shipping settings

and

it will then show that shipping costs are calculated during the checkout – as per the screenshot below:

In this way, a customer still is still aware that there will be a shipping cost to be added during checkout.

We will look into the seeing if an option to potentially remove the Shipping line item from the cart completely makes sense.

Liked by 1 person

Hi Mika

The Cart and Checkout block strings (not the blocks themselves) were added to the main WooCommerce plugin for translation a few weeks ago: https://translate.wordpress.org/projects/wp-plugins/woocommerce/

This means that if the strings are more than 95% translated in the language you need – they should appear for you – are you seeing a German translation, or is it just that perhaps certain parts are not translated into German yet?

Like

Comments are closed.