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.

Before (default Divi menu cart)

After (Shopify style Divi menu cart)

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.
   
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
   
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
   
7. Save by clicking the Add button

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

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?

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:

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