How To Customize Product Category Pages in WooCommerce

woocommerce category page template

Most WooCommerce store owners often focus on improving product pages, cart pages, and checkout pages because they directly affect customer shopping experiences.

This effort, of course, is highly appreciated and worth their while. But it seems such a waste to overlook other pages that are also helpful for enhancing the user experience (UX). And, the WooCommerce product category page is one of the cases worth considering.

This kind of page shows all the products of the same category in your WooCommerce. In other words, they allow your customers to see similar items at the same time and place. If you can take advantage of them, then these custom product category pages will greatly contribute to promoting your online store.

If you have neglected them for a long time, then it is time to stop and customize WooCommerce category pages to the best.

To get how the category pages are so important and how you can customize them without any coding, please scroll down right now.

customize WooCommerce category page

What is a WooCommerce Category Page?

WooCommerce allows users to list products from a specific category or subcategory in a grid-style layout. By default, large product images with their name, price, and purchase options will be displayed. Here is what the default WooCommerce product category page looks like on the front end:

This way of displaying products is definitely not suitable for all scenarios. In other words, the default WooCommerce category page template might not work for you. It can even work against you, depending on the type of your store and the products you sell.

Why display a custom WooCommerce category page?

As said above, if you can create custom WooCommerce category pages, they will bring your WooCommerce store lots of benefits.

Right in this part, we will show you the three reasons why you should consider customizing your category pages in WooCommerce. Let’s see!

Boost your sales

Do you know on every online store, 70% of sales come from category pages? It means the pages directly contribute to the success of your business and customers really love to visit these pages, even in some cases, they like to visit them more than product pages or shop pages.

As usual, customers only come to your product page when they know exactly the item they want and are ready to purchase. Meanwhile, the shop page is home to hundreds or thousands of different products, which makes potential customers feel a bit confused.

As a result, many people usually tend to approach the pages optimized with categorization. It is the category page whose scope is not too broad as the shop page or too narrow as the product pages.

Therefore, creating a good WooCommerce product category page promises a high conversion rate.

Improve your SEO

Optimizing product pages is a must in WooCommerce stores. But do you know, a category page is also a good place for you to improve SEO?

Yeah, it’s a great option for SEO. Many store owners usually have thin content on their category pages. Then, it’s a good opportunity for you. Grab it right now!

Do SEO for your eCommerce category pages by searching for keywords and writing some pieces of content that describe a specific group of products. If you can do that, surely Google will love your customized category page much more than a default one and any other pages with poor SEO from your competitors.

Make your store more eye-catching

We must say that all your WooCommerce pages should be designed carefully because each of them is able to create a good first impression on users when they somehow or others come to visit your store.

What’s more, WooCommerce product category pages are where similar items are displayed. Google sometimes takes people to your category pages more regularly than your shop page because of their narrow scopes.

Therefore, don’t miss the opportunity to let your customers see how your website is designed cleverly, especially through the category pages.

In short, increasing sales, enhancing SEO, and beautifying your store are all the things you can get with custom category pages WooCommerce. Then, it is worthwhile to modify WooCommerce category pages, right? It is worth noting that modifications to your WooCommerce website should be done with the unique needs of the disability community in mind. You might want to look into using a WooCommerce accessibility plugin, to that end.

When You Should Consider Customizing Category Pages

Now, let’s see some scenarios in which the default WooCommerce category page template may not work.

When You Need to Display Extra Information 

The default WooCommerce category page template may not be optimal for products that need to display detailed information.

For example, if you sell flowers, you may want to display information like your plants’ family name, their lifespan, and crucial care details. This additional information can help your customers make the correct decision when purchasing from you.

When You Offer Lots of Variations

If you sell products with lots of variations, it may be helpful for customers to pick one without going through many web pages. In other words, customers should be able to browse and add product variations to their cart from a single WooCommerce category page.

Let’s use an online fitness store that sells equipment like jump ropes, weights, and yoga mats as an example. If it lists product variations separately, customers can check out faster.

