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.
// 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).
// 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”
// 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.
// 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’
// 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.
// 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 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.
// 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.
// 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.
// 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.
// 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' );