How to Customize Woocommerce Checkout page? 31 useful hacks
September 4, 2024
In this post I’m going to show you how to customize Woocommerce checkout page. Those 28 hacks shown here below are really useful for every Woocommerce shop, and they are really easy to use.
In order to use all those snippets shown in this post you need add them inside your child theme’s functions.php file or better yet, use Code Snippets plugin. This way you’re not going to lose these modifications in case you’re switching your theme.
There is also a WpCodeBox plugin, which is my favorite code snippets manager for WordPress. This is a premium plugin and if you’re interested, then grab WPCodeBox with a nice 20% discount here (SAVE 20% Coupon WPSH20).
Also, take a look at the video tutorial here below and then it will probably be a bit easier to understand what is what.
Video: How to Customize Woocommerce Checkout page
I strongly suggest you to watch this video first because it will make your life a bit easier. In the video I am showing how to customize Woocommerce checkout page and implement all those hacks and modifications.
How to Auto check “Create account” field in Woocommerce Checkout page?
Lets start with the simple hack which allows you to auto check “Create account” field in Woocommerce checkout page. Just use this snippet and the result is like the one in the screenshot.
// Auto check "Create account" field in Woocommerce Checkout pageadd_filter('woocommerce_create_account_default_checked' , function ($checked){returntrue;});
How to add “Continue shopping” button in Woocommerce checkout page?
Take a look at the screenshot below and you will see what kind of “Continue shopping” button is added with the help of this snippet.
<span role="button" tabindex="0" data-code="// Add "Continue shopping" button in Woocommerce checkout page?
add_action( 'woocommerce_before_checkout_form', 'continue_shopping_button' );
function continue_shopping_button() {
$shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );
echo '<div class="woocommerce-message">';
echo ' <a href="'.$shop_page_url.'" class="button">Continua shopping →</a> Did you forget something to add?';
echo '
// Add "Continue shopping" button in Woocommerce checkout page?add_action( 'woocommerce_before_checkout_form', 'continue_shopping_button' );functioncontinue_shopping_button() { $shop_page_url =get_permalink( woocommerce_get_page_id( 'shop' ) );echo'<div class="woocommerce-message">';echo' <a href="'.$shop_page_url.'" class="button">Continua shopping →</a> Did you forget something to add?';echo'</div>';}
How to add Custom Woocommerce Checkout Message?
Now let’s take a look how to customize Woocommerce checkout page with the custom message.
This snippet here below adds custom Woocommerce checkout message on top of the checkout page. Just replace the message content (“Estimated delivery time: 2 weeks”) accordingly.
How to display a Woocommerce checkout message for specific country?
Previous snippet showed custom message on top of the Woocommerce checkout page but this message is shown only if specific country is chosen. For example, if you choose United Kingdom as you country then “Please allow 5-10 business days for delivery after order processing.” message is shown on top of the Woocommerce checkout form.
Just replace your country code in line 17 (Currently set to EE) and message content and you’re good to go. Pay attention though that this snippet here shows ONE message for ONE specific country. If you would like to show the same message for multiple countries, then see the next snippet.
<span role="button" tabindex="0" data-code="// Display a Woocommerce checkout message for specific country
add_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );
function display_shipping_notice() {
echo '<div class="shipping-notice woocommerce-message" role="alert" style="display:none">Please allow 5-10 business days for delivery after order processing.</div>';
}
add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );
function show_shipping_notice_js(){
?>
<script>
jQuery(function($){
countryField = 'select#billing_country'; // The Field selector to target
var countryCode = $(countryField).val();
/* Change the country code EE accordingly */
function showHideShippingNotice( countryCode, countryField ){
if( $(countryField).val() === 'EE'
){
$('.shipping-notice').show();
}
else {
$('.shipping-notice').hide();
}
}
// On Ready (after DOM is loaded)
showHideShippingNotice( countryCode, countryField );
// On billing country change (Live event)
$('form.checkout').on('change', countryField, function() {
showHideShippingNotice( countryCode, countryField );
});
});
</script>
// Display a Woocommerce checkout message for specific countryadd_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );functiondisplay_shipping_notice() {echo'<div class="shipping-notice woocommerce-message" role="alert" style="display:none">Please allow 5-10 business days for delivery after order processing.</div>';}add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );functionshow_shipping_notice_js(){?><script>jQuery(function($){countryField='select#billing_country'; // The Field selector to targetvarcountryCode= $(countryField).val();/* Change the country code EE accordingly */functionshowHideShippingNotice( countryCode, countryField ){if( $(countryField).val() ==='EE' ){ $('.shipping-notice').show(); }else { $('.shipping-notice').hide(); } }// On Ready (after DOM is loaded)showHideShippingNotice( countryCode, countryField );// On billing country change (Live event) $('form.checkout').on('change', countryField, function() {showHideShippingNotice( countryCode, countryField ); }); });</script><?php}
So, with the help of this snippet here below you can display the same message for the multiple countries. So, once again, go to line 17 which contains your first country (currently EE). Now add additional country by adding this line
|| $(countryField).val() === 'FI' .
If you need to add more countries then just repeat this step.
Once again, don’t forget to change the country code. So, if you take a look at the full snippet then you’ll see that it displays a Woocommerce checkout message for multiple countries.
<span role="button" tabindex="0" data-code="// Display a Woocommerce checkout message for multiple countries
add_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );
function display_shipping_notice() {
echo '<div class="shipping-notice woocommerce-message" role="alert" style="display:none">Please allow 5-10 business days for delivery after order processing.</div>';
}
add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );
function show_shipping_notice_js(){
?>
<script>
jQuery(function($){
countryField = 'select#billing_country'; // The Field selector to target
var countryCode = $(countryField).val();
// On Ready (after DOM is loaded)
showHideShippingNotice( countryCode, countryField );
// On billing country change (Live event)
$('form.checkout').on('change', countryField, function() {
showHideShippingNotice( countryCode, countryField );
});
});
</script>
// Display a Woocommerce checkout message for multiple countriesadd_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );functiondisplay_shipping_notice() {echo'<div class="shipping-notice woocommerce-message" role="alert" style="display:none">Please allow 5-10 business days for delivery after order processing.</div>';}add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );functionshow_shipping_notice_js(){?><script>jQuery(function($){countryField='select#billing_country'; // The Field selector to targetvarcountryCode= $(countryField).val();functionshowHideShippingNotice( countryCode, countryField ){if( $(countryField).val() ==='EE'|| $(countryField).val() ==='FI'|| $(countryField).val() ==='LV' ){ $('.shipping-notice').show(); }else { $('.shipping-notice').hide(); } }// On Ready (after DOM is loaded)showHideShippingNotice( countryCode, countryField );// On billing country change (Live event) $('form.checkout').on('change', countryField, function() {showHideShippingNotice( countryCode, countryField ); }); });</script><?php}
How to display different Woocommerce checkout messages for different countries?
What if you would like to display different Woocommerce checkout messages for different countries? Well, take a look at the snippet below. PS! Be sure to take a look at the comments inside the snippet
<span role="button" tabindex="0" data-code="// Display different Woocommerce checkout messages for different countries
add_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );
function display_shipping_notice() {
/* Message for EE (see CSS class shipping-notice) */
echo '<div class="shipping-notice woocommerce-message" role="alert" style="display:none">Please allow 5-10 business days for delivery after order processing.</div>';
/* Message for FI (see CSS class shipping-notice-fi) */
echo '<div class="shipping-notice-fi woocommerce-message" role="alert" style="display:none">Please allow 20-30 business days for delivery after order processing.</div>';
/* Message for EE (see CSS class shipping-notice-lv) */
echo '<div class="shipping-notice-lv woocommerce-message" role="alert" style="display:none">Please allow 50 business days for delivery after order processing.</div>';
}
add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );
function show_shipping_notice_js(){
?>
<script>
jQuery(function($){
countryField = 'select#billing_country'; // The Field selector to target
var countryCode = $(countryField).val();
function showHideShippingNotice( countryCode, countryField ){
if( $(countryField).val() === 'EE' // Change the country code
){
$('.shipping-notice').show(); // Display for EE
$('.shipping-notice-fi').hide(); // Hide for FI
$('.shipping-notice-lv').hide(); // Hide for LV
} else if( $(countryField).val() === 'FI' // Change the country code
){
$('.shipping-notice-fi').show(); // Display for FI
$('.shipping-notice').hide(); // Hide for EE
$('.shipping-notice-lv').hide(); // // Hide for LV
} else if( $(countryField).val() === 'LV' // Change the country code
){
$('.shipping-notice-lv').show(); // Display for LV
$('.shipping-notice').hide(); // Hide for EE
$('.shipping-notice-fi').hide(); // Hide for FI
} else {
/* Hide these messages for any other countries */
$('.shipping-notice').hide();
$('.shipping-notice-fi').hide();
$('.shipping-notice-lv').hide();
}
}
// On Ready (after DOM is loaded)
showHideShippingNotice( countryCode, countryField );
// On billing country change (Live event)
$('form.checkout').on('change', countryField, function() {
showHideShippingNotice( countryCode, countryField );
});
});
</script>
// Display different Woocommerce checkout messages for different countriesadd_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );functiondisplay_shipping_notice() {/* Message for EE (see CSS class shipping-notice) */echo'<div class="shipping-notice woocommerce-message" role="alert" style="display:none">Please allow 5-10 business days for delivery after order processing.</div>';/* Message for FI (see CSS class shipping-notice-fi) */echo'<div class="shipping-notice-fi woocommerce-message" role="alert" style="display:none">Please allow 20-30 business days for delivery after order processing.</div>';/* Message for EE (see CSS class shipping-notice-lv) */echo'<div class="shipping-notice-lv woocommerce-message" role="alert" style="display:none">Please allow 50 business days for delivery after order processing.</div>';}add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );functionshow_shipping_notice_js(){?><script>jQuery(function($){countryField='select#billing_country'; // The Field selector to targetvarcountryCode= $(countryField).val();functionshowHideShippingNotice( countryCode, countryField ){if( $(countryField).val() ==='EE'// Change the country code ){ $('.shipping-notice').show(); // Display for EE $('.shipping-notice-fi').hide(); // Hide for FI $('.shipping-notice-lv').hide(); // Hide for LV } elseif( $(countryField).val() ==='FI'// Change the country code ){ $('.shipping-notice-fi').show(); // Display for FI $('.shipping-notice').hide(); // Hide for EE $('.shipping-notice-lv').hide(); // // Hide for LV } elseif( $(countryField).val() ==='LV'// Change the country code ){ $('.shipping-notice-lv').show(); // Display for LV $('.shipping-notice').hide(); // Hide for EE $('.shipping-notice-fi').hide(); // Hide for FI } else {/* Hide these messages for any other countries */ $('.shipping-notice').hide(); $('.shipping-notice-fi').hide(); $('.shipping-notice-lv').hide(); } }// On Ready (after DOM is loaded)showHideShippingNotice( countryCode, countryField );// On billing country change (Live event) $('form.checkout').on('change', countryField, function() {showHideShippingNotice( countryCode, countryField ); }); });</script><?php}
How to Show backorder notification at Woocommerce checkout page
Some of my customer have complained that they did not realize that they ordered a product which was not in stock and was available only on backorder. Since I wanted to made it less confusing for them I added this snippet here below which shows backorder notification in Woocommerce checkout page. hence, I’m going to show you how to customize Woocommerce checkout page with this little hack.
As you see from the screenshot below it outputs this message styled as error message. If you want it to show as default Woocommerce message notification then replace ‘error’ with ‘notice’
<span role="button" tabindex="0" data-code="// Show Woocommerce backorder notification in checkout page
add_action( 'woocommerce_before_checkout_form', 'show_backorder_checkout_notice' );
function show_backorder_checkout_notice() {
$found = false;
foreach( WC()->cart->get_cart() as $cart_item ) {
if( $cart_item['data']->is_on_backorder( $cart_item['quantity'] ) ) {
$found = true;
break;
}
}
if( $found ) {
// Change this text here. If you want it to show as default Woocommerce message notification then replace 'error' with 'notice'
wc_print_notice( __("<strong>You have products in the cart that are available only in backorder.</strong>
// Show Woocommerce backorder notification in checkout pageadd_action( 'woocommerce_before_checkout_form', 'show_backorder_checkout_notice' );functionshow_backorder_checkout_notice() { $found =false;foreach( WC()->cart->get_cart() as $cart_item ) {if( $cart_item['data']->is_on_backorder( $cart_item['quantity'] ) ) { $found =true;break; } }if( $found ) {// Change this text here. If you want it to show as default Woocommerce message notification then replace 'error' with 'notice'wc_print_notice( __("<strong>You have products in the cart that are available only in backorder.</strong><br> For those products estimated delivery time is 2-3 weeks.", "woocommerce"), 'error' ); }}
How to set Minimum Order Amount in WooCommerce?
With the help of this snippet here below we will set a minimum order amount in Woocommerce to 1000 euros and will display an error message on the cart and checkout pages if the conditions are not met (see the screenshot). Just replace the amount inside the code accordingly.
<span role="button" tabindex="0" data-code="// Set Minimum Order Amount in WooCommerce
add_action( 'woocommerce_checkout_process', 'wc_minimum_order_amount' );
add_action( 'woocommerce_before_cart' , 'wc_minimum_order_amount' );
function wc_minimum_order_amount() {
$minimum = 1000; // Set this variable to specify a minimum order value
if ( WC()->cart->total
// Set Minimum Order Amount in WooCommerceadd_action( 'woocommerce_checkout_process', 'wc_minimum_order_amount' );add_action( 'woocommerce_before_cart' , 'wc_minimum_order_amount' );functionwc_minimum_order_amount() { $minimum =1000; // Set this variable to specify a minimum order valueif ( WC()->cart->total < $minimum ) {if( is_cart() ) {wc_print_notice( sprintf( 'Your current order total is %s — you must have an order with a minimum of %s to place your order ' , wc_price( WC()->cart->total ), wc_price( $minimum ) ), 'error' ); } else {wc_add_notice( sprintf( 'Your current order total is %s — you must have an order with a minimum of %s to place your order' , wc_price( WC()->cart->total ), wc_price( $minimum ) ), 'error' ); } }}
How to Display Product Images at Woocommerce Checkout Page?
Next, let’s take a look how to customize Woocommerce checkout page with the product images. By default Woocommerce doesn’t show product images at checkout page but if you would like to change it then use this snippet here below.
How to display product attributes in Woocommerce checkout page?
Now, if you would like to display product attributes in Woocommerce checkout page then use this snippet here below. It will also output the attributes on your Woocommerce cart page.
How to auto-apply coupon at Woocommerce Checkout Page using URL?
Today I will give you two options how to auto-apply coupon at Woocommerce checkout page. First snippet here below allows you to add a copun using url.
Step 1: add the code snippet
// Auto-apply coupon at Woocommerce Checkout Page using URLfunctionenable_woocommerce_coupon_links(){if (!function_exists('WC') ||!WC()->session) {return; } $query_var =apply_filters('woocommerce_coupon_links_query_var', 'coupon_code');// Bail if a coupon code isn't in the query string.if (empty($_GET[$query_var])) {return; }// Set a session cookie to persist the coupon in case the cart is empty.WC()->session->set_customer_session_cookie(true);// Apply the coupon to the cart if necessary.if (!WC()->cart->has_discount($_GET[$query_var])) {// WC_Cart::add_discount() sanitizes the coupon code.WC()->cart->add_discount($_GET[$query_var]); }}add_action('wp_loaded', 'enable_woocommerce_coupon_links', 30);add_action('woocommerce_add_to_cart', 'enable_woocommerce_coupon_links');
Step 2: Use URL that contains your coupon code
For example, if you have a coupon test20 and you use URL https://yoursite.com/checkout/?coupon_code=test20 then your coupon is automatically applied. Don’t forget to change your coupon code accordingly.
Step 2 (optional): add button that auto-.applies coupon code to your Woocommerce checkout page
This snippet here below adds heading “Do you want 20% discount?” along with the button to your review order form. If user clicks on the button then this Woocommerce coupon is auto-applied. See the screenshot.
<span role="button" tabindex="0" data-code="// Auto-apply coupon at Woocommerce Checkout Page using button
add_action( 'woocommerce_review_order_before_payment', 'coupon_button', 10 );
function coupon_button() {
echo '<h4>Do you want 20% discount?</h4>';
echo '<p><a class="button" href="?coupon_code=test20"> Click to add your discount </a>
// Auto-apply coupon at Woocommerce Checkout Page using buttonadd_action( 'woocommerce_review_order_before_payment', 'coupon_button', 10 );functioncoupon_button() {echo'<h4>Do you want 20% discount?</h4>';echo'<p><a class="button" href="?coupon_code=test20"> Click to add your discount </a></p>'; // Change the coupon code accordingly}
How to Apply a Woocommerce Coupon for Minimum Cart Total?
This is a slightly different approach than previous one. In this example we will set up a coupon called test20 and it will give 20% discount for orders with minimum 50 euros cart total.
Now, if the cart total is less than 50 euros then message “Get 20% off if you spend more than 50 euros” is automatically shown on Woocommerce cart and Checkout pages. If the minimum cart total is more than 50 euros then this coupon is automatically applied and “You just got 20% off your order!” is shown ( see the screenshot).
<span role="button" tabindex="0" data-code="// Apply a Woocommerce Coupon for Minimum Cart Total
add_action( 'woocommerce_before_cart' , 'add_coupon_notice' );
add_action( 'woocommerce_before_checkout_form' , 'add_coupon_notice' );
function add_coupon_notice() {
$cart_total = WC()->cart->get_subtotal();
$minimum_amount = 50; // Set your minimum cart total
$currency_code = get_woocommerce_currency();
wc_clear_notices();
if ( $cart_total
// Apply a Woocommerce Coupon for Minimum Cart Totaladd_action( 'woocommerce_before_cart' , 'add_coupon_notice' );add_action( 'woocommerce_before_checkout_form' , 'add_coupon_notice' );functionadd_coupon_notice() { $cart_total =WC()->cart->get_subtotal(); $minimum_amount =50; // Set your minimum cart total $currency_code =get_woocommerce_currency();wc_clear_notices();if ( $cart_total < $minimum_amount ) {WC()->cart->remove_coupon( 'test20' ); // Replace your copuon code.wc_print_notice( "Get 20% off if you spend more than $minimum_amount$currency_code!", 'notice' ); } else {WC()->cart->apply_coupon( 'test20' );wc_print_notice( 'You just got 20% off your order!', 'notice' ); }wc_clear_notices();}
How to remove Woocommerce “Have a coupon?” section from checkout page?
In this part I’m going to show you how to customize Woocommerce checkout page by removing “Have a coupon” section.
First option, go to Woocommerce >> Settings and uncheck “Enable the use of coupon codes” option. This will disable coupon codes site-wide.
Second option, If you would like to use coupon codes and just want to remove Woocommerce “Have a coupon?” section from checkout page then use this small snippet here.
How to auto-expand coupon field on Woocommerce checkout page? No need to click on “Have a coupon?” link
Let’s be honest: it’s a bit annoying to click on a “Have a coupon?” link on your Woocommerce chekcout page. Therefore, let’s auto-expand the coupon field and remove one more unnecessary click.
<span role="button" tabindex="0" data-code="// Auto-expand coupon field on Woocommerce checkout page
add_action( 'wp_footer', 'wpsh_display_coupon_field', 99 );
function wpsh_display_coupon_field() {
echo '
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.checkout_coupon').show();
});
// Auto-expand coupon field on Woocommerce checkout pageadd_action( 'wp_footer', 'wpsh_display_coupon_field', 99 );functionwpsh_display_coupon_field() {echo'<script type="text/javascript">jQuery(document).ready(function($) {$('.checkout_coupon').show();});</script>';}
How to set default country at Woocommerce checkout page?
If you would like the country at Woocommerce checkout page to be pre-selected and then you can set up a default country (United States, fro example). So, use this snippet.
// Set default country at Woocommerce checkout pageadd_filter( 'woocommerce_checkout_fields', 'set_default_checkout_city' );functionset_default_checkout_city($fields) { $fields['billing']['billing_country']['default'] ='US';return $fields;}
How to set default state and city at Woocommerce checkout page?
In a similar way you can set default setting basically to every field. Just add a field name with the value. Fo example, $fields[‘billing’][‘billing_state’][‘default’] = ‘UT’; will set default billing state to be Utah and $fields[‘billing’][‘billing_city’][‘default’] = ‘Salt Lake City’; adds default city as Salt Lake City.
// Set default country, state and city at Woocommerce checkout pageadd_filter( 'woocommerce_checkout_fields', 'set_default_checkout_city' );functionset_default_checkout_city($fields) { $fields['billing']['billing_city']['default'] ='Salt Lake City'; $fields['billing']['billing_country']['default'] ='US'; $fields['billing']['billing_state']['default'] ='UT';return $fields;}
How to hide checkout fields if Local Pickup is selected?
Take a look at the video above because this part is a bit tricky one. In the video I am showing you how to find pickup methods to use inside this code snippet.
<span role="button" tabindex="0" data-code="/* This piece of code will hide fields for the chosen method.
.hide_pickup {
display: none !important;
}
*/
// Hide Local Pickup shipping method
add_filter( 'woocommerce_checkout_fields', 'hide_local_pickup_method' );
function hide_local_pickup_method( $fields_pickup ) {
// change below for the method
$shipping_method_pickup ='local_pickup:4';
// change below for the list of fields. Add (or delete) the field name you want (or don’t want) to use
$hide_fields_pickup = array( 'billing_company', 'billing_country', 'billing_postcode', 'billing_address_1', 'billing_address_2' , 'billing_city', 'billing_state');