When You Sell Non-Visual Products

For unappealing products, a grid-style layout that focuses on thumbnails may hinder purchasing decisions. You’ll want to choose a different approach instead.

For example, hand tools like wrenches don’t need large thumbnails. Instead, you can list them neatly and organize them along with product details. This makes customers construct more informed purchasing decisions and pay faster.

Now what you need to do is look for an effective way to edit WooCommerce category pages.

Luckily, there are several options for you to select. Right now, we will let you see one of them!

How to customize product category pages in WooCommerce using WooBuilder

Woobuilder page builder is a great add-on offered by Woostify. This powerful tool allows customizing numerous elements on the WooCommerce thank you page, product page, shop page, account page, cart page, checkout page, and category page.

Now we will show you how to edit the product category page for WooCommerce and WordPress using the WooBuilder add-on.

Step 1: Create a product category page template in WordPress

To set upa category page in WordPress and WooCommerce, you will select the template type as Shop Page. This step is just like the way you build a new WooCommerce shop page.

custom WooCommerce category page

Step 2: Build a WooCommerce category page

To create a custom category page in WooCommerce, you first need to have products. Elementor built-in widgets available in Woostify will help you do that. On the left panel of the Editor, you search for the Woostify – Products widget, then drag and drop it.

customize WooCommerce category pages

In the section of Query of the widget, you’ll select the source for product display. There will be five options shown, including Sale, Featured, Latest Products, Manually Selection, and Current Query.

Here we will select Current Query to show all the products we are creating for this category page.

Step 3: Select the display option

After building the products for the category page, you go to Display options which will display when you click on the arrow beside the Publish or Update button.

There will be four suggestions for you to choose from, including All Product Archives, Shop Page, In Product Category, and Product Tag. Here you select In Product Category and fill your category, for example, 3d Glass, in the next box as in the image below. Click the Save & Close. Done!

Display product category
Display product category

Step 4: Check how the category page displays

After that, your products will display on the 3d glass category page as below.

product category display example
Product category display example

Step 5: Customize WooCommerce product category pages

You can change your WooCommerce category pages as you expect. Some changes in images and content will create the best category page design.

Add a header image to the category page

You also can add a header image for the page by using the Elementor Image widget. Drag and drop it, then simply upload the image you want to display in the header.

Woostify Elementor Image widget
Woostify Elementor Image widget

Add content to WordPress category pages

Category page content will be a short description that gives users some additional information. It is advisable to search for keywords before writing the content for eCommerce category pages. Your description should be around 200-300 words and includes the links to other category pages.

woocommerce product category page elementor

The above-mentioned is all about how to customize WooCommerce category pages with WooBuilder. You also can choose to use other methods like using a WooCommerce category page plugin. But, of course, it will require the plugin installation which may cause an incompatibility problem.

4 tips to optimize WooCommerce Category Pages for a good conversion rate

Several tips below will help a lot in creating an attractive WooCommerce product category page template.

Add descriptive text

Like any other pages in WooCommerce, writing something relevant to the on-page products should be the first thing you think about when customizing WooCommerce category pages. These pieces of writing will help your website get a lot of benefits.

First, a mix of text and images will make your page more eye-catching. Although people usually love visuals, adding short descriptive paragraphs will create balance in design and attract them a lot.

Second, it is regarded as a great UX tip for category pages if your given text is relevant and appropriate. But remember that don’t write too much because people won’t love that.

Last, it will help you do SEO better. The text on the page will cover a specific topic. Make it informative and optimized by researching the topic and keywords. Then, there’s a good chance that Google will rank your category page.

Take notice of product thumbnails

Regardless of which place you want to show your products, it is important to pay attention to their resolution and size.

All the product thumbnails on the category pages should be of high quality and the same size. Then, customers will feel satisfied to admire your store. Even they will highly appreciate your store because of being designed neatly and professionally.

