How to customize Woocommerce cart page? 22 useful Woocommerce Cart Page Hacks

In my previous posts (see below) I showed how to hack single product pages and category pages. Today I’m going to show you 21 useful Woocommerce cart page hacks. Now, before I start I have to point out that all those snippets go to your child theme’s functions.php file. Or better yet – use Code Snippets plugin for it.

So, let’s dive in.

Video: How to customize Woocommerce cart page?

If you’re new to the Woocommerce or using hooks and snippets then it would be wise for you to see the video here below. In it I’ll show you how to add those hacks and how will they look like on a live site.

How to add custom content to Woocommerce empty cart page?

By default Woocommerce shows “Your cart is currently empty” message. This snippet here below adds “You haven’t added any products to the cart yet. Although, you may be interested in these products.” text along with the featured products display.

If you see the snippet then you can add whatever shortcode or text you want. Just replace (or remove) shortcode and text as you like.

// Adds custom content to Woocommerce empty cart page?
add_action( 'woocommerce_cart_is_empty', 'empty_cart_custom_content' );
function empty_cart_custom_content() {
  echo '<h4>You haven’t added any products to the cart yet. Although, you may be interested in these products.</h4>';
  echo do_shortcode('[featured_products]');
}

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 cart page? 22 useful Woocommerce Cart Page 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 show “XX to free shipping” notification in Woocommerce?

It is a good idea to motivate your users to buy a bit more in order to get free shipping. This snippet here below will add this text to your cart “Buy XX€ worth products more to get free shipping”

How to show "XX to free shipping" notification in Woocommerce?
// Show "XX to free shipping" notification in Woocommerce
add_action( 'woocommerce_before_cart_table', 'cart_page_notice' );
 
function cart_page_notice() {
	$min_amount = 1000; //This is the amount of your free shipping threshold. Change according to your free shipping settings
	$current = WC()->cart->subtotal;
	if ( $current < $min_amount ) {
	$added_text = '<div class="woocommerce-message"><strong>Buy  ' . wc_price( $min_amount - $current ) . ' worth products more to get free shipping</strong>'; // This is the message shown on the cart page
	$return_to = wc_get_page_permalink( 'shop' );
	$notice = sprintf( '%s<a class="button" href="%s">%s</a>', $added_text, esc_url( $return_to ), 'Continue shopping</div>' ); // This is the text shown below the notification. Link redirects to the shop page
	echo $notice;
	}
}

How to add custom message to Woocommerce cart page?

Maybe you need to warn your customers that shipping is delayed or you need something elso to communicate. If so, then use this snippet and replace text accordingly.

How to add custom message to Woocommerce cart page?
// Add custom message to Woocommerce cart page
add_action( 'woocommerce_before_cart_table', 'shop_message', 20 );
function shop_message() {
echo '<p class="woocommerce-message">Estimated delivery time: 2 weeks</p>'; // Change this text
}

How to add Woocommerce backorder notification in cart page?

I have had customers who complain that they did not realize that they ordered a product which was not in stock and was available on backorder. Therefore, this snippets adds Woocommerce backorder notification in cart page.

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?
// Add Woocommerce backorder notification in cart page
add_action( 'woocommerce_before_cart_table', 'show_backordered_items_cart_notice' );
function show_backordered_items_cart_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 Update WooCommerce Cart on Quantity Change?

Next snippet is also a nice one. This allows you to hide Update cart button and it will update your cart amount every time you update product quantities. So, if you need to update WooCommerce cart on quantity change then use this snippet here below.

// Update WooCommerce Cart on Quantity Change

add_action( 'wp_head', function () { ?>
<script>
var timeout;
 
jQuery( function( $ ) {
	$('.woocommerce').on('change', 'input.qty', function(){
 
		if ( timeout !== undefined ) {
			clearTimeout( timeout );
		}
 
		timeout = setTimeout(function() {
			$("[name='update_cart']").trigger("click");
		}, 1000 ); // 1 second delay, half a second (500) seems comfortable too
	});
} );
</script>

<style>
  /* Hide Update cart button */
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
	display: none;
}
</style>
<?php } );

