Customize the WooCommerce Empty Shopping Cart Page

Last modified May 1, 2021
Difficulty Beginner
Language CSS, PHP
Category
Customize the WooCommerce Empty Shopping Cart Page

When building a WooCommerce store, Woo users always want to improve the empty cart page. By default, the empty shopping cart message and page is bland and boring.  

Today, we’ll show you how, with a little bit of PHP and CSS, you can transform the standard WooCommerce empty shopping cart page into a branded asset.

In the following Divi tutorial, you’ll use a few PHP lines and some CSS to create an attractive empty cart page for your WooCommerce store.

Are you looking for the code? Jump straight to the code library and add the code to your child theme.

Customize the WooCommerce Empty Shopping Cart Page

By default, the WooCommerce empty cart page states ‘Your cart is currently empty.’ Apart from this single line of text, there isn’t any other element on this page that either gives direction to your customer or encourages them to take a new action of any sort.

Customize WooCommerce Empty Shopping Cart Page - Default view

This is how the default WooCommerce empty cart page looks.

From a user experience perspective, this page is pretty unhelpful. Ideally, it’d be great to turn this page into a sales machine by encouraging your customers to head to your shop and get shopping.

Unforgettably, there’s no easy way to edit the empty cart page from the WooCommerce settings, but if you’re happy to dabble with some PHP and CSS, you can build a really interesting WooCommerce ‘Your shopping cart is empty’ page.

In this tutorial, you will:

  • Add PHP to the functions.php file in your child theme
  • Add CSS styling to the stylesheet of your child theme

If you haven’t already done so, we recommend installing and activating a child theme to protect your hard work. If you need a refresher, read our child theme guide and, when ready,  download a free Divi child theme from Divi Space.

Step 1: Add PHP code to functions.php file

To begin, head over to the Appearance > Theme Editor console and locate the functions.php file in your child theme. Copy and paste in the following code before the closing PHP ?> bracket:

/* Create custom WooCommerce empty cart page */

function ds_custom_wc_empty_cart_text()
{
   ob_start();?>
   <div class="empty-cart-header">
       <?php woocommerce_breadcrumb(); ?>
   </div>
       <div class="empty-cart">
           <span class="empty-cart-icon">&#xe07a;</span>
           <h2>Your Cart Is Currently Empty!</h2>
           <p> Looks like you have not made your choice yet. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
       </div>
   <?php
    $output = ob_get_clean();
    ob_flush();
   echo et_core_intentionally_unescaped($output, 'html');
}

remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_filter('woocommerce_cart_is_empty', 'ds_custom_wc_empty_cart_text', 20 );

 

Customize WooCommerce Empty Shopping Cart Page - PHP code

Add the following PHP code to your child theme.

Once complete, the front end of your site will look as follows:

Customize WooCommerce Empty Shopping Cart Page - PHP added

With PHP added, the page displays as follows.

You can see that a breadcrumb feature has been added to the page. You can also see that a new heading (H2 tag) and paragraph text (p tag) have been added.

 Step 2: Add CSS code to styles.css file

Next, head over to the Appearance > Theme Editor console and locate the style.css file in your child theme. Copy and paste in the following code:

/* Styling for WooCommerce Cart page */

.empty-cart h2 {
   line-height: 2em;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

.empty-cart p {
   line-height: 2em;
   max-width: 600px;
   margin: auto;
}

.empty-cart {
   text-align: center;
   padding-bottom: 10vw;
}

.container p.return-to-shop {
   text-align: center ;
   padding-bottom: 80px;
}
.empty-cart-header {
   float: right;
   margin-top: -50px;
   position: relative;
}

.empty-cart-icon {
   display: inline-block;
   line-height: initial;
       font-family: ETmodules;
       font-size: 40px;
       color: #2ea3f3;
       border: 2px solid #2ea3f3;
       border-radius: 50%;
       padding: 30px;
       margin-bottom: 20px;
}
Customize WooCommerce Empty Shopping Cart Page - CSS code

Add the following CSS code to your child theme.

Once complete, the front end of your site will look as follows:

Customize WooCommerce Empty Shopping Cart Page - CSS added

With a little PHP and CSS the WooCommerce empty cart page looks amazing!

And just like that, you’ve created an awesome empty cart page for your WooCommerce store!

You can get super crafty here by changing the heading and paragraph text. Have a look at the following example, which brings in a little bit of humor and some useful links.

Customize WooCommerce Empty Shopping Cart Page - Alternate example

Get crafty with copy and create an engaging WooCommerce empty cart page!

To achieve this or similar, simply edit the text within the heading and paragraph text and add hyperlinks.

It’s easy to improve the user experience of your WooCommerce store. With just a bit of PHP and CSS, you would have totally transformed the standard empty cart page into a useful and interesting branded site asset.

We’ll be releasing a plugin that’ll help you edit the Cart and Checkout pages of your WooCommerce store using the Divi builder. Stay tuned to our store!

If you want more code snippets, please post your snippet requests in the comment section below!

PHP

/* Create custom WooCommerce empty cart page */

function ds_custom_wc_empty_cart_text()
{
   ob_start();?>
   <div class="empty-cart-header">
       <?php woocommerce_breadcrumb(); ?>
   </div>
       <div class="empty-cart">
           <span class="empty-cart-icon"></span>
           <h2>Your Cart Is Currently Empty!</h2>
           <p> Looks like you have not made your choice yet. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
       </div>
   <?php
    $output = ob_get_clean();
    ob_flush();
   echo et_core_intentionally_unescaped($output, 'html');
}

remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_filter('woocommerce_cart_is_empty', 'ds_custom_wc_empty_cart_text', 20 );

 

CSS

/* Styling for WooCommerce Cart page */

.empty-cart h2 {
   line-height: 2em;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

.empty-cart p {
   line-height: 2em;
   max-width: 600px;
   margin: auto;
}

.empty-cart {
   text-align: center;
   padding-bottom: 10vw;
}

.container p.return-to-shop {
   text-align: center ;
   padding-bottom: 80px;
}
.empty-cart-header {
   float: right;
   margin-top: -50px;
   position: relative;
}

.empty-cart-icon {
   display: inline-block;
   line-height: initial;
       font-family: ETmodules;
       font-size: 40px;
       color: #2ea3f3;
       border: 2px solid #2ea3f3;
       border-radius: 50%;
       padding: 30px;
       margin-bottom: 20px;
}

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.9.4 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment!

___

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by Divi Space, November 13, 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

4 Comments

  1. Darshan

    This didn’t work for me. I ended up with 2 CART IS EMPTY notices and a mangled looking page. Why can’t this be fixed in the Theme Builder?

    Reply
    • Anna Kurowska

      Hi Darshan, this line is removing the default Cart is empty notice:

      remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );

      This removes a function “wc_empty_cart_message” from “woocommerce_cart_is_empty” hook.

      Make sure this code added to your functions.php file. If that doesn’t work, try to change the the function priority by adjusting the 3rd function argument.

      remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 90 );

      More information: https://developer.wordpress.org/reference/functions/remove_action/

      We also can’t wait when it will be implemented to the Divi’s core. Until Elegant Themes will implemented it, you can use this free snippet we created and if you have any issues or questions, we are here to help!

  2. Aerial

    The PHP works, but the CSS doesn’t work with DIVI Version: 4.9.4 🙁

    Reply
    • Anna Kurowska

      Hello! The above code was tested with Divi 4.9.4 and it works perfectly. Make sure you are adding CSS the correct way 🙂

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.