Besides, if you are selling physical items, it is recommended to make the images more lifelike, which is the point loved so much by online shoppers.

In short, design the images so that users visit your category page, feasting their eyes on impressive images. Make them excited to buy your product even before seeing the price or visiting your product page.

Add a striking image to the header

Apart from descriptive text and high-quality product thumbnails, your category pages should have incredible images in the header.

There are two main reasons for displaying them on the page. Let us show you.

First, they tell the customers that they find the right place. The category page contains numerous products of the same kind. Then, the page needs to have elements relevant to these products. Text and product images are responsible for carrying out this task. And the header image also does the same.

Second, a large, eye-catching header image will make your page looks amazing at first sight. After this great first impression, users certainly will be interested in seeing your category page thoroughly to buy something then.

Eye-catching images and descriptive text seem to be not enough to convince all the potential customers. Some fastidious ones will want to spend time learning more about your brand and feedback from other customers as well.

Therefore, in addition to adding the content relevant to the on-page products, you should link to other pages such as other category pages, customer review pages, about us pages, and the homepage.

By reaching these pages, users will understand more about what your store can offer them. Maybe not only some physical items but also the great experiences they brought.

Please grasp the chance to educate your potential customers through WooCommerce product category pages.

FAQs about WooCommerce category pages

1. Should category pages be indexed?

It depends. But as we said in this section, in many cases, category pages are good for SEO and drive much traffic for eCommerce sites if you optimize them properly.

2. How to show product attributes on the category page?

To have WooCommerce product attributes on your category page, please insert the snippet below:

add_action( 'woocommerce_after_shop_loop_item', 'custom_display_post_meta', 9 );

function custom_display_post_meta() {
   global $product;
   $attr = array('pa_cooling-capacity-watts', 'pa_heating-capacity-watts');
   foreach ( $attr as $attribute ) {
   $values = wc_get_product_terms( $product->id, $attribute, array( 'fields' => 'names' ) );
    echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
}
}

3. Which schema should be used for a product category page?

According to Google’s documentation, a category page listing several different products (or recipes, videos, or any other type). Each entity should be marked up using the relevant schema.org type, such as schema.org/Product for product category pages. However, if one item is marked, all items should be marked. Also, unless this is a carousel page, the marked items should not link out to separate details pages. You can read more here.

4. Can I add rich snippets to category pages?

Yes, you can put breadcrumbs markup in your category pages. Besides, you can show ratings of the products belonging to a specific category and the lowest price of the product as well.

5. How to add pagination in WordPress category pages?

To create a custom category page with pagination, you can use one of the three ways below:

  • WordPress category page pagination shortcodes:

[products category=’gemini-m’ per_page=”12″ limit=”12″ columns=”4″ pagination=”true” orderby=”date”]

  • Use a WordPress pagination plugin: it is suggested to refer to this article.
  • Add custom code to functions.php:

function custom_query( $query ){

    if(is_category()){
        $query->set( 'post_type', array( 'math' ) );
        $query->set( 'posts_per_page', '2' );
    }
}
add_action('pre_get_posts', 'custom_query');

In conclusion,

Creating a unique design, boosting SEO, and increasing sales are what you will achieve if you customize WooCommerce category pages.

That sounds great. That is also completely true!

So what are you waiting for? Customize them as soon as possible, then your store will gain more traffic and sales. Besides, we want to suggest to you some WordPress solutions that are helpful for eCommerce businesses.

In the post, we have also shown you some effective ways to create a custom category page. It is quite easy to carry out no matter which one you choose.

Thanks so much for spending time on our post. If you have comments or questions, don’t hesitate to leave them below. Our team will be so happy to get them.

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
RIEVES
RIEVES
3 years ago

thank you

Danie
Danie
2 months ago

Great tutorial but at step 4 my widget stays blank, no products shown! even tho i’m quite sure my categories are done right… What else to check to fix this?

2
0
Would love your thoughts, please comment.x
()
x

stay informed!

Subscribe to receive exclusive content and notifications