How to display order total weight on Woocommerce cart page?

This little snippet here makes your Woocommerce cart page show your order total weight.

How to display order total weight on Woocommerce cart page?
// Display order total weight on Woocommerce cart page?
add_action( 'woocommerce_before_cart', 'display_total_weight' );
  
function display_total_weight() {
   $notice = 'Your cart weight is: ' . WC()->cart->get_cart_contents_weight() . get_option( 'woocommerce_weight_unit' );
   if ( is_cart() ) {
      wc_print_notice( $notice, 'notice' );
   } else {
      wc_add_notice( $notice, 'notice' );
   }
}

How to add an “Empty cart” button to Woocommerce cart page?

This snippet here will add an “Empty cart” button to your Woocommerce cart page. It’s located near the Apply coupon button.

// "Empty cart" button on Woocommerce cart page
add_action( 'woocommerce_cart_coupon', 'woocommerce_empty_cart_button' );
function woocommerce_empty_cart_button() {
	echo '<a href="' . esc_url( add_query_arg( 'empty_cart', 'yes' ) ) . '" class="button cart" title="' . esc_attr( 'Empty cart', 'woocommerce' ) . '">' . esc_html( 'Empty cart', 'woocommerce' ) . '</a>';
}
add_action( 'wp_loaded', 'woocommerce_empty_cart_action', 20 );
function woocommerce_empty_cart_action() {
	if ( isset( $_GET['empty_cart'] ) && 'yes' === esc_html( $_GET['empty_cart'] ) ) {
		WC()->cart->empty_cart();

		$referer  = wp_get_referer() ? esc_url( remove_query_arg( 'empty_cart' ) ) : wc_get_cart_url();
		wp_safe_redirect( $referer );
	}
}

You may need to add some CSS to the Customizer >> Addtitional CSS in order to add some spacing between those two buttons.

a.button.cart {
	margin-left: 10px;
}
How to add an "Empty cart" button to Woocommerce cart page?

How to move Woocommerce coupon field location in cart page?

If you take a look at the screenshot above you see where is the default coupon field location. If you need to move your Woocommerce coupon field location in cart page before the “Proceed to checkout” button, then use this snippet and the end result is like the on on the screenshot.

How to move Woocommerce coupon field location in cart page?
// Move Woocommerce coupon field location in cart page

add_action( 'woocommerce_proceed_to_checkout', 'move_cart_coupon_field', 1 );
function move_cart_coupon_field() {
   ?> 
      <form class="woocommerce-coupon-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
         <?php if ( wc_coupons_enabled() ) { ?>
            <div class="coupon under-proceed">
               <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" style="width: 100%" /> 
               <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>" style="width: 100%"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>
            </div>
         <?php } ?>
      </form>
   <?php
}

Depending on your theme you may want to tweak it with a little bit of CSS.

.coupon.under-proceed {
	margin-bottom: 2em;
}
.coupon.under-proceed button {
	margin-top: 0.5em;
	background: #2a2a2a;
}
/* Hide original Coupon form */
div.coupon:not(.under-proceed) { 
display: none !important; 
}
  @media only screen and (max-width: 1024px) {
.woocommerce-cart-form__contents .actions .button {
    display: none;
}
}

How to change Woocommere “Return to shop” URL?

Take a look at the URL /about-us/ in the snippet and if you want to change your Woocommerce “Return to shop” url then replace it with your own URL.

// Change Woocommere "Return to shop" URL
add_filter( 'woocommerce_return_to_shop_redirect', 'return_to_shop_url' );
function return_to_shop_url() {
	return '/about-us/'; // Change your url
}

How to add “Continue shopping” button to Woocommerce cart page?

This snippet will add similar “Continue shopping” button to Woocommerce cart page as you see on the screenshot. After pressing on the button your customer is redirected to the shop page.

How to add "Continue shopping" button to Woocommerce cart page?
// Add "Continue shopping" button to Woocommerce cart page

add_action( 'woocommerce_before_cart_table', '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">Continue Shopping →</a> Would you like some more goods?';
 echo '</div>';
}

How to display estimated delivery date and time in Woocommerce cart page?

