Displaying WooCommerce Categories on Your Shop Page: A Beginner’s Guide
So you’ve built your WooCommerce store, stocked it with amazing products, and now you want to make it easier for customers to find what they’re looking for. One of the most effective ways to do that is to display product categories directly on your shop page. Think of it like having clear signage in a physical store – it guides shoppers to the sections that interest them most.
This guide will walk you through several methods to achieve this, from the simplest settings to slightly more advanced code snippets. Don’t worry, we’ll keep it beginner-friendly!
Why Show Categories on Your Shop Page?
Before we dive into the “how,” let’s understand the “why.” Displaying categories on your shop page offers several benefits:
- Improved Navigation: It helps customers quickly navigate your store and find specific types of products. Imagine a clothing store where you immediately see sections for “Men’s Wear,” “Women’s Wear,” and “Kids’ Wear.” That’s the same principle!
- Enhanced User Experience: A well-organized shop page is more inviting and less overwhelming for visitors. A happy customer is more likely to browse and, ultimately, buy!
- Better SEO: Search engines favor websites with clear and logical navigation. Displaying categories helps them understand your store’s structure and improves its crawlability, potentially boosting your search rankings. For example, someone searching “women’s running shoes” might be more likely to find your store if you have a clearly defined “Women’s Shoes” category.
Method 1: Using the WooCommerce Customizer (The Easiest!)
This is the quickest and easiest way to display categories on your shop page. It doesn’t require any coding and is perfect for beginners.
1. Go to Appearance > Customize in your WordPress admin dashboard.
2. Select “WooCommerce” > “Product Catalog.” (You might need to install and activate WooCommerce first if you haven’t already!)
3. Under “Shop page display,” choose “Show categories.” You also have the option to choose “Show categories & products” if you want both.
4. Customize Category Display: Here you can also choose whether to show subcategories on the main shop page.
That’s it! Save and publish your changes. Now visit your shop page to see your product categories beautifully displayed.
Method 2: Using a WooCommerce Shortcode
Shortcodes are handy little snippets that allow you to easily embed content into your pages or posts. WooCommerce provides a built-in shortcode for displaying product categories.
1. Go to the page where you want to display the categories. This is typically your “Shop” page.
2. Edit the page.
3. Add a “Shortcode” block (if you’re using the Gutenberg editor) or add the shortcode directly to the content area.
4. Insert the following shortcode:
[product_categories]
5. Save and publish the page.
You can customize this shortcode with various attributes:
- `number=”4″`: Limits the number of categories to display (e.g., only show the top 4 categories).
- `parent=”0″`: Displays only top-level categories (not subcategories).
- `columns=”3″`: Specifies the number of columns to arrange the categories in.
For example, to display the top 4 categories in 2 columns, use:
[product_categories number="4" columns="2"]
Experiment with these attributes to achieve the desired layout.
Method 3: Adding Code to Your `functions.php` File (For More Control)
This method involves adding custom code to your theme’s `functions.php` file. Be cautious when editing this file, as errors can break your website. It’s always recommended to use a child theme so updates to your main theme don’t overwrite your changes.
1. Access your theme’s `functions.php` file. You can do this through your WordPress admin panel (Appearance > Theme Editor) or via FTP.
2. Add the following code snippet:
add_action( 'woocommerce_before_shop_loop', 'display_product_categories_on_shop_page', 20 );
function display_product_categories_on_shop_page() {
if ( is_shop() && ! is_product_category() ) {
echo ‘
- ‘;
- ‘ . $cat->name . ‘
$args = array(
‘taxonomy’ => ‘product_cat’,
‘orderby’ => ‘name’,
‘show_count’ => 0,
‘pad_counts’ => 0,
‘hierarchical’ => 1,
‘title_li’ => ”,
‘hide_empty’ => 0
);
$all_categories = get_categories( $args );
foreach ( $all_categories as $cat ) {
$category_link = get_term_link( $cat->slug, ‘product_cat’ );
echo ‘
‘;
}
echo ‘
‘;
}
}
Explanation:
- `add_action(‘woocommerce_before_shop_loop’, ‘display_product_categories_on_shop_page’, 20);`: This line hooks our function `display_product_categories_on_shop_page` into the WooCommerce shop page, specifically before the product loop begins (that’s where the products themselves are displayed). The `20` is the priority, controlling the order in which functions are executed (lower numbers execute earlier).
- `if ( is_shop() && ! is_product_category() ) { … }`: This condition ensures the code only runs on the main shop page and *not* on category archive pages (to avoid redundancy).
- `get_categories($args);`: This function retrieves all product categories based on the arguments we provide. The arguments control the order, display of counts, hierarchy, and more.
- The `foreach` loop iterates through each category and generates a list item (`
- `) with a link (``) to that category.
- `echo ‘
- ‘;` and `echo ‘
‘;`: These lines create an unordered list (`
- `) with the class `product-categories`. You can then use CSS to style this list.
3. Save the `functions.php` file.
4. Style the categories (Optional): The code above adds a `product-categories` class to the list of categories. You can now add custom CSS to your theme’s stylesheet (or through the WordPress Customizer under “Additional CSS”) to style the appearance of the categories. For example:
.product-categories {
list-style: none; /* Remove bullet points */
padding: 0;
margin: 0;
display: flex; /* Arrange categories horizontally */
flex-wrap: wrap; /* Allow categories to wrap to the next line */
}
.product-categories li {
margin-right: 10px; /* Add spacing between categories */
}
Important Considerations
- Child Theme: Always use a child theme when making modifications to your theme’s files. This prevents your changes from being overwritten during theme updates.
- Backup: Before making any code changes, back up your website.
- Plugin Conflict: If you encounter issues, deactivate other plugins one by one to identify potential conflicts.
- CSS Styling: The appearance of the categories depends on your theme’s CSS. You may need to add custom CSS to style them to your liking.
- Choose the right method: Start with the easiest option (Customizer). If you need more customization, explore the shortcode. Code modifications provide the most flexibility but require more technical knowledge.
By implementing one of these methods, you can significantly improve your WooCommerce store’s navigation and user experience, leading to increased customer satisfaction and potentially higher sales! Good luck!
