WooCommerce: How to Tweak Your Top Rated Products Display (Even if You’re a Newbie!)
Want to showcase your most loved products and boost sales? One of the easiest ways to do this in WooCommerce is by highlighting your “Top Rated” products. But sometimes, the default settings just don’t cut it. Maybe you want to show *more* top-rated products, or only display them in a *specific* category. This guide will walk you through changing how WooCommerce displays your top-rated products, even if you’re new to the platform!
Why is this important? Think of it like this: Imagine you’re buying a new phone. You’re more likely to trust a phone that *lots* of other people have reviewed positively, right? Displaying your top-rated products acts as social proof, encouraging new customers to buy what’s already proven popular.
Understanding the Default Top Rated Products Display
Out of the box, WooCommerce offers a few ways to display top-rated products:
- Using a Shortcode: The `[top_rated_products]` shortcode is the quickest and easiest method. You can add it to any page, post, or even a text widget.
- Using a WooCommerce Block (in Gutenberg): If you’re using the Gutenberg editor (WordPress’s default editor), there’s a dedicated “Top Rated Products” block.
- `limit=”8″`: This part of the shortcode tells WooCommerce to display a maximum of 8 products. Simply change the number to your desired quantity.
- `category=”dog-toys”`: This tells WooCommerce to only consider products that belong to the “dog-toys” category when selecting the top-rated items.
However, these methods come with default limitations. You might only be able to show a fixed number of products (often just a few), and you might not have much control over the order in which they appear.
Changing the Number of Top Rated Products Displayed
The simplest customization is changing the number of products shown. We’ll use the shortcode for this, as it’s super flexible.
Example: Let’s say you want to show *eight* top-rated products. Here’s how you’d modify the shortcode:
[top_rated_products limit=”8″]
Where to use it: Go to the page or post where you want to display the top-rated products. Switch to the “Text” or “Code” view (depending on your editor) and paste in the shortcode. Update your page/post, and you’re done!
Filtering Top Rated Products by Category
This is where things get a bit more powerful. Let’s say you run an online pet store. You might want to show the top-rated *dog* toys on your “Dog Toys” category page and top-rated *cat* toys on your “Cat Toys” page.
To do this, we’ll use the `category` attribute in the shortcode.
Example: To show the top-rated products *only* from the “dog-toys” category, you’d use this shortcode:
[top_rated_products category=”dog-toys”]
Important: The `category` attribute uses the *slug* of the category, not the name. The slug is the URL-friendly version of the category name (e.g., “dog-toys” instead of “Dog Toys”). You can find the category slug by going to Products > Categories in your WordPress admin and clicking “Edit” on the category you want to use. Look at the URL – the slug is usually the last part of the URL after `/product-category/`.
Combining Limit and Category
You can, of course, combine both `limit` and `category` for even finer control:
[top_rated_products limit=”4″ category=”cat-toys”]
This would display the top 4 rated products from the “cat-toys” category.
Going Beyond the Basics: More Advanced Customization (For the Adventurous!)
For more complex customizations, you might need to get your hands dirty with code. This requires editing your theme’s `functions.php` file (or, better yet, using a child theme to avoid losing changes when your theme updates). Always back up your site before making code changes!
Example: Changing the Sorting Logic
By default, WooCommerce sorts top-rated products based on the average rating *and* the number of ratings. You might want to prioritize products with *more* ratings, even if their average rating is slightly lower.
Here’s a code snippet you could add to your `functions.php` file (within your child theme):
<?php /**
What this code does:
- `add_filter( ‘woocommerce_get_catalog_ordering_args’, ‘custom_top_rated_ordering’ );`: This line hooks into the WooCommerce sorting process.
- `if ( isset( $_GET[‘orderby’] ) && ‘rating’ == $_GET[‘orderby’] ) { … }`: This checks if the user is specifically sorting by “rating” (which is what happens when WooCommerce displays top-rated products).
- `$args[‘orderby’] = ‘meta_value_num’;`: This tells WooCommerce to sort by a meta value (custom data associated with each Discover insights on How To Show Woocommerce Cart On Different Site product).
- `$args[‘order’] = ‘DESC’;`: This specifies descending order (highest to lowest).
- `$args[‘meta_key’] = ‘_wc_review_count’;`: This tells WooCommerce to sort by the meta key `_wc_review_count`, which stores the number of reviews a product has.
Important: This code snippet is an example. Make sure to test it thoroughly in a staging environment before implementing it on your live site. Also, always consult a developer if you’re not comfortable working with code.
Troubleshooting Tips
- Top-Rated Products Not Showing Up: Ensure you have products with reviews and ratings! Products need to have *actual* reviews to Explore this article on How To Customize The Buttons In Woocommerce be considered “top-rated.”
- Categories Not Working: Double-check your category slugs. A typo can cause the shortcode to fail.
- Layout Issues: The default layout of the `[top_rated_products]` shortcode might not perfectly match your theme. You might need to use custom CSS to adjust the appearance. You can easily do this by:
1. Open your WordPress dashboard.
2. Navigate to Appearance > Customize > Additional CSS.
3. Write your CSS code to style the top-rated products. For example, to change the font size:
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 16px;
}
4. Click Publish.
Always test your CSS on different screen sizes (desktop, tablet, mobile) to ensure the responsiveness of your website.
By tweaking your WooCommerce top-rated products display, you can highlight your bestsellers, boost customer confidence, and ultimately, increase sales. Start with the simple shortcode options, and gradually explore more advanced techniques as you become more comfortable with WooCommerce! Good luck!