This is a little hurry-up timer that shows estimated delivery date and time on your Woocommerce cart page. Pay attention that you may need to change the timezone and text.

How to display estimated delivery date and time in Woocommerce cart page?
// Display estimated delivery date and time in Woocommerce cart page

add_action( 'woocommerce_after_cart_table', 'cart_page_shipping_timer' );
    
function cart_page_shipping_timer() {
// Change timezone if needed
   date_default_timezone_set( 'Europe/Tallinn' );  
    
   // if FRI/SAT/SUN delivery will be MON
   if ( date( 'N' ) >= 5 ) {
      $del_day = date( "l jS F", strtotime( "next tuesday" ) );
      $order_by = "Monday";
   } 
    
   // if MON/THU after 4PM delivery will be day after tomorrow
   elseif ( date( 'H' ) >= 16 ) {
      $del_day = date( "l jS F", strtotime( "tomorrow + 1 day" ) );
      $order_by = "tomorrow";
   } 
    
   // if MON/THU before 4PM delivery will be TOMORROW
   else {
      $del_day = date( "l jS F", strtotime( "tomorrow" ) );
      $order_by = "today";
   }
 
// Change text if needed
   $html = "<br><div class='woocommerce-message' style='clear:both'>Order by 4PM {$order_by} for delivery on {$del_day}</div>";
    
   echo $html;
}

How to disable Woocommerce cart page shipping info?

If you are like my then you don’t like that Woocommerce shows shipping inforamtion on the cart page. So, if you would like to disable Woocommerce cart page shipping info then use this small snippet.

// Disable Woocommerce cart page shipping info

add_filter( 'woocommerce_cart_ready_to_calc_shipping', 'remove_cart_shipping_calculator', 99 );
function remove_cart_shipping_calculator( $show_shipping ) {
    if( is_cart() ) {
        return false;
    }
    return $show_shipping;
}

How to output shortode on Woocommerce cart page?

For example, you would like to show some kind of content created by Elementor Pro or maybe some other plugin. As before, we have you covered. Just replace the shortdoce in the snippet and you’re good to go.

add_action( 'woocommerce_cart_collaterals', 'output_shortcode', 10 );

function output_shortcode() {
 	echo do_shortcode('[blocksy-content-block id="1891"]'); // Replace this shortcode here
}

How to display product SKU in Woocommerce cart and checkout page?

See the screenshot below. As you see it displays product SKU in Woocommerce cart page. It also displays it in checkout page.

How to display product SKU in Woocommerce cart and checkout page
// Display product SKU in Woocommerce cart and checkout page

add_filter( 'woocommerce_cart_item_name', 'show_sku_in_cart', 99, 3 );
function show_sku_in_cart( $item_name, $cart_item, $cart_item_key  ) {
    // The WC_Product object
    $product = $cart_item['data'];
    // Get the  SKU
    $sku = $product->get_sku();

    // When sku doesn't exist
    if(empty($sku)) return $item_name;

    // Add the sku
    $item_name .= '<br><small class="product-sku">' . __( "SKU: ", "woocommerce") . $sku . '</small>';

    return $item_name;
}

How to display product attributes in Woocommerce cart page?

Now, if you would like to display product attributes in Woocommerce cart page then use this snippet here below. It will also output the attributes on your Woocommerce checkout page.

// Display product attributes in Woocommerce cart 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 display product availability in Woocommerce cart page?

On the screenshot above then you’ll see that it also displays product availability (2 in stock) in Woocommerce cart page. Use this snippet if you would like to implement it on your site.

// Display stock availability in Woocommerce cart page

add_filter( 'woocommerce_cart_item_name', 'add_availability_below_cart_item_name', 10, 3);
function add_availability_below_cart_item_name( $item_name, $cart_item, $cart_item_key ) {
    $availability = $cart_item['data']->get_availability();
    return $item_name . '<br>' . $availability['availability'];
}

How to display Woocommerce shipping class on cart page?

// Display Woocommerce shipping class on cart page

