WooCommerce gives you a few options as to what you can show on your archive pages:
- Products
- Categories (on shop page) or subcategories (on category pages)
- Both products and categories
When you are setting up a store, normally you’d select the third option, products and categories/subcategories. This implies that visitors can either select products right from the home page or refine their search by clicking through to a product category archive.
In this tutorial you will learn how to display categories in a separate list before displaying products.
- Distinguish code of WooCommerce which is used to output categories and subcategories on archive pages
- Create plugin for code
- Write a function to put categories or subcategories before product listings
- Style the output
Go to WooCommerce > Settings, select the Products tab, and then choose the Display option. For each of the Shop Page Display and Default Category Display options, select Show both.
Click the Save changes button to save.
As it happens, in light of the fact that there are three product categories but here one of the product category is archived.
Identifying WooCommerce Code to Output Categories and Products in Archives
The file WooCommerce uses to display archive pages is archive-product.php, which is in the templates folder.
Inside that file, you can find this code, which outputs the categories and products.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php /** * woocommerce_before_shop_loop hook * * @hooked woocommerce_result_count - 20 * @hooked woocommerce_catalog_ordering - 30 */ do_action( 'woocommerce_before_shop_loop' ); ?> <?php woocommerce_product_loop_start(); ?> <?php woocommerce_product_subcategories(); ?> <?php while ( have_posts() ) : the_post(); ?> <?php wc_get_template_part( 'content', 'product' ); ?> <?php endwhile; // end of the loop. ?> <?php woocommerce_product_loop_end(); ?> |
So there’s a woocommerce_product_subcategories() function which is outputting the categories or subcategories before running the loop which outputs the products. The function is pluggable, which means override it in theme.
Now create a new function that outputs the product categories or subcategories, and hook it to the woocommerce_before_shop_loop action. WooCommerce adds clears to each third product listing, use the woocommerce_product_subcategories() function or an edited version of it to display the categories.
Create Plugin
In your wp-content/plugins directory, create a new folder and give it a unique name. I’m calling mine cloudways-products-categories-in-archives. Inside that, create a new file, again with a unique name. I’m using the same name: cloudways-product.php
Open your file and add this code to it.
|
1 2 3 4 5 6 7 |
<?php /** * Plugin Name: WooCommerce products and categories/subcategories separately in archive pages * Description: Display products and categories/subcategories as separate lists in product archive pages * Version: 1.0 **/ |
Save your file and activate the plugin via the WordPress admin.
Function Writing
Go to WooCommerce > Settings, select the Products tab, and then choose the Display option. For each of the Shop Page Display and Default Category Display options, select Show products. Save your changes.
In your plugin file, add this:
|
1 2 3 4 |
function cloudways_product_subcategories( $args = array() ) { } add_action( 'woocommerce_before_shop_loop', 'cloudways_product_subcategories', 50 ); |
Now add this code inside the function:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
$parentid = get_queried_object_id(); $args = array( 'parent' => $parentid ); $terms = get_terms( 'product_cat', $args ); if ( $terms ) { echo '<ul class="product-cats">'; foreach ( $terms as $term ) { echo '<li class="category">'; woocommerce_subcategory_thumbnail( $term ); echo '<h2>'; echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">'; echo $term->name; echo '</a>'; echo '</h2>'; echo '</li>'; } echo '</ul>'; } |
The code above defines the current queried object and defines its ID as $parentid. It uses get_terms() to identify terms with the currently queried item as their parent. For each term, it display the category image using woocommerce_subcatgeory_thumbnail(), followed by the category name in a link to its archive.
Now save your file and refresh the page. It looks like this.
The categories are shown, however they require some styling.
Styling of Category Listings
In your plugin folder, create a folder called css, and inside that, create a file called style.css.
Now in your plugin file having name cloudways-product.php . Add the following code
|
1 2 3 4 5 6 7 8 9 10 11 |
function cloudways_product_cats_css() { /* register the stylesheet */ wp_register_style( 'cloudways_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) ); /* enqueue the stylsheet */ wp_enqueue_style( 'cloudways_product_cats_css' ); } add_action( 'wp_enqueue_scripts', 'cloudways_product_cats_css' ); |
This correctly en-queues the style sheet you’ve just created.
Now open your style sheet and add the code below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
ul.product-cats li { list-style: none; margin-left: 0; margin-bottom: 4.236em; text-align: center; position: relative; } ul.product-cats li img { margin: 0 auto; } @media screen and (min-width:768px) { ul.product-cats { margin-left: 0; clear: both; } ul.product-cats li { width: 29.4117647059%; float: left; margin-right: 5.8823529412%; } ul.product-cats li:nth-of-type(3) { margin-right: 0; } } |
Now check main shop page again.
Here’s the Music category archive.
Conclusion
Product categories are an extraordinary element of WooCommerce, yet the way they are shown is not generally perfect. In this tutorial you have figured out how to create a plugin that outputs product categories or subcategories independently from the product listings and afterward you have styled your category listings.
Start Growing with Cloudways Today.
Our Clients Love us because we never compromise on these
