How To Style Your Divi Cart Icon Like Shopify

WooCommerce + Divi is the most flexible and powerful ecommerce combo in the world. But small players like Shopify can be a fresh source for design inspiration. In this tutorial, we are going to style the Divi menu cart to look like the Shopify cart.

Join +2030 subscribers!

WooCommerce vs. Shopify

WooCommerce was founded in 2008 under the name WooThemes. In 2015, WooCommerce was acquired by Automattic – the owners of WordPress.com. According to Statista, WooCommerce is by far the most popular ecommerce platform in the world with a market share of 37% (July, 2022). WooComerce is open source and free to install. Together with the 25(!) WooCommerce modules from Divi, it’s the perfect choice for most ecommerce websites.

Shopify was founded in 2006 and has a 10% market share. Since Shopify is a hosted ecommerce platform, you can’t choose your own web hosting. Shopify apps can be pricey and there is no free option. You can’t use the +50 000 WordPress plugins and you have less options for customizations, payment gateways and SEO.

With that said: Shopify has a nice design focus. One example is the Shopify menu cart that looks more modern then the default Divi menu cart. So lets recreate the Shopify cart icon style using Divi and WooCommerce!

The Shopify Menu Cart Icon + Cart Quantity

Dawn is the most popular theme for Shopify. It uses a minimalistic shopping bag as cart icon with a overlapping bubble that displays the cart quantity. A nice detail is that the cart quantity “0” is hidden when the cart is empty. The cart has a subtle expanding hover effect. Can we achieve all this using Divi? Let’s try.

The menu shoppig cart in the Shopify theme Dawn
The Shopify theme Dawn with a nice minimalistic cart icon in the menu.

Before (default Divi menu cart)

Default Divi cart icon and cart quantity in desktop menu
Desktop menu with the default menu cart.
Default Divi cart icon and cart quantity in mobile menu
Mobile menu with the default menu cart.

After (Shopify style Divi menu cart)

Shopify style cart icon in Divi for desktop
Desktop menu with the menu cart inspired by Shopify.
Shopify style cart icon in Divi for mobile
Mobile menu with the menu cart inspired by Shopify.

Step 1. Display Cart Icon And Cart Quantity In Divi Menu

First, you need to create a Theme Builder header template and make it display the cart icon and the cart quantity number.

  1. Go to your WordPress dashboard
  2. Head over to Divi » Theme Builder
  3. Create an Global Header (if you already have one, you can just edit it)
  4. Insert a Menu module (or edit your existing module)
  5. Go to Content » Elements and enable Show Shopping Cart Icon and Show Cart Quantity.
    Display cart icon and cart quantity with Divi Theme Builder
  6. Head over to the Design tab to style the cart icon in the Icons tab. Use the color #333 for the Shopping Cart Icon Color and 25px for Shopping Cart Icon Font Size.
  7. Go to the Cart Quantity tab and choose Poppins as Cart Quantity Font and set Cart Quantity Font Weight to Bold and Cart Quantity Text Size to 10px and the Cart Quantity Text Color to #fff.
  8. Save your header template and make sure to also save your Divi Theme Builder dashboard.

⚠️ The cart quantity text is now white and will not be visible on a white background. But don’t worry, we will fix this when we add the circle background (bubble) to the cart quantity.

Step 2. Hide “Items” Text Beside Cart Quantity

Now it’s time to remove the text “Items” that is displayed beside the cart quantity number. Since the cart quantity text is white, you will not see it on a white background until the next step where we add the bubble background.

  1. Install and activate the free plugin Say What? from the WordPress plugin repository
  2. Go to Tools » Text changes from your WordPress dashboard
  3. Click Add New in the top left corner
  4. Now, add these values in the fields:
    Original String: %1$s Items
    Text domain: Divi
    Text context: WooCommerce items number
    Replacement string: %1$s
    Hide Items text beside the Divi cart
  5. Save by clicking the Add button
  6. Click Add New again and add these values:
    Original String: %1$s Item
    Text domain: Divi
    Text context: WooCommerce items number
    Replacement string: %1$s
    Hide Item text beside the Divi cart
  7. Save by clicking the Add button

