How to customize Woocommerce cart page? 23 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? 23 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 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 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 display 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 display a custom message in Woocommerce cart page for specific products?

If previous snippet displays custom message for all the products in cart then this one here will display custom message in Woocommerce cart page for specific products. For example, if product “T-shirt ABC” is added to the cart, only then this message is displayed.

PS! Take a look at the line 4 – this contains your product ID numbers. Also, change the message in line 10 accordingly.

// Display a custom message in Woocommerce cart page for specific products
add_action( 'woocommerce_before_cart', 'wpsh_cart_message_for_specific_product' );
function wpsh_cart_message_for_specific_product() {
    $product_ids = array(191, 24); // Add your product ID numbers here

    // Loop through cart items
    foreach ( WC()->cart->get_cart() as $item ) {
        if ( array_intersect( $product_ids, array($item['product_id'], $item['variation_id']) ) ) {
            // This is the message displayed in cart
            wc_print_notice( __("Estimated delivery time: 2 weeks"), 'notice' );
            break; // Stop the loop
        }
    }
}

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(){
    
    $css_code = <<<CSS
    <style>
    .woocommerce-notices-wrapper div.woocommerce-message[role=alert] {
        display: none;
    }
    
    .woocommerce button[name="update_cart"] {
        display: none !important;
    }
    </style>
CSS;
    $js_code = <<<JS
        <script type="text/javascript">
        jQuery(document).ready(function(){
            var wpcbScrollToNotices;
        
            jQuery(document).ajaxComplete(function (e) {
                jQuery.scroll_to_notices = wpcbScrollToNotices;
            });
            
            jQuery('.woocommerce').on('change', 'input.qty', function(){
            
                wpcbScrollToNotices = jQuery.scroll_to_notices;
                jQuery.scroll_to_notices = function( scrollElement ) {
                    return false;
            	};
            	
            	setTimeout(function(){
            	    jQuery('button[name="update_cart"]').trigger('click');    
            	}, 200);
                
            
            });
        });
        </script>
JS;
    echo $css_code;
    echo $js_code;
});

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(''); // 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 <meta charset="utf-8">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' );

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.

Donation Form (#2)

Here are some of my favorite WordPress tools

Thanks for reading this article! I hope it's been useful as you work on your own websites and e-commerce sites. I wanted to share some tools I use as a WordPress developer, and I think you'll find them helpful too.

Just so you know, these are affiliate links. If you decide to use any of them, I'll earn a commission. This helps me create tutorials and YouTube videos. But honestly, I genuinely use and recommend these tools to my friends and family as well. Your support keeps me creating content that benefits everyone.

Themes: Over the past few years, I've consistently relied on two primary themes for all sorts of projects: the Blocksy theme and the Kadence Theme. If you explore this website and my YouTube channel, you'll come across numerous tutorials that delve into these themes. If you're interested in obtaining a 10% discount for both of these themes, then:

Code Snippets Manager: WPCodeBox allows you to add code snippets to your site. Not only that, but it also provides you with the capability to construct and oversee your WordPress Code Snippets library right in the cloud. You can grab it with the 20% discount here (SAVE 20% Coupon: WPSH20).

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 a 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 a 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I like but the one that stands 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: If you would like to have a really fast and easy-to-use managed cloud hosting, then I recommend Verpex Hosting (see my review here). By the way, this site is hosted in Verpex.)

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

Janek T.
Janek T.

Improve this text: {CLIPBOARD}

- I have been passionate about Wordpress since 2011, creating websites and sharing valuable tips on using Wordpress and Woocommerce on my site.
- Be the first to receive notifications about new tutorials by subscribing to my Youtube channel .
- Follow me on Twitter here

Articles: 127