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.
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 page
add_filter('woocommerce_create_account_default_checked' , function ($checked){
return true;
});
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.
// 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 '</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.
// Add Custom Woocommerce Checkout Message
add_action( 'woocommerce_before_checkout_form', 'shop_message', 20 );
function shop_message() {
echo '<p class="woocommerce-message">Estimated delivery time: 2 weeks</p>'; // Replace your message here
}
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.
// 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>
<?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.
// 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();
function showHideShippingNotice( 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
// 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>
<?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’
// 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><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.
// 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 < $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.
// Display Product Images in Woocommerce Checkout Page
add_filter( 'woocommerce_cart_item_name', 'display_product_image_checkout', 10, 2 );
function display_product_image_checkout( $name, $cart_item ) {
if ( ! is_checkout() ) return $name;
$thumbnail = '<span class="product-name__thumbnail" style="float: left; padding-right: 15px">' . get_the_post_thumbnail( $cart_item['product_id'], array( 32, 50 ) ) . '</span>';
return $thumbnail . '<span class="product-name__text">' . $name . '</span>';
}
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.
// Display product attributes in Woocommerce checkout page
add_filter( 'woocommerce_product_variation_title_include_attributes', 'wpsh_display_attributes', 10, 2 );
function wpsh_display_attributes( $should_include_attributes, $product ) {
if ( is_account_page() ) { return $should_include_attributes; }
return false;
}
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 URL
function enable_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.
// 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></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).
// 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 < $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.
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
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.
// 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();
});
</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 page
add_filter( 'woocommerce_checkout_fields', 'set_default_checkout_city' );
function set_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 page
add_filter( 'woocommerce_checkout_fields', 'set_default_checkout_city' );
function set_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.
/* 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');
$chosen_methods_pickup = WC()->session->get( 'chosen_shipping_methods' );
$chosen_shipping_pickup = $chosen_methods_pickup[0];
foreach($hide_fields_pickup as $field_pickup ) {
if ($chosen_shipping_pickup == $shipping_method_pickup) {
$fields_pickup['billing'][$field_pickup]['required'] = false;
$fields_pickup['billing'][$field_pickup]['class'][] = 'hide_pickup';
}
$fields_pickup['billing'][$field_pickup]['class'][] = 'billing-dynamic_pickup';
}
return $fields_pickup;
}
// Local Pickup - hide fields
add_action( 'wp_head', 'local_pickup_fields', 999 );
function local_pickup_fields() {
if (is_checkout()) :
?>
<style>
.hide_pickup {display: none!important;}
</style>
<script>
jQuery( function( $ ) {
if ( typeof woocommerce_params === 'undefined' ) {
return false;
}
$(document).on( 'change', '#shipping_method input[type="radio"]', function() {
// change local_pickup:4 accordingly
$('.billing-dynamic_pickup').toggleClass('hide_pickup', this.value == 'local_pickup:4');
});
});
</script>
<?php
endif;
}
How to hide Woocommerce shipping methods based on variation product attributes in cart?
If you would like to hide specific Woocommerce shipping methods based on variation product attributes added to cart then use this snippet here below. Read the code comment in order to set it up or watch the video above.
Couple of things to point out:
- Set your attributes (starts always with “pa_”). In the video I’m showing hot to find correct slugs for this part here
- Define your shipping method ID which is removed if attribute is added to the cart. Pay attention that local_pickup:2 and flat_rate:1 used in this example may have other ID-s in your site. In the video I am showing how to find those ID-s
// Hide Woocommerce shipping methods based on variation product attributes in cart
add_filter( 'woocommerce_package_rates', 'variation_based_shipping', 10, 2 );
function variation_based_shipping( $rates, $package ) {
if ( is_admin() && ! defined( 'DOING_AJAX' ) )
return;
// Set your attributes (starts always with "pa_")
$taxonomy = 'pa_size'; // Example for "Size"
// Define your shipping method ID which is removed if attribute is added to the cart. Pay attention that local_pickup:2 and flat_rate:1 used in this example may have other ID-s in your site.
$data_array = array(
'local_pickup:2' => array('small', 'big'), // If attributes Big and Small has been added to the cart then Local pickup is hidden
'flat_rate:1' => array('big'), // If attribute Big has been added to the cart then Flat rate is hidden.
);
// Loop through cart items
foreach( $package['contents'] as $cart_item ){
if( isset($cart_item['variation']['attribute_'.$taxonomy]) ) {
// The product attribute selected term slug
$term_slug = $cart_item['variation']['attribute_'.$taxonomy];
// Loop through our data array
foreach( $data_array as $rate_id => $term_slugs ) {
if( in_array($term_slug, $term_slugs) && isset($rates[$rate_id]) ) {
// We remove the shipping method corresponding to product attribute term as defined
unset($rates[$rate_id]);
}
}
}
}
return $rates;
}
How to Hide all other Woocommerce shipping methods if free shipping is available?
If you would like to hide all other Woocommerce shipping methods only if free shipping mehtod is available then use this snippet here below. AND don’t forget to set up a free shipping under Woocommerce >> Settings >> Shipping.
// Hide all other Woocommerce shipping methods if free shipping is available
function hide_other_shipping_when_free_is_available( $rates ) {
$free = array();
foreach ( $rates as $rate_id => $rate ) {
if ( 'free_shipping' === $rate->method_id ) {
$free[ $rate_id ] = $rate;
break;
}
}
return ! empty( $free ) ? $free : $rates;
}
add_filter( 'woocommerce_package_rates', 'hide_other_shipping_when_free_is_available', 100 );
How to hide Woocommerce shipping method for specific user role?
With the help of this snippet here we’re going to hide Woocommerce shipping method for specific user role.
In this example user role customer will not see Flat rate and Local pickup shipping methods. You can change the snippet to meet your requirements, hence change the role and/or shipping mehtods accordingly.
// Hide Woocommerce shipping methods for specific user role
add_filter( 'woocommerce_package_rates', 'hide_shipping_for_user_role', 10, 2 );
function hide_shipping_for_user_role( $rates, $package ) {
// Role ID to be excluded
$excluded_role = "customer"; // set user role
// Shipping rate to be excluded
$shipping_id = 'flat_rate:1'; // Flat rate is excluded
$shipping_id = 'local_pickup:2' ; // Local pickup is excluded
// Get current user's role
$user = wp_get_current_user();
if ( empty( $user ) ) return false;
if( in_array( $excluded_role, (array) $user->roles ) && isset( $rates[ $shipping_id ] ) )
unset( $rates[ $shipping_id ] );
return $rates;
}
How to hide Woocommerce shipping methods based on subtotal?
If you would like to hide Woocommerce shipping methods based on subtotal and take a look at the snippet below. This will hide Flat rate shipping method only if the cart subtotal is 35 euros or more.
// Hide Woocommerce shipping methods based on subtotal
add_filter( 'woocommerce_package_rates', 'hide_shipping_based_on_subtotal', 10, 2 );
function hide_shipping_based_on_subtotal( $rates, $package ) {
// Retrieve cart subtotal
$cart_subtotal = $package['contents_cost'];
// Shipping rate to be excluded
$shipping_id = 'flat_rate:1'; // Set the shipping mehtod which is hidden
if( $cart_subtotal >= 35 ) // Set your subtotal amount
unset( $rates[ $shipping_id ] );
return $rates;
}
How to disable all Woocommerce payment gateways?
This snippet allows you to disable all Woocommerce payment gateways in a way that orders can still be placed.
// Disable all Woocommerce payment gateways
add_filter( 'woocommerce_cart_needs_payment', '__return_false' );
How to Disable Woocommerce payment gateways to specific user role?
If you are the one who needs to disable Woocommerce payment gateways for specific user roles then this snippet helps you out.
In this example I’m going to hide multiple Woocommerce payment methods (Paypal, Cheque and COD) for Shop Manager user role. If you want to do the same then use this code here below.
// Disable Woocommerce payment gateways to specific user role (Hide Paypal, Check payments and COD for shop manager role)
add_filter('woocommerce_available_payment_gateways', 'shopmanager_payments', 1);
function shopmanager_payments($gateways)
{
$current_user = wp_get_current_user();
$role = $current_user->roles;
global $woocommerce;
/* add your user role in condition and payment method which you need to unset*/
if ($role[0] == 'shop_manager') {
unset($gateways['paypal']);
unset($gateways['cheque']);
unset($gateways['cod']);
}
return $gateways;
}
How to Give a Discount if Woocommerce Local Pickup shipping method is selected?
There are two main reasons why you should consider giving a discount for those who select Local pickup as their shipping method.
- You have a small shop and therefore you have no time to hassle with the shipments all the time. Therefore, it would be much easier for you if the customer would come to the shop to pick the product up. Because…
- …this way you can offer the customer up-sells, cross-sells etc. It is a handy method to make your customer to visit your shop.
So, to motivate your customers to choose a local pickup shipping method you may want to consider give them a small discount.
// Give a 15% Discount if Woocommerce Local Pickup shipping method is selected
function local_pickup_discount( $cart ) {
$chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
$chosen_shipping_no_ajax = $chosen_methods[0];
if ( 0 === strpos( $chosen_shipping_no_ajax, 'local_pickup' ) ) {
$discount = $cart->subtotal * 0.15; // Set your percentage. This here gives 15% discount
$cart->add_fee( __( 'Discount added', 'yourtext-domain' ) , -$discount ); // Change the text if needed
}
}
add_action( 'woocommerce_cart_calculate_fees', 'local_pickup_discount');
How to move Woocommerce email to top at checkout page?
// Move Woocommerce email to top at checkout page
add_filter( 'woocommerce_checkout_fields', 'move_email_field_to_top' );
function move_email_field_to_top( $checkout_fields ) {
$checkout_fields['billing']['billing_email']['priority'] = 4;
return $checkout_fields;
}
How to remove Woocommerce checkout fields?
Here below are all the fields you can remove.
// Remove checkout fields
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
// remove billing fields
unset($fields['billing']['billing_first_name']); // Billing First name
unset($fields['billing']['billing_last_name']); // Billing Last name
unset($fields['billing']['billing_company']); // Billing company
unset($fields['billing']['billing_address_1']); // Billing Address 1
unset($fields['billing']['billing_address_2']); // Billing Address 2
unset($fields['billing']['billing_city']); // Billing city
unset($fields['billing']['billing_postcode']); // Billing postcode
unset($fields['billing']['billing_country']); // Billing country
unset($fields['billing']['billing_state']); // Billing state
unset($fields['billing']['billing_phone']); // Billing phone
unset($fields['billing']['billing_email']); // Billing email
// remove shipping fields
unset($fields['shipping']['shipping_first_name']); // Shipping first name
unset($fields['shipping']['shipping_last_name']); // Shipping last name
unset($fields['shipping']['shipping_company']); // Shipping company
unset($fields['shipping']['shipping_address_1']); // Shipping address 1
unset($fields['shipping']['shipping_address_2']); // Shipping address 2
unset($fields['shipping']['shipping_city']); // Shipping city
unset($fields['shipping']['shipping_postcode']); // Shipping postcode
unset($fields['shipping']['shipping_country']); // Shipping country
unset($fields['shipping']['shipping_state']); // Shipping state
// remove order comment fields
unset($fields['order']['order_comments']); // Order comments
return $fields;
}
You don’t have to paste all of them, instead use only these you need. For example, if you need to remove billing address 2, state and company fields then use this code here below.
// Remove checkout fields
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
// remove billing fields
unset($fields['billing']['billing_company']); // Billing company
unset($fields['billing']['billing_address_2']); // Billing Address 2
unset($fields['billing']['billing_state']); // Billing state
return $fields;
}
How to make Woocommerce checkout fields optional?
Pay attention that “true” =required and if you want the field to be optional then set it to “false”.
add_filter( 'woocommerce_default_address_fields' , 'optional_default_address_fields' );
function optional_default_address_fields( $address_fields ) {
$address_fields['first_name']['required'] = true;
$address_fields['last_name']['required'] = true;
$address_fields['company']['required'] = false;
$address_fields['address_1']['required'] = true;
$address_fields['address_2']['required'] = false;
$address_fields['country']['required'] = false;
$address_fields['postcode']['required'] = false;
$address_fields['city']['required'] = false;
$address_fields['state']['required'] = false;
return $address_fields;
}
// For billing email and phone fields
add_filter('woocommerce_billing_fields', 'optional_checkout_fields1', 1000, 1);
function optional_checkout_fields1( $fields ) {
$fields['billing_email']['required'] = true;
$fields['billing_phone']['required'] = false;
return $fields;
}
And once more, if you need a only couple of fields to be optional then just paste the lines you need. For example, this snippet makes country and phone fields optional.
add_filter( 'woocommerce_default_address_fields' , 'optional_default_address_fields' );
function optional_default_address_fields( $address_fields ) {
$address_fields['country']['required'] = false;
return $address_fields;
}
// For billing email and phone fields
add_filter('woocommerce_billing_fields', 'optional_checkout_fields1', 1000, 1);
function optional_checkout_fields1( $fields ) {
$fields['billing_phone']['required'] = false;
return $fields;
}
How to Add date picker field in Woocommerce checkout page?
Why would you need date picker field? Well, for delivery date for example. So, if you need to add date picker field in Woocommerce checkout page then this snippet here below adds it as nice calendar and adds all the selected data to the order emails and order meta tables.
// Add date picker field in Woocommerce checkout page
add_action( 'woocommerce_after_checkout_billing_form', 'display_delivery_calendar' , 10, 1 );
function display_delivery_calendar () {
_e( "Delivery Date: ", "add_extra_fields");?>
<br>
<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Delivery Date">
<script>
jQuery(document).ready(function($) {
$(".add_delivery_date").datepicker({
minDate: 0,
});
});
</script>
<?php
}
add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );
function enqueue_datepicker() {
if ( is_checkout() ) {
// Load the datepicker script (pre-registered in WordPress).
wp_enqueue_script( 'jquery-ui-datepicker' );
// Datepicker
wp_register_style( 'jquery-ui', '//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css' );
wp_enqueue_style( 'jquery-ui' );
}
}
// Add delivery information to emails and order meta
add_action( 'woocommerce_checkout_update_order_meta', 'add_delivery_date_to_order' , 10, 1);
function add_delivery_date_to_order ( $order_id ) {
if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {
add_post_meta( $order_id, '_delivery_date', sanitize_text_field( $_POST ['add_delivery_date'] ) );
}
}
add_filter( 'woocommerce_email_order_meta_fields', 'add_delivery_date_to_emails' , 10, 3 );
function add_delivery_date_to_emails ( $fields, $sent_to_admin, $order ) {
if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {
$order_id = $order->get_id();
}
else {
$order_id = $order->id;
}
$delivery_date = get_post_meta( $order_id, '_delivery_date', true );
if ( '' != $delivery_date ) {
$fields[ 'Delivery Date' ] = array(
'label' => __( 'Delivery Date', 'add_extra_fields' ),
'value' => $delivery_date,
);
}
return $fields;
}
add_filter( 'woocommerce_order_details_after_order_table', 'add_delivery_date_to_thankyou_page', 10 , 1 );
function add_delivery_date_to_thankyou_page ( $order ) {
if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {
$order_id = $order->get_id();
}
else {
$order_id = $order->id;
}
$delivery_date = get_post_meta( $order_id, '_delivery_date', true );
if ( '' != $delivery_date ) {
echo '<p><strong>' . __( 'Delivery Date', 'add_extra_fields' ) . ':</strong> ' . $delivery_date;
}
}
// Show delivery date on order table
add_action('woocommerce_checkout_update_order_meta','my_custom_checkout_field_update_order_meta');
function my_custom_checkout_field_update_order_meta($order_id) {
if (!empty($_POST['billing']['_delivery_date'])) {
update_post_meta($order_id, 'Delivery date', esc_attr($_POST['billing']['_delivery_date']));
}
}
add_action('woocommerce_admin_order_data_after_billing_address', 'my_custom_billing_fields_display_admin_order_meta', 10, 1);
function my_custom_billing_fields_display_admin_order_meta($order) {
echo '<p><strong>' . __('Delivery date') . ':</strong><br> ' . get_post_meta($order->id, '_delivery_date', true) . '</p>';
}
How to add custom fields in Woocommerce checkout page?
This snipepts allows you to add custom fields in Woocommerce checkout page withut any plugin. It will add three text fields (Home, Entrance and Floor) in the billing section. Just rename the field names and placehodler text if needed and you’re good to go.
All the date will be added to the emails on order tables and what is especially good, is that all the data is editable. If you don’t need three fields then just remove the ones you don’t need from the code.
// Frontend: Display the custom billing fields (in checkout and my account)
add_filter( 'woocommerce_billing_fields' ,'add_custom_billing_fields', 20, 1 );
function add_custom_billing_fields( $fields ) {
$fields['billing_address_3'] = array(
'label' => __( 'Home', 'woocommerce' ),
'placeholder' => _x('Fill in your Home', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true
);
$fields['billing_address_4'] = array(
'label' => __( 'Entrance', 'woocommerce' ),
'placeholder' => _x('Fill in your Entrance', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true
);
$fields['billing_address_5'] = array(
'label' => __( 'Floor', 'woocommerce' ),
'placeholder' => _x('Fill in your Floor', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true
);
return $fields;
}
// Save the custom billing fields (once order is placed)
add_action( 'woocommerce_checkout_create_order', 'save_custom_billingt_fields', 20, 2 );
function save_custom_billingt_fields( $order, $data ) {
if ( isset( $_POST['billing_address_3'] ) && ! empty( $_POST['billing_address_3'] ) ) {
$order->update_meta_data('_billing_address_3', sanitize_text_field( $_POST['billing_address_3'] ) );
update_user_meta( $order->get_customer_id(), 'billing_address_3', sanitize_text_field( $_POST['billing_address_3'] ) );
}
if ( isset( $_POST['billing_address_4'] ) && ! empty( $_POST['billing_address_4'] ) ) {
$order->update_meta_data('_billing_address_4', sanitize_text_field( $_POST['billing_address_4'] ) );
update_user_meta( $order->get_customer_id(), 'billing_address_4', sanitize_text_field( $_POST['billing_address_4'] ) );
}
if ( isset( $_POST['billing_address_5'] ) && ! empty( $_POST['billing_address_5'] ) ) {
$order->update_meta_data('_billing_address_5', sanitize_text_field( $_POST['billing_address_5'] ) );
update_user_meta( $order->get_customer_id(), 'billing_address_5', sanitize_text_field( $_POST['billing_address_5'] ) );
}
}
// Display in emails
add_action( 'woocommerce_email_after_order_table', 'display_new_checkout_fields_in_emails', 20, 4 );
function display_new_checkout_fields_in_emails( $order, $sent_to_admin, $plain_text, $email ) {
if ( get_post_meta( $order->get_id(),
'_billing_address_3', true ) )
echo '<p><strong>Home:</strong> '
. get_post_meta( $order->get_id(), '_billing_address_3', true ) . '</p>';
if ( get_post_meta( $order->get_id(),
'_billing_address_4', true ) ) echo '<p><strong>Entrance:</strong> '
. get_post_meta( $order->get_id(), '_billing_address_4', true ) . '</p>';
if ( get_post_meta( $order->get_id(),
'_billing_address_5', true ) ) echo '<p><strong>Floor:</strong> '
. get_post_meta( $order->get_id(), '_billing_address_5', true ) . '</p>';
}
// Backend: Display editable custom billing fields
add_filter( 'woocommerce_admin_billing_fields' , 'order_admin_custom_fields' );
function order_admin_custom_fields( $fields ) {
global $the_order;
$fields['address_3'] = array(
'label' => __( 'Home', 'woocommerce' ),
'show' => true,
'wrapper_class' => 'form-field-wide',
'style' => '',
);
$fields['address_4'] = array(
'label' => __( 'Entrance', 'woocommerce' ),
'show' => true,
'wrapper_class' => 'form-field-wide',
'style' => '',
);
$fields['address_5'] = array(
'label' => __( 'Floor', 'woocommerce' ),
'show' => true,
'wrapper_class' => 'form-field-wide',
'style' => '',
);
return $fields;
}
How to reorder Woocommerce checkout fields?
Since we added some custom fields, we may wan to reorder them. For example, let’s move “Home” field on top. In order to make it happen, here are some explanations:
1) Change the field name in the code accodingly. For example, replace billing_phone with billing_address_3
2) Set the priority as you like. 1 moves it to the top, 120 to the bottom.
These are the billing section priorities.
billing_first_name – 10,
billing_last_name – 20,
billing_company – 30,
billing_address_1 – 40,
billing_address_2 – 50,
billing_city – 60,
billing_postcode – 70,
billing_country – 80,
billing_state – 90,
billing_email – 100,
billing_phone – 110
These are the shipping section priorities.
shipping_first_name – 10
shipping_last_name – 20
shipping_company – 30
shipping_address_1 – 40
shipping_address_2 – 50
shipping_city – 60
shipping_postcode – 70
shipping_country – 80
shipping_state – 90
Pay attention, that account_password and order_comments fields have no priorities.
Now, if you would like to move our custom field called “home” to the top, then use this snippet:
// Reorder Woocommerce checkout fields?
add_filter( 'woocommerce_checkout_fields', 'wpsh_rearrange_fields' );
function wpsh_rearrange_fields( $checkout_fields ) {
$checkout_fields['billing']['billing_address_3']['priority'] = 1;
return $checkout_fields;
}
As mentioned before, don’t forget to change billing_address_3 and [‘priority’] = 1 accordingly.
How to add “Confirm email address” field in WooCommerce checkout page?
Sometimes users make types on therefore they use wrong email addresses during their checkout. If you need to add “Confirm email address” field in Woocommerce checkout page then use this snippet here below.
// Add "Confirm email address" field in WooCommerce checkout page
add_filter( 'woocommerce_checkout_fields' , 'add_checkout_email_verification_field' );
function add_checkout_email_verification_field( $fields ) {
$fields['billing']['billing_email']['class'] = array( 'form-row-full' );
$fields['billing']['billing_em_ver'] = array(
'label' => 'Confirm mail Address',
'required' => true,
'class' => array( 'form-row-full' ),
'clear' => true,
'priority' => 999,
);
return $fields;
}
// Generate error message if field values are different
add_action('woocommerce_checkout_process', 'email_validation');
function email_validation() {
$email1 = $_POST['billing_email'];
$email2 = $_POST['billing_em_ver'];
if ( $email2 !== $email1 ) {
wc_add_notice( 'Your email addresses do not match (check for capital letters, spaces or any other errors)', 'error' );
}
}
How to add shipping phone field in Woocommerce checkout page?
By default Woocommerce has phone field only for billing section. If you need to add shipping phone field in Woocommerce checkout page then use this snippet.
// Add shipping phone field in Woocommerce checkout page
add_filter( 'woocommerce_checkout_fields', 'add_shipping_phone' );
function add_shipping_phone( $fields ) {
$fields['shipping']['shipping_phone'] = array(
'label' => 'Phone',
'required' => false, // set to "true" if required
'class' => array( 'form-row-wide' ),
'priority' => 25,
);
return $fields;
}
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'show_shipping_phone' );
function show_shipping_phone( $order ){
echo '<p><b>Shipping Phone:</b> ' . get_post_meta( $order->get_id(), '_shipping_phone', true ) . '</p>';
}
// Add Woocommerce shipping phone field to order emails
add_filter( 'woocommerce_email_order_meta_fields', 'add_shipping_phone_to_email', 10, 3 );
function add_shipping_phone_to_email( $fields, $sent_to_admin, $order ) {
$fields['meta_key'] = array(
'label' => __( 'Shipping Phone' ),
'value' => get_post_meta( $order->id, '_shipping_phone', true ),
);
return $fields;
}
How to rename Woocommerce Place order button text?
If you need to rename Woocommerce Place order button text with something else (“Buy now”) then use this snippet.
// Rename Woocommerce Place order button text
add_filter( 'woocommerce_order_button_text', 'woocommerce_custom_place_order_button' );
function woocommerce_custom_place_order_button( $button_text ) {
return 'Buy now'; // Add your button text
}