That’s it! The final result should look like this:

Change the cart Items text in the Divi
Don’t worry if you still see the text “Items” in the Theme Builder view. If you followed the steps above, the “Items” text will be gone in frontend.

Step 3. Add Circle Background To Cart Quantity

We’re getting closer to the Shopify cart style. Let’s add a nice round background to the cart quantity number and make it overlap the cart icon.

  1. From the WordPress dashboard, go to Divi » Theme Customizer and click Additional CSS.
  2. Copy the entire CSS snippet below and and paste it in the Additional CSS field:
    /* Display cart quantity in circle in menu */
    .et_pb_menu__cart-count {
    background-color: #333;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -24px;
    margin-bottom: -17px;
    z-index:9;
    }
    
    /* Add extra space left of cart icon in desktop menu */
    @media (min-width: 981px) {
    .et_pb_menu__icon.et_pb_menu__cart-button {
        margin-left:22px
    }
    }
    
  3. Click the blue Publish button to save.

Play around with the margin-left and margin-bottom values to adjust the position of the cart quantity bubble. Do you want to add a white border around the circle? Check out the tutorial How To Add A Circle Background To The Divi Cart Quantity Number.

Step 4. Change Divi Cart Icon To Bag Icon

We are going to use a little CSS snippet to change the default Divi shopping cart icon to a shopping bag icon á la Shopify.

  1. From the WordPress dashboard, go to Divi » Theme Customizer » Additional CSS
  2. Copy the snippet below and paste it in the Additional CSS field:
    /* Replace default cart icon with bag icon */
    .et_pb_menu__cart-button:after {
        content: "\e013";
    }
  3. Save by clicking the blue Publish button.

That’s it! Clear your cache and preview in frontend.

Do you want more custom cart options?

Check out the tutorial Change The WooCommerce Cart To A Custom Icon Or Image With Divi and choose from over 300 font icons. Or why not use a custom cart PNG or SVG image?

Free shopping cart icon pack for Divi
Download a free cart icon image pack in the blog post.

Step 5. Hide Cart Quantity “0” When Cart Is Empty

The Shopify cart does not display the cart quantity “0” when the cart is empty. Let’s add the same behaviour to the Divi cart!

We are going to add a snippet to the functions.php file. To avoid that the code is overwritten next time you update Divi, you need to have a child theme installed. If that isn’t an option for you, you can use the free plugin Code Snippets instead.

  1. Start by editing functions.php in your child theme folder (/wp-content/themes/your-child-theme/) or use the Code Snippet plugin.
  2. Add the snippet below:
    // Hide number of Theme Builder cart items if cart is empty
    add_action( 'wp_footer', function() {
        if ( WC()->cart->is_empty() ) {
            echo '<style type="text/css">.et_pb_menu__cart-count { display: none; }</style>';
        }
    });

Save and preview in frontend. You might have to clear the website cache, browser cache and Divi Static CSS cache before you can see the changes in frontend.

Step 6. Add Hover Effect To Cart Icon

When you hover the Shopify cart icon it expands a little. I’m not a huge fan of this specific effect since it’s a bit jumpy, but hey, I promised you a Shopify cart so here we go.

  1. Head over to Divi » Theme Customizer » Additional CSS
  2. Paste the snippet below:
    /* Expand the cart icon on hover */
    @media (min-width: 981px) {
    .et_pb_menu__cart-button:hover:after {
    transform: scaleX(1.10) scaleY(1.10);
    }
    }
  3. Click the blue Publish button to save.

That’s it! Increase the 1.10 value for scaleX and scaleY to increase the expanding effect and vice versa.

The Result: A Divi Cart Icon Like In Shopify

Now we have tweaked the shopping cart icon in the Divi menu to get the Shopify cart style. The result should look something like this:

Shopify style cart icon in Divi for desktop
Desktop menu with the menu cart inspired by Shopify.
Shopify style cart icon in Divi for mobile
Mobile menu with the menu cart inspired by Shopify.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: How To Paste Unformatted Text By Default In WordPress

👉 Free course: Create a website from scratch with Divi

Related posts

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo