Join +2 640 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.
Before (default Divi menu cart)
After (Shopify style Divi menu cart)
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.
- Install and activate the free plugin Say What? from the WordPress plugin repository
- Go to Tools » Text changes from your WordPress dashboard
- Click Add New in the top left corner
- Now, add these values in the fields:
Original String: %1$s Items
Text domain: Divi
Text context: WooCommerce items number
Replacement string: %1$s
- Save by clicking the Add button
- 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
- 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.
- From the WordPress dashboard, go to Divi » Theme Customizer and click Additional CSS.
- 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 } }
- 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.
- From the WordPress dashboard, go to Divi » Theme Customizer » Additional CSS
- 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"; }
- 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.
- Start by editing functions.php in your child theme folder (/wp-content/themes/your-child-theme/) or use the Code Snippet plugin.
- 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.
- Head over to Divi » Theme Customizer » Additional CSS
- 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); } }
- 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
Hi! I tried to add “Shopify” icon with CSS, but it’s not quite working, it doesn’t show on all pages, just the first “start” page. Do you know what I can try to fix this? It’s unfortunately on a not published site.
Make sure that you are using the Theme Builder menu on all pages and that you have enabled Display cart. This only works with the Theme Builder header.
First at all thank you for your work with all the content, i have the same issues. The icon works on all pages that are made by my self like the “Home” site or the “Cart” site and so on. All the other pages for example the product category pages are not working. Even the margin -left do not work. Personally you helped me very much with your content and i will very greatfull if you can help us to solve the issue. Thanks
Hi Loannis! I looked at this category page and the cart looks fine: https://the-driedflower.shop/product-category/pampas/ Did you find a solution? You need to have a Theme Builder header for archive pages as well for this to work. It doesn’t work with the default Divi (Theme Customizer) menu.
Thanks for answer. Yes i use the Builder as global header. However, unfortunately i do not found an answer, i only changed the icon to default, because when you change the pages the icon change too from \e015 icon to default. Im sorry for not mention in my last comment, but i found the issues on the mobile view. However im am not so deep in the CSS topic but it feels like on the Product Pages the icons are loaded from somewhere else.
The cart and header should be the same regardless of where you are on the site. You can try to deactivate or reconfigure any optimization plugins or disable Divi Static CSS cache. I can see some technical conflicts connected to the Divi CSS and Divi performance settings appearing on the site in the Chrome Inspector Console on random occasions.
Thanks for this Very Useful Information