Woocommerce How To Show Subcategories On Home Page

WooCommerce: How to Show Subcategories on Your Home Page (Boost Your Sales!)

Introduction

Want to improve your WooCommerce store’s navigation and boost sales? Displaying subcategories directly on your home page is a powerful strategy. It allows customers to quickly find what they’re looking for, leading to a better user experience and increased conversions. This article will guide you through the process of showing subcategories on your WooCommerce home page using various methods, from simple code snippets to plugin solutions. We’ll also discuss the benefits and drawbacks of each approach, helping you choose the best option for your needs. Let’s dive in and get your subcategories showcased!

Why Show Subcategories on Your Home Page?

Showing subcategories on your home page provides several key benefits:

• Improved Navigation: Makes it easier for customers to find specific products.
• Enhanced User Experience: Creates a more intuitive and user-friendly shopping experience.
• Increased Sales: By simplifying the search process, you encourage customers to browse more products, increasing the likelihood of a purchase.
• Better SEO: Clear category structure helps search engines understand your site, improving your rankings.
• Reduced Bounce Rate: Visitors are more likely to stay on your site if they can easily find what they need.

Main Part

There are several methods to display WooCommerce subcategories on your home page. We’ll cover three popular approaches: using code snippets, utilizing a WooCommerce plugin, and using the WooCommerce Shortcode.

Method 1: Using Code Snippets (Theme’s `functions.php`)

This method involves adding code directly to your theme’s `functions.php` file. Always back up your website before making any changes to this file. If you are uncomfortable doing so, consider hiring a developer.

1. Access Your `functions.php` File:

You can access this file through your WordPress admin panel by going to Appearance > Theme Editor. Be very careful editing this file, as incorrect code can break your site.

2. Add the Following Code Snippet:

 function woocommerce_display_subcategory_on_homepage() { $args = array( 'taxonomy' => 'product_cat', 'orderby' => 'name', 'show_count' => 0, // 1 for showing post counts 'pad_counts' => 0, Check out this post: How To Customize Woocommerce Shop Page Hover Effects // 1 for padding post counts 'hierarchical' => 1, // 1 for hierarchical arrangement 'title_li' => '', // Remove the default "Categories" title 'hide_empty' => 0 // 1 to hide empty categories ); 

echo ‘

‘;

wp_list_categories( apply_filters( ‘woocommerce_subcategory_args’, $args ) );

echo ‘

‘;

}

add_action( ‘homepage’, ‘woocommerce_display_subcategory_on_homepage’ ); // Replace ‘homepage’ with your desired hook

3. Understanding the Code:

• `$args`: This array defines the parameters for displaying the categories.
• `’taxonomy’ => ‘product_cat’`: Specifies that we’re working with product categories.
• `’orderby’ => ‘name’`: Orders the categories alphabetically by name.
• `’show_count’ => 0’`: Hides the product count for each category. Change to `1` to display.
• `’hierarchical’ => 1’`: Displays the categories in a hierarchical structure (with subcategories nested under their parent categories).
• `’title_li’ => ”`: Removes the default “Categories” title.
• `’hide_empty’ => 0’`: Displays even categories that don’t have any products. Change to `1` to hide empty categories.
• `wp_list_categories()`: This WordPress function generates the list of categories.
• `add_action( ‘homepage’, ‘woocommerce_display_subcategory_on_homepage’ )`: This is the most important part. It hooks your function `woocommerce_display_subcategory_on_homepage` into the `homepage` action hook. You’ll need to replace `’homepage’` with the correct hook for your specific theme’s home page layout. Consult your theme’s documentation or a developer to find the correct hook. Common hooks include `woocommerce_before_main_content`, `woocommerce_after_main_content`, and theme-specific hooks.

4. Styling the Output:

The code snippet outputs an unordered list (`

`). You can style this list using CSS in your theme’s `style.css` file to match your website’s design. For example:

.subcategories {

list-style: none;

padding: 0;

}

.subcategories li {

margin-bottom: 5px;

}

.subcategories a {

text-decoration: none;

color: #333;

}

.subcategories a:hover {

color: #007bff; /* Change to your desired hover color */

}

Method 2: Using a WooCommerce Plugin

Several WooCommerce plugins simplify the process of displaying subcategories on your home page. Here are a couple of popular options:

• WooCommerce Category Slider: Allows you to display categories and subcategories in a visually appealing slider format.
• WooCommerce Category Showcase: Provides various layout options for showcasing your categories, including grids and lists.

To use a plugin:

1. Install and Activate the Plugin: Go to Plugins > Add New in your WordPress admin panel, search for the desired plugin, install it, and activate it.

2. Configure the Plugin: Each plugin will have its own settings page. Follow the plugin’s documentation to configure the layout, appearance, and other options. Typically, plugins use shortcodes or widgets to display the categories.

Method 3: Using the WooCommerce `[product_categories]` Shortcode

WooCommerce provides a built-in shortcode specifically for displaying product categories: `[product_categories]`. You can place this shortcode on your home page using the WordPress block editor (Gutenberg) or a Read more about How To Set Up Shopify With Woocommerce In WordPress page builder plugin like Elementor or Beaver Builder.

1. Edit Your Home Page: Go to Pages > All Pages and edit your home page.

2. Add a Shortcode Block (Gutenberg) or a Shortcode Widget (Page Builder):

• Gutenberg: Add a “Shortcode” block.
• Elementor/Beaver Builder: Add a “Shortcode” widget.

3. Insert the Shortcode:

• To display all product categories: `[product_categories]`
• To display only subcategories of a specific parent category (replace `parent_id` with the actual ID of the parent category): `[product_categories parent=”parent_id”]`
• To display a specific number of categories: `[product_categories number=”5″]`
• To order categories: `[product_categories orderby=”name” order=”ASC”]`
• To combine options: `[product_categories number=”5″ parent=”parent_id” orderby=”name” order=”ASC”]`

4. Update Your Page: Save your changes.

Important Shortcode Attributes:

• `number`: The number of categories to display. Defaults to all.
• `parent`: The ID of the parent category. Set to `0` to show only top-level categories. Omit to show subcategories of the *current* category (if used on a category archive page).
• `orderby`: How to order the categories (`name`, `slug`, `term_group`, `term_id`, `id`, `count`). Defaults to `name`.
• `order`: Ascending (`ASC`) or descending (`DESC`). Defaults to `ASC`.
• `columns`: The number of columns to display the categories in (works well with image display).
• `hide_empty`: Hide categories with no products (`1`) or show them (`0`). Defaults to `1`.

Conslusion

Showing WooCommerce subcategories on your home page is a simple yet effective way to enhance your store’s usability and boost sales. We’ve explored three methods: code snippets, plugins, and the built-in shortcode. While code snippets offer more customization, they require technical expertise. Plugins provide a user-friendly solution, but might introduce extra overhead. The shortcode provides a simple, built-in option, but lacks the flexibility of custom coding. Choose the method that best suits your skills and your website’s needs. Remember to always back up your website before making any changes and test thoroughly after implementation. By implementing one of these methods, you’ll be well on your way to creating a more engaging and profitable WooCommerce store!