add_filter( 'woocommerce_cart_item_name', 'shipping_class_in_item_name', 20, 3);
function shipping_class_in_item_name( $item_name, $cart_item, $cart_item_key ) {
    // Only in cart page (remove the line below to allow the display in checkout too)
    if( ! ( is_cart() || is_checkout() ) ) return $item_name;

    $product = $cart_item['data']; // Get the WC_Product object instance
    $shipping_class_id = $product->get_shipping_class_id(); // Shipping class ID
    $shipping_class_term = get_term( $shipping_class_id, 'product_shipping_class' );

    if( empty( $shipping_class_id ) )
        return $item_name; // Return default product title (in case of)

    $label = __( 'Shipping', 'woocommerce' );

    return $item_name . '<br>
        <p class="item-shipping_class" style="margin:12px 0 0;">
            <strong>' .$label . ': </strong>' . $shipping_class_term->name . '</p>';
}

How to add additional fee or surcharge to Woocommerce orders?

I’m going to show you two different ways you can add additional fee or surcharge to Woocommerce orders. Pay attention to the $percentage = 0.1; part inside the code.

How to add percentage based additional fee or surcharge to Woocommerce orders?

// Add percentage based additional fee or surcharge

add_action( 'woocommerce_cart_calculate_fees','woocommerce_custom_surcharge' );
function woocommerce_custom_surcharge() {
  global $woocommerce;

	if ( is_admin() && ! defined( 'DOING_AJAX' ) )
		return;

	$percentage = 0.1; // Add your percentage here
	$surcharge = ( $woocommerce->cart->cart_contents_total + $woocommerce->cart->shipping_total ) * $percentage;	
	$woocommerce->cart->add_fee( 'Surcharge', $surcharge, true, '' );

}

How to add country based additional flat fee or surcharge to Woocommerce orders?

In this example below take a look at the “EE” and “FI” parts. Add you own country codes over there. Also, in the $fee = 1.00; change the fee amount as you like.

// Add country based additional flat fee or surcharge to Woocommerce orders
add_action( 'woocommerce_cart_calculate_fees','wc_add_surcharge' ); 
function wc_add_surcharge() { 
global $woocommerce; 

if ( is_admin() && ! defined( 'DOING_AJAX' ) ) 
return;

$county = array('EE', 'FI');
// change the $fee to set the surcharge to a value to suit
$fee = 1.00;
  

if ( in_array( WC()->customer->get_shipping_country(), $county ) ) : 
    $woocommerce->cart->add_fee( 'Surcharge', $fee, true, 'standard' );  
endif;
}

How to display categories in Woocommerce cart page?

With the help of this snippet here you can display categories on Woocommerce cart page.

// Display categories in Woocommerce cart page

add_filter( 'woocommerce_cart_item_name', 'display_categories_on_cart_page', 9999, 3 );
 
function display_categories_on_cart_page( $name, $cart_item, $cart_item_key ) {
 
   $product = $cart_item['data'];
   if ( $product->is_type( 'variation' ) ) {
      $product = wc_get_product( $product->get_parent_id() );
   }
   $cat_ids = $product->get_category_ids();
   if ( $cat_ids ) $name .= '<br>' . wc_get_product_category_list( $product->get_id(), ', ', '<small>' . _n( 'Category:', 'Categories:', count( $cat_ids ), 'woocommerce' ) . ' ', '</small>' );
   return $name;
}

How to sort cart items alphabetically in Woocommerce cart page?

// Sort cart items alphabetically in Woocommerce cart page

add_action( 'woocommerce_cart_loaded_from_session', 'show_cart_items_alphabetically' );
 
function show_cart_items_alphabetically() {

$products_in_cart = array();
foreach ( WC()->cart->get_cart_contents() as $key => $item ) {
$products_in_cart[ $key ] = $item['data']->get_title();
}
natsort( $products_in_cart );
$cart_contents = array();
foreach ( $products_in_cart as $cart_key => $product_title ) {
$cart_contents[ $cart_key ] = WC()->cart->cart_contents[ $cart_key ];
}
WC()->cart->cart_contents = $cart_contents;
}

How to remove Woocommerce product links from cart page?

// Remove Woocommerce product links from cart page

add_filter( 'woocommerce_cart_item_permalink', '__return_null' );

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