CheckoutWC 9.0: Embracing React

We are excited to announce the release of CheckoutWC 9.0!

CheckoutWC 9.0 is a sea-change release, comprising many months of work and over 500 git commits. We rebuilt large portions of the plugin to leverage the power of React.

If that sentence scared you: No, CheckoutWC is not a Gutenberg block. These changes should be completely seamless and invisible to you as a developer or merchant. CheckoutWC is still the same CheckoutWC you know and love – it’s just faster now!

Using React For What It’s Good For

We originally built CheckoutWC like WooCommerce itself was built – using tried-and-true jQuery and PHP templates.

This is a tried and true formula – it works well enough, but it has some big limitations that we kept butting up against. Building reusable template components with jQuery and PHP is extremely onerous. For example, a component has a few dependencies:

• The markup
• The CSS
• The JavaScript behaviors
• The context it is displayed in

Even if you modularize each of those pieces, it’s very difficult to reuse components between the side cart and the checkout page – they operate in different environments with different dependencies.

With React, these problems go away. Components can be reused easily – you provide them the data they need and a way to update it in the broader context and you can deploy them quickly.

And not only do components become more reusable, they self-manage their own state. That means no more clunky jQuery surgery – you provide the new data and the component instantly and automatically updates itself.

But enough engineering talk, let’s talk about how we leveraged React to make CheckoutWC better!

Trust Badge Templates

With CheckoutWC 9.0, we added a long requested feature: Trust Badge Templates

We currently have two built-in templates with more on the way:

• Guarantee: This is the original template. It’s great for establishing customer trust. Satisfaction guaranteed, and any other reassurance that will help your customers get past their fear of buying your products.
• Review: An all new template that helps you provide social proof to your customers. People like me buy stuff like this!

Here is what it looks like in the admin editor:

Because these templates are built with React, we can use them to show a live, completely accurate representation of what they look like on the front end. It’s not even a representation – this is the actual template that is used to display your badges on the checkout page.

Better Mobile Checkouts

Since version 1.0, we have had many versions of the same question:

“How can I make the cart visible on mobile?”

“My customers can’t figure out where to enter their coupons on mobile”

“Can we automatically open the cart summary on mobile so that customers can see their cart without looking for it?”

We developed a few workarounds to address these problems, but they were all compromises.

But it’s 2024 and our cart is now a React component, which means we can deploy it wherever we need it, with wild abandon. (Ok, maybe not with wild abandon – but you get my point)

With CheckoutWC 9.0, you can now enable a mobile cart that’s easily accessible on the first step of checkout:

No more compromises or workarounds: Mobile users now get the same cart features that desktop users get.

Searchable Admin Pages

We rebuilt (almost) all of the admin settings pages with React. They are now fully searchable:

Full Screen Order Bumps

With CheckoutWC 8.0, we added the ability to setup Order Bumps as Post Purchase Upsells. These bumps are displayed in a modal window after the customer clicks Place Order.

With 9.0, we extended this feature. You can now opt to make your Order Bumps full screen and design the bump using the WordPress Block Editor (Gutenberg).

To accomplish this, we added a new Gutenberg block: Order Bump Offer Form

When selecting the full-screen option, you can build a landing page with the block editor and drop the Order Bump Offer Form into the page.

Automatically Add Order Bumps

We have added a new option to Order Bumps – you can now set an Order Bump to be added to the cart automatically.

This is useful for all sorts of offers and promotions.

If the Order Bump requires selecting options (such as choosing a product variation), the bump will be displayed in a modal window.

If the customer removes the bump, it will stay removed.

Auto Select Free Shipping

Ok, let’s stop gushing over React and talk about some other features.

A question we get all of the time: How can I make sure free shipping is automatically selected when a customer becomes eligible for it?

WooCommerce simply doesn’t have a good solution for this, so we decided to solve it ourselves.

With Auto Select Free Shipping, we listen for events like add to cart or updates to checkout and automatically apply free shipping if it is available.

If free shipping was already available before one of these events, we respect the shipping method selected by the user.

Simplified Local Pickup Configuration

Local Pickup with WooCommerce has always been a bit of a conundrum. Local Pickup is a shipping method – but it’s not for shipping.

Because of this, setting up our Local Pickup has always been a bit complicated: Every shipping zone had to have a local pickup “shipping” method setup or the feature would not work properly.

In CheckoutWC 9.0, we fixed this: We now automatically ad an ad hoc local pickup method to every zone that does not have one.

