How to Remove WooCommerce Category Count and Center Category Elements: A Comprehensive Guide
Introduction:
WooCommerce, the leading e-commerce platform for WordPress, provides a fantastic framework for building online stores. By default, WooCommerce displays the number of products within each category on the shop page or category archives. While this can be helpful, some store owners prefer a cleaner look, wanting to remove the category count and often center category elements for better visual appeal. This article will guide you through several methods to achieve this, catering to different technical skill levels, from simple CSS solutions to more advanced PHP coding. We’ll explore how to tailor your WooCommerce category display to perfectly match your brand aesthetics.
Understanding the WooCommerce Category Display
Before diving into the solutions, it’s important Check out this post: How To Add Confirm Password Field In Woocommerce Registration Form to understand how WooCommerce renders category information. Typically, the category count is appended to the category link within the `woocommerce_product_categories` template. This template can be overridden in your theme, or you can modify its behavior using CSS or PHP hooks. Centering the category elements involves adjusting the CSS properties of the container that holds the category title and image.
Main Part:
Method 1: Using CSS to Hide the Category Count and Center Elements
This is the simplest method, requiring no code modification. It involves adding custom CSS to your theme.
1. Accessing the WordPress Customizer: Go to Appearance > Customize in your WordPress dashboard.
2. Navigate to Additional CSS: Look for a section labeled “Additional CSS” or a similar option.
3. Adding the CSS Code: Paste the following CSS code into the editor:
.woocommerce ul.products li.product .woocommerce-loop-category__title .count {
display: none; /* Hides the category count */
}
.woocommerce ul.products li.product a {
text-align: center; /* Centers the link text */
display: block; /* Makes the link a block-level element */
}
.woocommerce ul.products li.product .woocommerce-loop-category__title {
text-align: center; /* Centers the category title */
}
.woocommerce ul.products li.product img {
margin: 0 auto; /* Centers the image horizontally */
display: block; /* Ensures the margin auto works correctly */
}
4. Publish Your Changes: Click the “Publish” button at the top of the Customizer to save your changes.
Explanation:
- `display: none;` hides the element containing the category count.
- `text-align: center;` centers the text within the category title and link.
- `display: block;` combined with `margin: 0 auto;` ensures that the image is properly centered.
- Easy and Quick: Requires no coding knowledge.
- Reversible: Simply remove the CSS to revert the changes.
- Specificity Issues: Might require more specific CSS rules depending on your theme’s styling.
- Not a Permanent Solution: Theme updates might override the CSS. Consider using a child theme for long-term stability.
Pros:
Cons:
Method 2: Using a PHP Snippet to Remove the Category Count
This method involves using a PHP code snippet to remove the category count. It’s a slightly more technical approach but offers a cleaner solution.
1. Accessing your `functions.php` file: You can access this file by going to Appearance > Theme Editor and selecting the `functions.php` file. However, it is strongly recommended to use a child theme to avoid losing your changes during theme updates. If you don’t have a child theme, create one.
2. Adding the PHP Snippet: Add the following code snippet to your `functions.php` file (or your child theme’s `functions.php`):
add_filter( 'woocommerce_subcategory_count_html', '__return_empty_string' );
3. Update the file: Save the changes to Check out this post: How To Install Sample Data In Woocommerce the `functions.php` file.
Explanation:
- `add_filter( ‘woocommerce_subcategory_count_html’, ‘__return_empty_string’ );` uses the `woocommerce_subcategory_count_html` filter to remove the HTML that displays the category count by returning an empty string.
Pros:
- Cleaner Solution: Directly removes the category count element.
- More Permanent: Generally more resistant to theme updates (especially when used in a child theme).
Cons:
- Requires PHP Knowledge: Basic understanding of PHP is needed.
- Risk of Errors: Incorrect modifications to `functions.php` can break your site. Always backup your site before making changes.
Method 3: Overriding the Template File (Advanced)
This method involves copying the relevant WooCommerce template file to your theme and modifying it.
1. Locate the Template File: The relevant template file is usually located at `/wp-content/plugins/woocommerce/templates/loop/subcategory.php`.
2. Create the Correct Directory Structure in your Theme: Within your theme directory (or, preferably, your child theme directory), create a directory structure that mirrors the WooCommerce structure: `woocommerce/loop/`.
3. Copy the File: Copy the `subcategory.php` file from the WooCommerce plugin to the `woocommerce/loop/` directory in your theme.
4. Modify the File: Open the copied `subcategory.php` file and remove or comment out the line that outputs the category count. It will likely look something like this:
<?php /**
name );
if ( $category->count > 0 ) {
echo apply_filters( ‘woocommerce_subcategory_count_html’, ‘ (‘ . esc_html( $category->count ) . ‘)‘, $category );
}
?>
<?php
/
* Subcategory thumbnail markup.
*
* @hooked woocommerce_template_loop_category_link_close – 10
Explore this article on How To Change Bank Connections For Woocommerce Payments
*/
do_action( ‘woocommerce_after_subcategory_title’, $category );
?>
You can remove the code block responsible for showing the count:
if ( $category->count > 0 ) { echo apply_filters( 'woocommerce_subcategory_count_html', ' (' . esc_html( $category->count ) . ')', $category ); }
For centering, add the `text-align: center;` CSS inline to the `
` tag, or by adding a custom class to the element and styling that class in your theme’s CSS file as described in method 1.
5. Save the File: Save the modified `subcategory.php` file.
Pros:
- Complete Control: Allows for complete customization of the category display.
Cons:
- Most Complex: Requires a good understanding of WooCommerce templates and PHP.
- Maintenance Overhead: Template overrides need to be maintained during WooCommerce updates. You’ll need to periodically check for changes in the original template and update your overridden version accordingly.
Conclusion:
Removing the category count and centering the category elements in WooCommerce can significantly improve the visual appeal and user experience of your online store. Choosing the right method depends on your technical skills and the level of customization you require. CSS is the simplest and quickest option, while PHP snippets offer a cleaner solution. Template overriding provides the most control, but comes with added complexity and maintenance. Remember to always backup your site before making any changes and consider using a child theme for long-term stability. By following these guidelines, you can tailor your WooCommerce category display to perfectly align with your brand’s aesthetics and create a more engaging shopping experience for your customers. Always test changes on a staging environment before implementing them on a live site.
