Woocommerce How To Show Categories On Shop Page

WooCommerce: How to Show Categories on Your Shop Page (Step-by-Step Guide)

Introduction:

Want to improve the navigation and visual appeal of your WooCommerce store? Displaying product categories directly on your shop page is a fantastic way to guide customers and help them find exactly what they’re looking for. By showcasing your categories, you’re essentially creating a visual sitemap that enhances user experience and potentially boosts sales. This article will guide you through the process of how to show categories on your WooCommerce shop page, covering different methods and considerations to help you achieve the best result for your store.

Main Part:

There are several ways to display categories on your WooCommerce shop page. Let’s explore the most common and effective methods:

1. Using the WooCommerce Customizer Settings

This is the simplest and most direct method, perfect for beginners.

• Go to Appearance > Customize: In your WordPress dashboard, navigate to “Appearance” and then click on “Customize.”
• Navigate to WooCommerce > Product Catalog: Within the Customizer, find the “WooCommerce” section and click on “Product Catalog.”
• Choose “Show categories” or “Show categories & products”: Look for the “Shop page display” option. Here, you have three choices:
• Show products: This is the default setting, displaying only products.
• Show categories: This displays only product categories on the shop page.
• Show categories & products: This displays categories first, followed by products.
• Publish your changes: Once you’ve selected your preferred option, click the “Publish” button at the top of the Customizer.

This method is quick and easy, but offers limited customization options. You can’t control the layout or appearance of the categories beyond the basic setting.

2. Using WooCommerce Shortcodes

WooCommerce provides shortcodes that allow you to embed specific elements, including categories, into pages.

• The `[product_categories]` shortcode: This shortcode is specifically designed to display product categories.
• Create or edit your shop page: Go to “Pages” and either create a new page or edit your existing shop page.
• Insert the shortcode: Add a shortcode block to your page and insert the `[product_categories]` shortcode.
• Customize the shortcode (Optional): You can customize the shortcode with attributes:
• `number`: Limits the number of categories displayed. Example: `[product_categories number=”4″]`
• `columns`: Specifies the number of columns for the category display. Example: `[product_categories number=”4″ columns=”2″]`
• `orderby`: Determines the order in which categories are displayed (e.g., `name`, `count`). Example: `[product_categories orderby=”name”]`
• `hide_empty`: Hides empty categories if set to 1. Example: `[product_categories hide_empty=”1″]`
• Update your page: Save your changes and preview your shop page.

Using shortcodes gives you more control over the number of categories displayed and their arrangement.

3. Using a WooCommerce Plugin

Several plugins offer advanced features for displaying and customizing product categories on your shop page.

• Search for “WooCommerce Category Display” plugins: In your WordPress dashboard, go to “Plugins > Add New” and search for plugins that offer category display functionalities. Some popular options include:
• Category Order and Taxonomy Terms Order: Allows you to reorder categories easily.
• WooCommerce Category Showcase: Provides visually appealing category layouts.
• Advanced Category Listing: Offers extensive customization options.
• Install and activate the plugin: Choose a plugin that suits your needs, install it, and activate it.
• Configure the plugin settings: Follow the plugin’s documentation to configure its settings and customize the category display on your shop page.

Plugins often provide the most flexibility and control over the look and feel of your category display, allowing for custom layouts, images, and more.

4. Custom Coding (Advanced)

For developers or those comfortable with code, custom coding offers the ultimate control over the category display.

• Edit your theme’s `functions.php` file: This file contains custom functions for your theme. Be careful when editing this file, as errors can break your site. It’s recommended to use a child theme for customizations.
• Use the `woocommerce_before_shop_loop` hook: This hook allows you to add content before the product loop on the shop page.
• Retrieve and display categories: Use WooCommerce functions like `get_terms()` to retrieve product categories and then loop through them to display them in your desired format.

Here’s a basic example:

add_action( 'woocommerce_before_shop_loop', 'display_product_categories_before_shop_loop', 20 );

function display_product_categories_before_shop_loop() {

$args = array(

‘taxonomy’ => ‘product_cat’,

‘orderby’ => ‘name’,

‘show_count’ => 0,

‘pad_counts’ => 0,

‘hierarchical’ => 1,

‘title_li’ => ”,

‘hide_empty’ => 1

);

echo ‘

‘;

wp_list_categories( $args );

echo ‘

‘;

}

• Customize the output with CSS: Use CSS to style the category display to match your website’s design.

This method requires coding knowledge but allows for complete customization and control over the category display.

Considerations for Choosing a Method:

• Ease of Use: The Customizer is the easiest, followed by shortcodes. Plugins offer more features but require configuration. Custom coding requires technical skills.
• Customization Options: Custom coding offers the most flexibility, followed by plugins, shortcodes, and then the Customizer.
• Performance: Plugins can sometimes impact performance, so choose lightweight and well-coded options.

Conclusion:

Showing categories on your WooCommerce shop page is a simple yet effective way to improve navigation and enhance the user experience. Whether you opt for the simplicity of the WooCommerce Customizer, the flexibility of shortcodes, the advanced features of a plugin, or the complete control of custom coding, understanding how to implement these methods will allow you to create a more user-friendly and visually appealing online store. Remember to choose the method that best suits your technical skills and desired level of customization. By carefully considering your options, you can create a shop page that effectively guides customers to the products they’re looking for, ultimately leading to increased sales and customer satisfaction.