How to Customize Woocommerce Checkout page? 29 useful hacks

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
// 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.

How to add "Continue shopping" button in Woocommerce checkout page?
// 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();
            
            function showHideShippingNotice( countryCode, countryField ){
                if( $(countryField).val() === 'EE' // Change the country code 
				  ){
                    $('.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' // Set your country
				   	 || $(countryField).val() === 'FI'  // Additional country
				   	 || $(countryField).val() === 'LV' // Additional country
				  ){
                    $('.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 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’

How to add Woocommerce backorder notification in cart page?
// 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.

How to Customize Woocommerce Checkout page? 29 useful hacks
// 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.

How to customize Woocommerce checkout page?
// 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.

How to auto-apply coupon at Woocommerce Checkout Page using URL?
// 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).

How to Apply a Woocommerce Coupon for Minimum Cart Total
// 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 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.

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

How to Add date picker field in Woocommerce checkout page?
// 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 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.

How to add "Confirm email address" field in WooCommerce checkout page?
// 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
}

Related Woocommerce hacks

Here are some of my favorite Wordpress tools

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: For getting started, I really like A2 Hosting. They have the dedicated and fast Wordpress hostinh and support has also been fast and responsive. If you’re more tech savvy and want to have a really fast managed cloud hosting then I recommend Cloudways. (Btw, this site is hosted in Cloudways.)

To see all my of most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Choose amount

Best selling plugins

Default image
Janek T.
I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce. If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here Follow me in Twitter here
Articles: 72