All Collections
Divi Documentation
Customizing Divi
How to display the Cart icon on small screens
How to display the Cart icon on small screens

Adding woocommerce add-to-cart icon on mobile screens

Karen avatar
Written by Karen
Updated over a week ago

By default, the Add to Cart icon appears on small screens only if the Slider-In header is selected under the Header Format settings. In other cases, the icon does not appear on small screens.
To show the icon on small screens, you will have to add this line to the header.php file:

<?php et_show_cart_total(); ?>


For example, if you want to add the icon in the Primary Menu Bar, add the line right before:

</div> <!-- #et-top-navigation -->


Finally, add the following CSS code to the Custom CSS field under WP admin / Theme Options / General Settings to not duplicate the icons on Desktop:

@media screen and (min-width: 981px) {
    #et_mobile_nav_menu + .et-cart-info, #et-info .et-cart-info {
        display: none;
}
}

@media screen and (max-width: 767px) {
    #et-info .et-cart-info {
        position: relative;
        left: 15px;
}
}


By default, the code works fine with the Default Header style. These changes might work differently with different header types, so if you see something does not work the way you expect, please open the support chat to get some corrections in your case. 

P.S.: If you want to keep the changes while you update or reinstall the Divi theme, please install a Child Theme and copy the header.php file to the child theme folder.

Did this answer your question?