How to Show One Product per Category in WordPress (And Why You Should)
As an ecommerce store owner, you know the importance of effectively showcasing your products to visitors. One key aspect of this is how you display products based on category. Showing just one product per category can be a powerful technique to improve conversion rates and enhance the user experience.
However, achieving this in WordPress isn't always straightforward. The native WooCommerce functionality doesn't include a built-in way to display a single product per category. This can leave store owners searching for solutions, with limited information available on the best approaches.
In this article, we'll explore why showing one product per category is beneficial, and provide step-by-step guidance on how to implement this on your WordPress site. We'll cover both custom code and plugin-based solutions, so you can choose the option that best fits your needs.
Why Show One Product per Category?
Before we dive into the technical implementation, let's first understand the advantages of displaying a single product per category on your WordPress site:
Improved User Experience: When visitors land on your category pages, they're often overwhelmed by a large number of product options. Showing just one product per category helps to focus their attention, making it easier for them to navigate and find what they're looking for.
Increased Conversion Rates: By highlighting a single, carefully selected product per category, you're directing your visitors' attention to your best-selling or most popular items. This can lead to higher click-through and conversion rates, as users are more likely to engage with and purchase the featured products.
Enhanced Showcase of Inventory: Rather than cramming multiple products onto a single category page, the one-product-per-category approach allows you to showcase your full inventory in a more organized and visually appealing manner. This can help visitors better understand the breadth of your product offerings.
Stronger Branding and Merchandising: The ability to handpick the specific product you want to feature per category enables you to align your merchandising with your brand's messaging and marketing strategy. This can contribute to a more cohesive and professional-looking online store.
Implementing the One-Product-per-Category Solution
Now that we've covered the benefits, let's dive into the technical implementation. There are a few different approaches you can take to display a single product per category in WordPress:
Custom Code Solution
If you're comfortable with PHP and WordPress development, you can create a custom solution using the following steps:
- Create a Custom WooCommerce Loop: Begin by modifying the default WooCommerce product loop to display only one product per category. You can do this by adding the following code to your theme's
functions.php
file:
add_action( 'woocommerce_before_shop_loop', 'show_one_product_per_category', 10 );
function show_one_product_per_category() {
global $wp_query;
$current_category = '';
$products_shown = 0;
while ( have_posts() ) {
the_post();
$product_category = get_the_terms( get_the_ID(), 'product_cat' );
if ( $product_category && $product_category[0]->slug !== $current_category ) {
$current_category = $product_category[0]->slug;
$products_shown = 0;
}
if ( $products_shown == 0 ) {
woocommerce_content();
$products_shown++;
} else {
continue;
}
}
// Reset the query
wp_reset_query();
}
This code modifies the default WooCommerce loop to check the current category and only display the first product within each category. The $products_shown
variable keeps track of how many products have been displayed for the current category.
- Style the Product Display: To ensure your single product display looks visually appealing, you'll need to add some custom CSS. This could include adjusting the product image size, adding spacing between categories, or centering the product information. Here's an example:
.single-product-per-category {
text-align: center;
margin-bottom: 40px;
}
.single-product-per-category img {
max-width: 300px;
height: auto;
}
- Optionally, Add Filtering Options: To give your users more control over the products they see, you can add filtering options to your category pages. This could include allowing them to switch between the single-product view and the traditional grid view. You can achieve this by modifying the code in step 1 to include a check for a custom parameter in the URL.
Plugin-Based Solution
If you prefer a more straightforward, plugin-based approach, there are a few options available:
-
WooCommerce Show Single Product per Category: This free plugin from WooCommerce.com allows you to easily display a single product per category on your WooCommerce store. After installing and activating the plugin, you can configure the settings to customize the display, such as choosing the product to show and adjusting the layout.
-
Flatsome Product Categories: The Flatsome theme for WordPress includes a built-in feature to display a single product per category. While Flatsome is a premium theme, this functionality can be accessed even if you're using a different theme. You can do this by adding the following shortcode to your category pages:
[ux_product_categories style="normal" columns="4" cat="category-slug"]
Replace category-slug
with the slug of the category you want to display.
- Custom Post Type UI: While not a dedicated plugin for the one-product-per-category feature, the Custom Post Type UI plugin can be used to create a custom post type for featured products. You can then use this post type to manually select and display the single product you want to feature for each category.
When choosing a plugin-based solution, be sure to thoroughly test the functionality and ensure it meets your specific requirements. You may also want to consider the plugin's compatibility with your current WordPress and WooCommerce versions, as well as its overall maintenance and support.
Measuring the Impact
Regardless of the approach you choose, it's important to measure the impact of displaying a single product per category. This will help you determine the effectiveness of the strategy and make any necessary adjustments.
Some key metrics to track include:
-
Conversion Rate: Monitor the conversion rate (the percentage of visitors who make a purchase) for your category pages before and after implementing the one-product-per-category approach. This will help you assess the impact on overall sales.
-
Average Order Value: Observe whether the average order value increases, as visitors may be more likely to purchase the featured product.
-
Bounce Rate: Check if the bounce rate (the percentage of visitors who leave your site after viewing only one page) decreases, indicating an improved user experience.
-
Time on Page: Analyze the time visitors spend on your category pages, as a longer average time on page may suggest that users are engaging more with the featured product.
You can use a comprehensive analytics tool like Flowpoint.ai to track these metrics and gain deeper insights into the performance of your one-product-per-category implementation. Flowpoint's advanced analytics and AI-powered recommendations can help you continuously optimize your ecommerce store for maximum conversion rates.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.
Conclusion
Displaying a single product per category on your WordPress site can be a highly effective strategy to improve user experience, boost conversion rates, and showcase your product inventory in a more organized and visually appealing manner.
In this article, we've explored the benefits of the one-product-per-category approach and provided step-by-step guidance on how to implement it using both custom code and plugin-based solutions. By carefully selecting the featured products and monitoring the performance metrics, you can continuously refine your ecommerce store's product presentation and drive more sales.
Remember, the key to success is finding the solution that best fits your specific needs and aligns with your overall business and marketing goals. With the right approach, you can transform your category pages into highly engaging and converting experiences for your customers.