I had the honor to speak at WCEU 2020 thanks to WooCommerce, who hosted me in their Sponsor track. It was a short and sweet lightning talk on the first day (Friday), called “Customizing The WooCommerce Checkout To Improve Conversions“, followed by a live coding session on Saturday.

Here’s the video recording of the lightning talk, as well as a few PHP and CSS snippets you can copy/paste to improve your WooCommerce Checkout and immediately expect an increase in conversion rate. So, enjoy the video and then go test the snippets you find below!

Video: Customizing The WooCommerce Checkout To Improve Conversions

The WooCommerce Checkout is the most important page of your website. Which means, you’ve got to optimize it.

In this presentation, I take a look at successful ecommerce B2C websites and see what they do. Maybe we can identify trends and weaknesses and get to work on that.

Please note there are subtitles available. Simply click on the “CC” button in the bottom right of the video player.

10 PHP & CSS WooCommerce Checkout Conversion Rate Optimization Snippets

In the follow-up session, I shared my screen and started live coding what we learned during the lightning talk. In a nutshell, we decided to take action on the following points:

  1. Remove header, sidebar, footer so there are no distractions and customer is fully focused on the only remaining call to action – the “PAY” button
  2. Move the order summary, shipping and payment method selection to the right hand side so it’s always visible
  3. Split the long layout made of billing, shipping, order notes, coupon form etc. in visual steps
  4. Move coupon form to the bottom to avoid coupon fraud
  5. Keep the shipping form always “open” as that’s the most important section for B2C
  6. Move the billing form below shipping form
  7. Remove unnecessary billing/shipping fields; the more fields the lower your conversion rate!
  8. Make the shipping method selection stand out more, because the default layout is quite poor
  9. Add an “edit cart” link so users can go back to the Cart page and edit their order
  10. Add security badges / phone / FAQs to let the customer trust your online business

But before coding, let’s take a look at the tools stack.

Theme: I used the official WooCommerce theme, Storefront. This already comes with some inbuilt CSS customization for the checkout. Another fav of mine could have been Shoptimizer, a theme built for WooCommerce speed and conversions. Anyhow, because one of the snippets is about removing header and footer from the checkout page, I therefore used my Storefront theme visual hook guide, so I know which hooks to use.

Hooks: on top of using my visual hook guide for Storefront, we also require to know all the WooCommerce Checkout hooks. My WooCommerce Visual Hook Guide for the Checkout Page is perfect for what we need.

Docs: WooCommerce has a nice document that explains how to customize checkout fields. In one of the snippets we will remove some of the billing/shipping fields, so this is a must-know reference.

1. Remove header, sidebar and footer @ Checkout page

This snippet is valid for the Storefront theme only. You will need to adjust the code for your customized theme.

/**
 * @snippet       Storefront Theme Remove Header Footer @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'wp', 'bbloomer_unhook_storefront_functions' );

function bbloomer_unhook_storefront_functions() {
	if ( is_checkout() ) {
		remove_all_actions( 'storefront_header' );
		remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
		remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
		remove_action( 'storefront_footer', 'storefront_footer_widgets', 10 );
	}
}

On Storefront, once you remove the sidebar with the above remove_action call, the layout won’t automatically adjust to full-width. The sidebar will go away but it’s “space” will remain there and push the checkout form to the left.

That means we also need a bit of CSS to fix that:

@media (min-width: 768px) {
	.woocommerce-checkout.right-sidebar .content-area {
		width: 100%;
		float: none;
		margin-right: 0;
	}
}

2. Move Order Review To Top Right @ Checkout page

The Storefront theme already does that out of the box! So, it seems they studied ecommerce trends as well and decided that was the right choice.

Of course, most themes do not do that by default. For inspiration, you can try copying Storefront’s CSS (you may need to change some selectors):

@media (min-width: 768px) {

	/* Billing & Shipping @ Left */

	.col2-set {
		width: 52.9411764706%;
		float: left;
		margin-right: 5.8823529412%;
	}

	/* Order Review @ Right */

	#order_review_heading, #order_review {
		width: 41.1764705882%;
		float: right;
		margin-right: 0;
		clear: right;
	}

}

