Remove “Items” Text Beside Divi Cart – Only Display Cart Icon + Number

The default Divi + WooCommerce menu shopping cart consists of a cart icon, the number of items and the text “Items”. Let’s make the menu cleaner by removing the “Items” text.

Join +2030 subscribers!

Before

Cart icon and 0 Items

Cart icon ” with “Items” or “Item” text.

After

Cart number without "Items" text

Cart icon without “Items” or “Item” text.

The Problem: No Option To Hide “Items” Beside The Cart

It’s easy to display the shopping cart icon and the cart quantity in Divi. But regardless if you use the Theme Builder menu or the Theme Customizer menu, you’ll face the same problem: There is no option available to disable the “Items” text to the right of the cart. Luckily, there are couple of ways to remove the “Items” text from the cart.

1. Method 1: Remove The “Items” Text With A Free Plugin

There is a nice free plugin called Say What? that lets you to change and remove text strings in WordPress without using custom code. If you aren’t a developer, it can be hard to know which strings to target. You could either use Say What Pro to discover and autocomplete strings. Or you can simply keep on reading this post, because I’ve found the right strings for you. And yes, it works both for Theme Builder and Theme Customizer menus.

  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

Clear your website cache and test it by adding products in your cart in frontend. The “Items” text should not be displayed beside the Divi cart anymore.

Why two lines of strings?

If there are zero or multiple items in a cart, the default text is “Items“. The first row targets this string. If there is one single product in the cart, the default text is “Item“. The second row targets this string.

Method 2: Remove The “Items” Text With A Code Snippet

If you don’t want to use a plugin you can use a JavaScript snippet to remove the “Items” text. 

⚠️ Important: I recommend that you use method #1 above since removing content using JavaScript can make the hidden text display for a brief moment while the page loads. This is because the page content is displayed before the script is processed.

  1. From your WordPress dashboard, go to Divi » Theme Options
  2. Head over the the Integations tab and add this snippet to “the head of your blog” (“blog” is a misleading label since the code is applied to your entire website):
    <script>
        jQuery(function($){
            $('.et_pb_menu__cart-count, .et-cart-info span').text(function (_,txt) {
                return txt.slice(0, -5);
            });
        });
    </script>
  3. Click the green Save Changes button.

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

This snippet works both for Theme Builder menus (targeting the class et_pb_menu__cart-count) and Theme Customizer menus (targeting the class et-cart-info).

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: Hide Cart (or “0 Items”) When Empty In Divi & WooCommerce

👉 Free course: Create a website from scratch with Divi

Related posts

2 Comments

  1. Hello Victor, you are amazing. Thank you so much for this tutorial.

    But I do find some issues, the word “items” does flash up for a few seconds (while the page is loading) before it disappears (page fully loaded) which does not look great.

    I hope this could be fixed, thank you for your time.

    Reply
    • Thanks for the feedback Eric! Did you use method 1 (the “Say What?” plugin”) or method 2 (the code snippet)? I can’t recreate the flash effect when using method 1. If you use method 2 there will be a brief flash when the page loads, so I would recommend method 1.

      Reply

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