WooCommerce: Hiding the “Showing Results” Text in Your Product Archive (For Beginners)
Are you using WooCommerce to power your online store? Great! But sometimes, the default WooCommerce display can be a little…cluttered. One common annoyance is the “Showing results 1-12 of 24 products” text that appears above your product listings on category pages, shop pages, and search results. While informative, it can detract from the visual appeal, especially if you’re aiming for a clean and modern design.
This article will guide you through simple, newbie-friendly methods to remove this “Showing results” text from your WooCommerce product archives. We’ll explain *why* you might want to do this and provide clear, actionable steps.
Why Remove the “Showing Results” Text?
Before we dive in, let’s understand the motivations. Here are a few reasons why you might want to hide this text:
- Clean Design: Often, less is more. Removing unnecessary text can create a more visually appealing and professional look for your store. Think of it like decluttering a room – removing unnecessary items makes the space feel more open and inviting.
- Improved User Experience (UX): While the “Showing results” text is informative, many users instinctively understand that they are seeing a portion of the total products available. If you have intuitive pagination or filters, the text can become redundant and distracting.
- Mobile Optimization: On smaller screens, every bit of real estate matters. Removing the text can free up valuable space for your products and improve the browsing experience on mobile devices. Imagine the difference on a phone screen – removing the text can allow an extra row of products to be visible without scrolling.
Method 1: Using a Child Theme (Recommended)
This is the safest and most recommended method. Using a child theme ensures your Check out this post: How To Hide Update Cart Button In Woocommerce Hook changes won’t be overwritten when you update your main theme. Think of a child theme as a separate layer on top of your main theme. It inherits all the functionalities and styles but allows you to make modifications without directly altering the core files.
1. Create a Child Theme: If you don’t already have one, create a child theme for your current WooCommerce theme. There are plugins that can help, or you can create one manually (there are plenty of tutorials online).
2. Locate the `functions.php` File: Open the `functions.php` file in your child theme’s directory.
3. Add the Code Snippet: Add the following PHP code to your `functions.php` file:
<?php /**
Explanation:
- `kia_remove_result_count()`: This is the name of our custom function. You can change “kia” to anything relevant to your site.
- `remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_result_count’, 20 );`: This line is the key. It tells WooCommerce to *remove* the default action (`woocommerce_result_count`) that displays the “Showing results” text. The `’woocommerce_before_shop_loop’` specifies *where* in the template this action occurs (before the product loop starts), and the `20` is the priority of the action (higher numbers run Discover insights on How To Download Woocommerce Themes later).
- `add_action( ‘after_setup_theme’, ‘kia_remove_result_count’ );`: This tells WordPress to run our function (`kia_remove_result_count()`) after the theme is set up. This ensures Learn more about How To Set Up Stripe Woocommerce that WooCommerce is loaded before we try to modify it.
4. Save the File: Save the `functions.php` file.
5. Check Your Shop: Visit your WooCommerce shop page, category pages, or search results. The “Showing results” text should now be gone!
Method 2: Using a Code Snippets Plugin
If you’re uncomfortable directly editing theme files (even in a child theme), a code snippets plugin is a great alternative. These plugins allow you to add PHP code to your site without modifying theme files.
1. Install a Code Snippets Plugin: Popular options include “Code Snippets” and “WPCode – Insert Headers, Footers, and Custom Code Snippets.” Install and activate your chosen plugin.
2. Add a New Snippet: In the plugin’s interface, create a new snippet.
3. Add the Code: Copy and paste the same PHP code from Method 1 into the snippet:
<?php /**
4. Set the Snippet to Run Everywhere: Configure the snippet to run on the entire site (usually an option in the plugin settings).
5. Activate the Snippet: Activate the snippet.
6. Check Your Shop: Visit your WooCommerce shop page, category pages, or search results. The “Showing results” text should be gone!
Method 3: Custom CSS (Not Recommended for Removing Functionality)
While you *can* technically hide the text using CSS, this isn’t the ideal solution. CSS only hides the text visually; the underlying code still generates it. This can have slight negative impacts on performance, as the browser is still processing the information even though it’s not visible.
Only use this method if the other methods fail or as a temporary solution.
1. Identify the CSS Class: Use your browser’s developer tools (right-click on the “Showing results” text and select “Inspect”) to identify the CSS class or ID associated with the text. It’s typically something like `.woocommerce-result-count`.
2. Add the CSS: Add the following CSS to your theme’s custom CSS section (Appearance -> Customize -> Additional CSS) or using a custom Check out this post: Woocommerce How To Import Images CSS plugin:
.woocommerce-result-count {
display: none !important;
}
Explanation:
- `display: none;`: This CSS property hides the element from view.
- `!important;`: This ensures that our CSS rule overrides any other CSS rules that might be applied to the element.
3. Save and Check: Save your changes and check your shop page. The text should be hidden.
Troubleshooting
- Cache Issues: If you’ve made changes but don’t see them reflected on your site, clear your browser cache and any caching plugins you might be using.
- Conflicting Plugins: In rare cases, another plugin might be interfering. Try deactivating plugins one by one to see if one is causing the issue.
- Theme Compatibility: Some themes might have custom implementations that override these methods. Consult your theme’s documentation or contact their support team for assistance.
Conclusion
By following these methods, you can easily remove the “Showing results” text from your WooCommerce product archive pages, creating a cleaner and more visually appealing online store. Remember to use a child theme or a code snippets plugin for the safest and most sustainable approach! Good luck!