Now, I’d also like to make the whole Order Review “sticky”. Which means, once a user scrolls down to fill out checkout fields for example, the Order Review box (now on the top right) should stay visible and “fixed” to the top of the browser.

I’ve tried the following CSS but unfortunately it doesn’t seem to work (Storefront theme). Can you help maybe?

#order_review {
    position: sticky;
    top: 0;
}

3. Move coupon form to the bottom

We can use the Visual hook guide for the checkout for this. First, we remove it, then we readd it at the very bottom.

/**
 * @snippet       Move Coupon @ Checkout Bottom
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

4. Keep the shipping form always “open”

Thankfully if you look at form-shipping.php template file, WooCommerce gives us a filter here:

apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 )

Which means I can now code a simple PHP snippet to override that behavior:

/**
 * @snippet       Shipping Always Open @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_ship_to_different_address_checked', 'bbloomer_open_shipping_checkout' );

function bbloomer_open_shipping_checkout() {
	return 1;
}

5. Move the billing form below shipping form

First of all, Billing and Shipping forms must be made full-width. Storefront theme already does that, so in case you’re using another theme, try with this:

.col2-set .col-1, .col2-set .col-2 {
	float:none;
	width: 100%
	margin: 0;
}

Once you have Billing and Shipping one above the other, we want now to feature the Shipping form first (top) and Billing form after (bottom). Doing this with PHP is possible, but there is a much neater way to accomplish it: CSS flex.

.col2-set {
    display: flex;
    flex-direction: column;
}

.col2-set > .col-1 {
	order: 2; 
}

.col2-set > .col-2 {
	order: 1; 
}

In a nutshell, I’m declaring that the customer details (Billing & Shipping forms wrapper) displays as “flex”. In this way, I can use the “order” property and switch the vertical order of the Billing and Shipping divs.

6. Split the long layout made of billing, shipping, order notes, coupon form etc. in visual steps

Here we use once again the visual hook guide, and print 3 new divs in specific positions (above shipping, above billing, above order review).

/**
 * @snippet       Add Visual Steps @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_checkout_shipping', 'bbloomer_checkout_step1' );

function bbloomer_checkout_step1() {
	echo '<p class="steps">STEP1</p>';
}

add_action( 'woocommerce_checkout_billing', 'bbloomer_checkout_step2' );

function bbloomer_checkout_step2() {
	echo '<p class="steps">STEP2</p>';
}

add_action( 'woocommerce_checkout_before_order_review_heading', 'bbloomer_checkout_step3' );

function bbloomer_checkout_step3() {
	echo '<p class="steps">STEP3</p>';
}

Of course we also need some CSS:

.steps {
	background: black;
	color: white;
	display: inline-block;
	padding: 0.5em 2em;
}

7. Remove unnecessary billing/shipping fields

Here, the documentation reference I shared above comes to the rescue. The “woocommerce_checkout_fields” filter allows us to “unset” fields we don’t need.

/**
 * @snippet       Remove Ship/Bill Fields @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
	
     unset( 
		 $fields['order']['order_comments'], 
		 $fields['shipping']['shipping_company'],
		 $fields['shipping']['shipping_address_2'],
		 $fields['billing']['billing_company'],
		 $fields['billing']['billing_address_2'],
		 $fields['billing']['billing_postcode'],
		 $fields['billing']['billing_phone']
     );

     return $fields;
}

8. Make the shipping method selection stand out more

Didn’t have time to code this. Will do at some stage 🙂

9. Add an “edit cart” link

Didn’t have time to code this. Will do at some stage 🙂

10. Add security badges / phone / FAQs

Didn’t have time to code this. Will do at some stage 🙂

Share:

Leave a Reply