Ensuring a seamless shopping experience on your website is crucial, especially for users on small-screen devices. Displaying the cart icon prominently on mobile devices helps improve accessibility and convenience for your customers.
In this article, we will guide you through the process of displaying the cart icon on small-screen devices using Divi.
By default, the Add to Cart icon appears on small screens only if the Slider-In Header layout is used in the Header Format settings.
Display the WooCommerce Cart icon using a Child theme
Install and Activated a Child Theme for Divi
Use an FTP connection, the hosting File Manager app, or the Advanced File Manager plugin to access your website's files.
Copy the header.php file from the wp-content/themes/Divi folder to the wp-content/theme/child theme folder
Go to Appearance → Theme File Editor and open the header.php file from your Child theme folder
Find this line of code:
</div> <!-- #et-top-navigation -->
Add this line of code after that line
<?php et_show_cart_total(); ?>
Add this CSS code to Divi → Theme Options → General Tab → Custom CSS
@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;
}
}
Note: The code works fine with the default header style. However, these changes might work differently with different header types, so if you see something that does not work the way you expect, please open a support chat to get some corrections in your case.
Display the WooCommerce Cart icon using Theme Builder
Go to Divi → Theme Builder
Create or edit the current Global Header layout
Ensure you are using the Menu module
Go to the Content Tab→ Elements → Show Shopping Cart Icon and enable it