If you want to fully control it, you are welcome to setup your own. For example, if you charge for Local Pickup you can still do that. But for most everyone else, you can now turn on Local Pickup and go – no more configuration oddities!

New feature: Hide Billing Address For Free Orders

We’ve added a new feature for the checkout page that allows you to hide the billing address fields if an order is free and virtual (doesn’t require shipping)

The billing first name and last name are always required – it would not be good to collect orders anonymously!

New: Abandoned Cart Recovery Email Templates

We now include a series of three emails as a template to help you get started.

If you already have CheckoutWC installed, simply deactivate and reactivate the plugin and if you don’t have any existing emails configured, we’ll add the template emails as drafts.

Express Checkout and Gateway Problem Detection

CheckoutWC works with virtually all WooCommerce gateways, but it works better with some than others.

If you’re using a gateway that is not ideally suited for CheckoutWC, we proactively notify you and make it easy to install a better supported gateway.

We also added a new Express Checkout admin settings page. We often get asked why express checkout buttons are not appearing on the checkout page, and how to enable them.

The Express Checkout settings page shows a list of the gateways we know about and indicates whether express checkout is supported, as well as providing recommendations for alternatives or configuration steps.

We want to make setting up CheckoutWC as seamless as possible – this is just one of the many ways we are making good on that commitment.

CheckoutWC 9.0 Changelog

There is much more to CheckoutWC 9.0 than we have listed here – more new features and improvements. To learn about them all, you can read our full changelog here:

