Divi is a great theme without a doubt, and its builder is an incomparable tool to create fantastic conversion and sales pages, amply demonstrated by the thousands of websites and online stores that use it.
However, not everything is perfect in Divi…
One of the things I have always liked the least about Divi is the cart page … when the cart is empty.
What it shows is that empty space, useless, but not only that, but you also have the entire footer “uploaded” leaving a short page, useless, and lacking any design.
For the user it does not add anything, and on top of that it will detract from the rest of the design of your online store, looking like a half-finished page.
Let’s improve it.
To achieve this we are going to use a bit of PHP and CSS, so we will not only add functionality, but also improve the look and feel.
First the PHP…
Add a code like the following to the functions.php file of the Divi child theme:
/* Custom Divi cart page */
function wphelp_divi_custom_cart()
{
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> Haven't decided yet? We have services and products you'll love, check out the menu above or go to the store page to check it out.</p>
<p>If you don't know where to start, I recommend <a href="#">our services page</a> or the list of <a href="#">best sellers.</a></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', 'wphelp_divi_custom_cart', 20 );Code language: HTML, XML (xml)If you don’t have access via FTP or the file editor of your web host you can do it from the WordPress theme editor.
And then we have the CSS, which could look like this:
/* Styles for the custom Divi cart */
.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;
}
Code language: CSS (css)In this case add the above CSS code to the customizer, from Appearance → Customize → Additional CSS.
And you will see how it immediately changes the look of the empty cart page in Divi, to something more attractive and useful.
Table of Contents
What can I change in the sample codes?
Of course, these are sample codes, and you can make changes as needed.
PHP
In the PHP code it is not that you can, it is that you must change at least the text between the HTML tags of paragraph and heading, to put the text and links that you want.
CSS
As for the CSS, here it is optional. If you like it as it is, you leave it as it is, but if not, you can choose the colors, fonts, sizes or visualization, with a little CSS. For example, for a lot of people, the “Return to shop” button may be too far from the rest. In that case, you could change this value:
.empty-cart {
text-align: center;
padding-bottom: 10vw;
}Code language: CSS (css)To this one:
.empty-cart {
text-align: center;
padding-bottom: 3vw;
}Code language: CSS (css)
