Customize WooCommerce Checkout Page – Full guide [updated 2022]

The default WooCommerce checkout page is great but it does not fit all cases. For virtual products, it is better to remove the address fields. For other types of products, you may want to add some extra fields. This flexibility is one of the reasons why WooCommerce is such a popular eCommerce platform.

Here we are listing some customization code snippets.

Remove Billing Fields from checkout form if Cart contains only Virtual Products

add_filter( 'woocommerce_checkout_fields' , 'bcloud_simplify_checkout_virtual' );
 
function bcloud_simplify_checkout_virtual( $fields ) {
    
   $only_virtual = true;
    
   foreach( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
      // Check if there are non-virtual products
      if ( ! $cart_item['data']->is_virtual() ) $only_virtual = false;   
   }
     
    if( $only_virtual ) {
       unset($fields['billing']['billing_company']);
       unset($fields['billing']['billing_address_1']);
       unset($fields['billing']['billing_address_2']);
       unset($fields['billing']['billing_city']);
       unset($fields['billing']['billing_postcode']);
       unset($fields['billing']['billing_country']);
       unset($fields['billing']['billing_state']);
       add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );
     }
     
     return $fields;
}

You can also use the above action hook to add extra fields to the checkout form.

For many small online stores, the coupon field on the checkout page is not recommended. If you do not have any coupons, then the coupon field should be removed; otherwise, users may go around to look for a coupon and not complete the transaction.

PHP Snippet: Remove coupon field from WooCommerce Checkout Page

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
 
// to add coupon form to buttom
// add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

If you are running a sale on your store then it is better if you show regular and sale price on the checkout page as well. This way customer can see how much discount they are getting.

PHP Snippet: Add regular and sales price in checkout page

add_filter( 'woocommerce_cart_item_subtotal' , 'bcloud_woocommerce_cart_item_subtotal', 10, 3 );


function bcloud_woocommerce_cart_item_subtotal($subtotal_html, $cart_item, $cart_item_key){
	//var_dump($subtotal_html);
	//echo '<br><br><br><br><br><br>';
	//var_dump($cart_item);
	//var_dump(array_keys($cart_item));
	//echo '<br><br><br><br><br><br>';

	//var_dump($cart_item['data']);
	if ($cart_item['data']->sale_price && $cart_item['data']->sale_price != $cart_item['data']->regular_price){
		return '<del>₹' . $cart_item['data']->regular_price . '</del>&nbsp₹' . $cart_item['data']->sale_price;
	}
	return $subtotal_html;
}