How to Show WooCommerce Categories on Your Shop Page: A Beginner’s Guide
So, you’ve set up your shiny new WooCommerce store, added amazing products, but your shop page looks…empty? Or maybe it just shows products without any organization? One common issue new WooCommerce store owners face is getting those all-important product categories to display prominently on the shop page.
Don’t worry, you’re not alone! It’s a super common hurdle, and this guide will walk you through the simple steps to fix it. Think of it like this: imagine walking into a supermarket and everything is just piled randomly. You’d never find anything! Categories are the aisles that guide your customers.
Why Displaying Categories is Crucial
Before we dive into the *how*, let’s briefly touch on the *why*. Showing your product categories on the shop page offers several key benefits:
- Improved User Experience: Customers can quickly and easily navigate to the products they’re looking for. Think “shirts,” “pants,” or “accessories” instead of scrolling through an endless list.
- Better SEO: Categories help search engines understand the structure of your store, improving your overall search visibility. Google will have a much easier time understanding what kind of products you offer.
- Increased Sales: Clear categories lead to better product discovery, which ultimately can lead to more sales. Easy navigation leads to happy customers who spend more!
Method 1: Using WooCommerce Settings (The Easiest Way!)
This is by far the easiest method and the one you should try first. WooCommerce usually handles this automatically, but sometimes the settings need a nudge.
1. Log in to your WordPress Dashboard. This is your home base for everything WordPress and WooCommerce.
2. Navigate to Appearance > Customize. This opens the WordPress customizer.
3. Find the “WooCommerce” Tab (or “Product Catalog”). The exact wording might vary depending on your theme.
4. Click on “Product Catalog” or “Shop Page Display.” This will give you options for how your shop page is displayed.
5. Look for a setting called “Shop Page Display” or similar. This is the key!
6. Choose “Show categories” or “Show categories & products.” The first option *only* displays categories; the second option shows categories and products. Choose the one that best fits your vision for your shop page.
7. Click “Publish” to save your changes. Don’t forget this crucial step! Your changes won’t be live until you publish them.
Real-life example: Imagine you are selling handmade jewelry. You might want the categories “Necklaces,” “Earrings,” and “Bracelets” to appear prominently. Choosing “Show categories & products” would display these categories AND, below them, show a selection of products from each category.
Method 2: Using WooCommerce Hooks (For More Advanced Customization)
If the built-in settings aren’t giving you the precise look and feel you want, you can delve into WooCommerce hooks. This involves adding a little bit of PHP code to your theme’s `functions.php` file (or, preferably, a child theme’s `functions.php` to avoid losing changes when the theme updates).
Important Note: Editing your theme’s `functions.php` file can be risky if you’re not comfortable with code. Always back up your website before making any changes! A child theme is strongly recommended to prevent updates from overwriting your code.
1. Create a Child Theme (Highly Recommended). If you don’t have one, create a child theme of your active theme.
2. Access your `functions.php` file. You can do this through your WordPress dashboard (Appearance > Theme File Editor – but be *very* careful!) or via FTP.
3. Add the following code to your `functions.php` file:
<?php /**
$args = wp_parse_args( array(
‘before’ => ‘
- ‘,
‘after’ => ‘
‘,
‘echo’ => true,
‘hide_empty’ => 1, // Show categories even if they have no products
‘hierarchical’ => 1, //Show the product category tree
), $args );
$product_categories = get_terms( ‘product_cat’, $args );
if ( $product_categories ) {
echo $args[‘before’];
foreach ( $product_categories as $category ) {
echo ‘
echo ‘‘ . esc_html( $category->name ) . ‘‘;
echo ‘
‘;
}
echo $args[‘after’];
}
}
remove_action( ‘woocommerce_before_shop_loop’, Check out this post: How To Make Custom Woocommerce Theme ‘woocommerce_output_all_products_link’, 10 );
remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_result_count’, 20 );
remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_catalog_ordering’, 30 );
add_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_show_product_categories_on_shop_page’, 10 );
?>
4. Save the `functions.php` file.
5. Refresh your shop page. You should now see your product categories displayed.
Explanation of the code:
- `woocommerce_show_product_categories_on_shop_page()`: This function retrieves and displays the product categories.
- `get_terms( ‘product_cat’, $args )`: This WordPress function fetches all the terms (categories) associated with the `product_cat` taxonomy.
- `foreach ( $product_categories as $category )`: This loop iterates through each category and creates a link to its archive page.
- `add_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_show_product_categories_on_shop_page’, 10 )`: This *hook* tells WordPress to execute our `woocommerce_show_product_categories_on_shop_page` function right before the main shop loop begins.
- `remove_action(…)`: This removes the default WooCommerce output from the before shop loop which may cause your category display to show in the wrong spot.
Customizing the Code: You can modify the `$args` array to customize the output:
- `’hide_empty’ => 0`: Show categories even if they have no products.
- Change the HTML structure within the `foreach` loop to customize the appearance of the category links. You could add images, descriptions, etc.
Method 3: Using a Plugin
If you prefer not to mess with code, several WooCommerce plugins can help you display your categories on the shop page with advanced features. Some popular options include:
- WooCommerce Category Showcase: Offers visually appealing category grids and carousels.
- Category and Product Filter: Enhances the filtering capabilities of your store.
- WooCommerce Product Table: Displays products in a table format, with category filters.
Simply install and activate the plugin of your choice, then follow its specific configuration instructions to display your product categories.
Troubleshooting
- Categories Still Not Showing? Double-check that you’ve assigned products to categories in the product editing screen. Categories with no products won’t display if `’hide_empty’ => 1` is enabled.
- Categories Showing, But in the Wrong Place? Your theme might be overriding the WooCommerce templates. You might need to consult your theme’s documentation or contact the theme developer for assistance.
- CSS Styling Issues? Use your browser’s developer tools (usually by pressing F12) to inspect the HTML and CSS of your category links and add Check out this post: How To Sort Product By Category In Woocommerce custom CSS to your theme to style them appropriately.
By following these steps, you’ll be well on your way to a beautifully organized WooCommerce shop page that delights your customers and boosts your sales! Good luck!