• New – Checkout and Side Cart now use React for most components: The result is a faster, more responsive UI for customers.
• New – All admin settings pages are now built with React and filterable: Spend less time hunting for the setting you need.
• New – All new Trust Badges Editor with templates and live previews: Choose between Guarantee (the standard) and Review (for testimonials, etc).
• New – All new Order Bumps Editor with live preview: Now uses the Gutenberg block editor. (All settings are in the sidebar).
• New – Full Screen Order Bumps: When using After Checkout Submit bumps (Post Purchase Upsells), you can use the Block Editor to design a fullscreen landing page. Use the Order Bump Offer Form block to provide customers with the acceptance form.
• New – Mobile Cart Summary: New option under CheckoutWC > Pages > Checkout > Mobile Options. The mobile cart summary appears on the Information step at the bottom.
• New – Order Bumps Preview: See what your Order Bump will look like as you make edits.
• New – Free Shipping Progress Bar at Checkout: Added new option to enable Free Shipping Progress Bar at checkout.
• New – ACR Email Templates: On plugin activation, if no existing ACR emails are published, we add three starter template emails as drafts.
• New – New Hide Billing Address For Free Orders feature: You can enable it here: CheckoutWC > Pages > Checkout.
• New – Order Bumps Auto Add: You can now configure an Order Bump to automatically be added when conditions are met. If a customer removes the bump from the cart, it will not be readded.
• New – Express Checkout admin page: Express Checkout settings allow you to disable Express Checkout. We also show a table with your detected gateways and information about whether they support CheckoutWC Express Checkout. (Does not currently include all gateways, just ones we have some level of integration with.)
• New – Gateway Problem Detection: If you’re using a gateway that has problems with CheckoutWC, we’ll show you an admin notice with recommended fixes.
• New – Added warning notices for themes that need extra configuration with a link to the doc site.
• New – New option to show the order total above the complete order button on mobile: (CheckoutWC > Pages > Checkout > Mobile Options)
• New – Store Policy links now dynamically load content instead of preloading on the page. (No more Elementor bug!)
• New – You can now match the Order Bump Offer Product quantity to the search product.
• New – New Abandoned Cart Recovery setting to disable email sending (but still track carts).
• New – If Local Pickup is enabled and a shipping zone does not have a local pickup method, we add an ad-hoc one. This greatly simplifies configuration.
• New – Discreet capabilities for managing user access to admin settings.
• New – OwnID integration (still requires OwnID plugin). Now works with the hide password field option.
• New – Added new setting to disable email domain autocomplete.
• New – Added a bypass template button to the admin bar for quick debugging.
• New – When templates are disabled either through the setting or license problems, a notice is displayed at checkout so that admins don’t mistakenly think everything is working fine.
• Improved – Tweaked the Start Here settings page.
• Improved – For free, non-shipped orders the Hide Billing Address Fields For Free Orders feature will show the billing first and last name fields.
• Improved – Improved wording for free orders – instead of ‘Continue to payment’ it will now say ‘Review order’.
• Improved – Proceed to checkout button in the side cart is a link again.
• Improved – Added warning when enabling Discreet Address Fields feature with Google Address Autocomplete.
• Improved – Added notice when ACR is enabled but no emails are published.
• Improved – Renamed Cart Summary options to Global Options. Moved Cart Editing settings to Checkout options. Moved Store Policies to Global Options.
• Improved – When a change at checkout switches an order from paid to free or vice versa, reload the page.
• Improved – Refactored activation and database migrations. Now prevents running the same update twice.
• Improved – When no detected gateways are present, show a notice with a link to our recommended express checkout gateways.
• Improved – We now force Pimwick Gift Cards to use the right redeem location for CheckoutWC. No more extra configuration.
• Improved – We now fix the Elementor bug that causes Store Policies to be hijacked when the checkout page was previously built with CheckoutWC. No more recreating the checkout page!
• Improved – Distinguish between invalid and inactive license notices.
• Improved – Most notices are now dismissible.
• Improved – Refactored JS init. No more monster singletons and assets are now split into smaller chunks for faster loading.
• Improved – Added cfw_order_pickup_location_info shortcode for displaying pickup location information in emails.
• Fix – Fix bug that prevented WooCommerce Gift Cards notices from displaying.
• Fix – Fix issue with alerts getting preserved if there are no new alerts to show. Also simplify the logic for handling preserving alerts on page load.
• Fix – If paragraph tags exist in order bump description, apply margin-bottom so they look good.
• Fix – Errors updating checkout weren’t generating a notice.
• Fix – Handle 1/123 and 1-123 address formats for Google Autocomplete and Canadian addresses better.
• Fix – Hide extra ‘Return to shipping’ link created by Divi.
• Fix – Fix bug that allowed the express checkout options to show up for free orders.
• Fix – Don’t export CheckoutWC Lite settings if they exist during settings export.
• Fix – Fix incorrect German translations and update JSON translation files for scripts.
• Fix – Fix error in French translation.
• Fix – Fix styling issues with row layout of trust badges.
• Fix – Protect against fatal error caused by Woo Discount Rules.
• Fix – Fix styling of Payment Plugin gateway mini-cart buttons when multiple buttons are enabled.
• Fix – Fix bug that prevented extracted WordPress dependencies from loading.
• Fix – Fix bug with WooCommerce Custom Product Addons that caused product add-on data to be lost when restoring abandoned cart.
• Fix – Fix side cart shortcode availability on checkout page for those who have custom headers.
• Fix – Allow Flatsome to load swatches feature on checkout page.
• Fix – Prevent out-of-stock cross sells from being displayed as a suggested products in the Side Cart.
• Fix – Protect against bumps in invalid states in the cart.
• Fix – Fix WooCommerce Stripe Gateway express button css issue.
• Dev – Removed deprecated action: cfw_before_customer_info_tab_login.
• Dev – Removed deprecated filter: cfw_cart_html.
• Dev – Added cfw_billing_address_same_as_shipping_label filter for same as shipping label.
• Dev – Added cfw_billing_address_different_address_label filter for use different address label.
• Dev – If adding to the cart fails, add #cfw-cart to the redirect URL so that the side cart opens to display the error.
• Dev – Added a default install value for the Hide Billing Address For Free Orders feature.
• Dev – Removed left over Slick.js script.
• Dev – Added filter to suggested products: cfw_get_suggested_products.
• Dev – Cart data package actions are now preprocessed with fragment updates.
• Dev – Data Upgrader is set to use internal beta build numbers instead of 9.0 to avoid unnecessary runs.
• Dev – Merge changes from 8.2.26.
• Dev – Added cfw_get_logo_attachment_id filter.
• Dev – Using Strauss to namespace all required composer packages for maximum compatibilty.
• Dev – Minimum PHP version is now 7.4 (but it should work with PHP 7.3+).
• Dev – Releases are now tested against PHP 7.3 and PHP 8.3.
• Dev – Add filter cfw_default_billing_address_radio_selection for default selected option for billing address radio group.
• Dev – Add filter cfw_acr_carts for currency plugins to correct currencies in admin dashboard.
• Dev – Removed some unused npm packages.
• Dev – Added debug logging to Abandoned Cart Recovery.
• Dev – Added Requires Plugin header for WordPress 6.5.
• Dev – Dropped customizer support. It was out of date and WordPress is moving away from the customizer.

Previous Article

WooCommerce Security – How to protect your store

Next Article

Next Article