Product category woocommerce как изменить

Do you want to edit your category pages? In this guide, we’ll show you different methods to customize the WooCommerce category page with and without plugins.

The category page is usually one of the most overlooked and least customized pages in an eCommerce store. This is because it normally acts as a bridge to the hierarchy between the product and shop page. However, there are several practical scenarios where users rely on the category page to browse for products, so it makes sense to edit it and make the most of it.

Before we have a look at the different methods to customize the category page in WooCommerce, let’s better understand the benefits of doing so.

Why Edit The WooCommerce Category Page?

The category page shows all the products of your WooCommerce store included in that category. Even though users normally look for products using other pages, sometimes customers find it easier to look for the items from the category page. For example, if you’re not sure of the name of the product but you know its category, you’ll probably search for the product using the category page.

On top of that, your customers might stay on your website longer if they are positively influenced by the category page. As these pages are usually overlooked, if you customize them, you’ll stand out and improve your customer’s experience.

The good news is that WooCommerce allows you to easily customize your category page. The bad news is that the default options provided by WooCommerce are quite limited. You can only edit the name, slug, parent category, description text, display type, and thumbnail for each category page.

You can also edit other elements with the theme customizer, but if you need to take your category page to a whole new level, you need something else.

That’s why in this guide, we will show you different methods to edit your category page in WooCommerce and help your customers navigate your site more easily.

How to Customize the WooCommerce Category Page

There are different methods to easily customize your WooCommerce category page in WordPress:

1. With Divi
2. Using a dedicated plugin
3. Programmatically (coding)

In this section, we’ll go through each method step-by-step, so you can choose the one that best suits your needs.

NOTE: Before you start, make sure that you have set up WooCommerce correctly and created all the necessary pages.

1. Customize WooCommerce Category Page with Divi

Divi is one of the most popular WordPress themes and for good reason. It comes with plenty of features and it is fully compatible with WooCommerce which makes it ideal to customize your category pages.

This theme comes with a built-in drag and drop builder which allows you to create a custom category page template. This way, you can create a template for category pages and use it for all of them in your WooCommerce store.

What makes Divi so easy to use is that you can see all the changes you make with the builder in real-time with the live preview. Divi also provides various modules to easily add many elements to your pages, helping you save a lot of time when creating or editing your category pages.

1.1. Install and activate Divi

To start using Divi, you need to install and activate it first. You can download the Divi zip file from their official website.

Then, go to your WordPress dashboard and head to Appearance > Themes > Add New.

Press Upload Theme and choose the recently downloaded Divi .zip file to upload on your site. Once it is uploaded, click Install Now to install the theme and activate it once the installation is complete.

Activating the Divi theme will also automatically install the Divi builder which is the in-built page builder that we’ll use to customize the category pages.

1.2. Create a Custom Category Page Template

To start creating a custom category page template, you need to go to Divi > Theme Builder and press Add New Template.

Then, tick the box for All Product Category Pages under Archive Pages and click Create Template.

After that, select Add Custom Body on the new template you’ve just added. Since we are creating an entirely new template with Divi, select the Build Custom Body option as well.

You will see 3 different options there:

• Build your template from scratch
• Use one of the templates from the Divi library and further use it to customize your WooCommerce category page
• Clone an existing page and use it as a template for all your product category pages

You can choose any of the options that best suits you. For this tutorial, we will select Build from Scratch, so we hit the Start building button.

You will be redirected to the Category page layout from where you will use the Divi Builder to create your template.

To start building your template, you need to select the structure. Under New Row, select the type of row you want for your category pages. You can add multiple rows and columns. You will need at least 2 rows for the category page header and body, but you can also have more columns if you want to add a sidebar on your category page body.

After selecting the number of rows and columns, you will have to add the Divi modules to further customize the category page layout.

1.3. Category Page Header

For the category page header, you need to add the page title and breadcrumb for your category pages.

To add the post title, click on the ‘+’ icon in the row, search for Post Title in the search bar, and select it.

You will see the different post title options. You can add the meta and featured image, but we won’t use them for this tutorial, so we’ll disable the Show Meta and Show Featured Image options under the Elements section.

It’s worth noting that you don’t need to add any title here as it will automatically show the dynamic post title when you preview the website. Additionally, from the Design tab, you can edit the background color and fonts of the header.

There are also some Advanced options to add CSS ID, classes, custom CSS, scroll effects, and more. After you have made all the necessary changes, click on the “tick” icon to save the changes.

1.3.1 – Add breadcrumb module

You will also need a breadcrumb module for additional navigation in the category pages, so click on the ‘+’ icon again to add a new module and search for “Woo Breadcrumb”.

Then, select the option This Product in the Product section under the Content tab. This will add the dynamic title for the product category your customers want to see.

Once again, make the necessary changes using the Design and Advanced tabs, and finally, click on the “tick” icon to save the changes.

1.4. Category Page Body

After you have completed editing the header, you can move on to the category page body. If you haven’t included a row yet, click on the green “+” icon and select the type of row you want to add. After that, you will need to add the shop module here because it contains all the products for your shop.

Press the “+” icon in the row and search for the Shop module.

Once you click it, you will be able to configure the options for your products on the category page.

In the Content tab, you can edit all the elements for your category page. Make sure that you enable the Use Current Page to display the products of the specific product category that your customers select on your online store.

Now all you need to do is edit the other display elements of the page. For example, you can add the number of columns or products to show per page and pagination from here. Additionally, you can also edit the fonts of the product and price texts and much more from the Design and Advanced tabs. Once you have made all the necessary changes, press the “tick” icon to save the changes.

You can add more rows or customize the footer areas with the Divi Builder, just remember to save the page template body at the bottom right of your screen once you’ve done it all.

After saving your changes, close the Divi Builder and you will be redirected to the Theme Builder dashboard. Click Save Changes here as well to save the changes to your template.

Now when you preview the category page of any product category, you will be able to see all your changes.

2. Customize WooCommerce Category Page using a Plugin

If you don’t use Divi and don’t want to replace your current theme, the best option to edit the WooCommerce category page would be to use a dedicated WordPress plugin.

For this tutorial, we will use the Category Editor plugin as it is free, easy to use, and lets you customize category pages in a few clicks. This tool mainly focuses on the description area of the category pages and provides you with an editor for it. This way, you can edit the description of the product categories to display them on the category pages.

To start using this plugin, in your WordPress dashboard go to Plugins > Add New. Then, search for Category Editor, click Install Now, and then activate the plugin.

You can also install it manually by downloading the plugin straight from the WordPress repository. If you want to learn more about this process, you can have a look at our guide on how to install a plugin manually.

After activating Category Editor, go to Products > Categories and press Edit on the category you want to customize the description.

Here, you will see that a text editor has been added to the description area where you can change the text font, headings, lists, and alignment. Additionally, you can add category images and use the Text tab to customize the category description with a bit of code.

Once you have made all the necessary changes, press Update and preview the changes on your category pages.

That’s how you can customize your WooCommerce category pages with a plugin. However, if you want more customization options and have coding skills, you can code your own solution. Let’s have a look at how to do it.

3. Customize WooCommerce Category Page Programmatically

If you don’t use Divi and don’t want to install any third-party tools, coding your own solution is an excellent option. The main advantage of editing the category page programmatically is that it provides you with more flexibility.

Even if you’re not an experienced developer, WooCommerce provides you with several shortcodes and shortcode attributes to help you with the process. If you’re not familiar with shortcodes, check out this guide to better understand how to use them.

With these shortcodes, you can display product categories on any page:

• [product_category] – displays a specific product category
• [product_categories] – displays all the product categories of your store

You can use them along with product category attributes to modify the way they display the product categories. For example, if you want to display the top-level product categories and hide the subcategories, you can use the following shortcode:

[product_categories number="0" parent="0"]

You will be able to see the top-level categories once you preview your page.

Additionally, you can also use various code snippets to edit your category page in WooCommerce. One of the most common examples is to create a custom category.

Before we show you how to do it, make sure that you back up your WordPress website and use a child theme. We will change some core theme files, so if something goes wrong you may break your site. That’s why it’s always recommended to have a backup version that you can restore to avoid any issues.

Create a Custom Category Page Title

To create a custom category page title using a code snippet, you need to go to Appearance > Theme Editor and add the following code snippet to the functions.php file of your child theme.

add_filter( 'woocommerce_page_title', 'QL_customize_woocommerce_page_title', 10, 1 );
function QL_customize_woocommerce_page_title( $page_title) {
    // Custom title for the product category 't-shirts'
  if ( is_product_category('t-shirts') ) {
        $page_title = 'Something';
    }
    // Custom title for the product category 'hoodies'
  elseif ( is_product_category('hoodies') ) {
        $page_title = 'Something else';
    }
    return $page_title;
}

For more information about the snippet, check out this site.

This way you can display a custom title instead of the default category title on the category page.

Change Background of Product-Category Page

Similarly, you can also change the background of your product category page using code snippets. Just paste the following code snippet once again in the funtions.php file.

if(is_product_category()){
    add_action('wp_head',function(){
     ?>
        <style>
            .woocommerce.post-type-archive-product {
                background-image:none !important;
             }
           .woocommerce.single-product {
               background-image:none !important;  
            }
     </style>
   <?php
   });
}

The code checks if the element is a product category and changes the color of the background. For more information, check out this site.

These are just a few examples but there’s a lot more you can do. Feel free to take this snippet as a base and add your own custom code to customize the category page in your store.

Bonus: Add Quick View to Category Pages

Another interesting option to customize your WooCommerce category page is to add a quick view feature as well. A quick view will allow your customers to view the product details on the respective category page without having to open the actual product page. This will provide shoppers with a better user experience while they are browsing your online store.

To add a quick view feature to the category page, we will use the WooCommerce Direct Checkout plugin. It is one of the best checkout plugins for WooCommerce that comes with plenty of features to help you boost your conversion rates and sales.

Even though this is a freemium plugin, to a add quick view to the category pages you need to install both the free version and one of the premium plans. So first, head to this page to install and activate WooCommerce Direct Checkout.

After you have installed and activated the plugin, head to WooCommerce > Direct Checkout > Archives in your WordPress dashboard. Activate the Add quick view button option by selecting Yes from the dropdown and then save the changes.

If you check your site from the front end, you will see that there’s a new button that appears right next to the “Purchase Now/Add to Cart” button. For example, for those who use the Storefront theme, the button looks like this.

When you click on the quick view button, a pop-up will open with all the most important information about the product such as title, price, description, and so on. This way, customers can directly add products to their cart without having to open the product page.

You can further customize the quick view button and pop-up. For more information on how to do that, check out our guide on how to add a quick view in WooCommerce.

Recommendations to Revamp your Category Page

As mentioned before, the overall design and interface of your category pages are very important to grow your online store. It is a very useful page where you can compare different products in the same category before buying them.

A well-designed category page can help you keep your customers longer in your online store. The better experience they have in your store, the more likely they are to buy and become loyal customers.

To make sure that you make the most of your category pages and stand out from your competitors, these are some recommendations to take them to the next level.

1. Add Large Product Images

When it comes to online shopping, an image is worth a thousand words. Shoppers want to see big and clear images of the products they’re interested in before having to go to the product page.

However, this doesn’t mean that you should use extremely large product images for the category page. Very large images tend to be heavier and make your site slow, so find a good balance between big images and site speed.

For example, you can use a 3-column category page with an image size of 300-400 pixels. This should be adequate to show the required product details on an average-sized monitor or mobile device.

You can see a good example on Nike’s category pages, which is one of the most famous sports clothing brands. Nike uses clear and big pictures that are adequate for a product thumbnail image.

Also, keep in mind that online shopping is widely carried out on mobile devices nowadays. Make sure you test your category pages on both desktop and mobile, so the size and design are appropriate for every screen size.

2. Use Attractive Header Images

We all know that first impressions matter and even more so when it comes to online shopping. When a customer opens a category page, the first thing they notice is the header of the page. That’s why you should ensure that you use attractive headers for each category.

One of the best ways to create an attractive header is by adding a header image. Keep in mind the overall design of your site and match the header image with the overall color scheme of your online store.

For example, you can find header images in many fashion-oriented online stores such as MAC Cosmetics.

As you can see, MAC uses a very creative way to display the header image. The category header image consists of its image and also matches the dark color scheme with the header menus.

3.  Always Keep the Breadcrumbs Visible

Breadcrumbs are one of the most useful elements to make sure that your website visitors are in the right place. Breadcrumbs also help users navigate your site which helps them find what they’re looking for faster and improves their shopping experience.

While browsing products, sometimes customers click on different things and may get lost in your store. By having the breadcrumbs always visible, users can immediately see where they are and go back to the desired category easily.

Some sites prefer to show the categories on the sidebar, but most online stores use the navigation path because it’s easier for customers to go back to where they were before.

Displaying breadcrumbs won’t be an issue if you’ve followed the above tutorial with Divi. If you use a different theme, check out this guide to learn how to add and display breadcrumbs on every page.

4. Check whether the Products are in the Correct Categories

Even though this seems obvious, mistakes can happen when adding products manually. So this point is more of a reminder than a recommendation.

Do routine checks to make sure that all the products are assigned to the correct categories and aren’t mixed up. You don’t need to check this every day but it’s important to do it once in a while. You can also check for spelling errors on products, categories, and descriptions.

Any errors on the products or their categories might affect the visitors’ impression of your website. What would you think if you were browsing an online shop and found some jeans in the laptop category? Doing checks once in a while doesn’t take much time and will help you keep everything organized.

If you want to improve your eCommerce shop, even more, have a look at our WooCommerce tips to optimize your online store.

Conclusion

All in all, your category page plays an important role in your store. To stand out from your competitors, you should customize your WooCommerce category page and make the most of it. Likewise, you can also edit your shop, product, my account, and checkout page to revamp your whole store while you’re at it.

To wrap up, we have discussed different methods to edit your category page:

• With Divi
• Using a dedicated plugin
• Programmatically

We hope that this guide was useful and you can easily edit your categories pages. Furthermore, we have also provided you with a bonus tip to add a product quick view on your category page.

Finally, we’ve also seen some recommendations to improve your category page and boost your conversion rates using better images and making breadcrumbs always visible.

If this tutorial was useful, we recommend you also have a look at the following tutorials:

• How to hide and remove Add to Cart button in WooCommerce
• Customize the WooCommerce Cart Page
• How to add fees to WooCommerce checkout

Are you contemplating whether you should edit the WooCommerce product category page?

Well, if you are, then I would strongly recommend you should. Because customizing the WooCommerce Archive page and optimizing it can boost your sales.

But the question is how to customize WooCommerce Category Page?

Well, you sure don’t have to do any coding to customize WooCommerce category page if you follow the process shown in this blog.

In this article, you will learn how to customize WooCommerce category page without any coding. In addition, you you also get to know how you can create different custom archive template for each category individually. And also ways you can optimize your archive page to boost conversion rate.

So, keep reading….

Why customize WooCommerce category pages

According to builtWith, WooCommerce is used by over 29% percent of the top 1 million websites. While this popularity indicates the credibility of WooCommerce as an eCommerce tool, it also reflects that thousands and thousands of websites use the same default layout WooCommerce has to offer.

And if you think using the default WooCommerce page will only minimize your website’s chance to stand out in the crowd, then you are wrong. There are other reasons that you need to consider as well. To know about these other reasons, let’s have a look at the WooCommerce default category page with WordPress twenty twenty-two theme activated.

If you see, the WooCommerce default category page has a basic look that’s not very appealing. Besides, it doesn’t have any advanced options like search products using names, filter products based on different attributes, etc. All these are important to ensure a good user experience on your online store.

Besides, who doesn’t like a good-looking site that is soothing to the eyes and easy to navigate? 

Well, the answer is everyone! And let’s move to the next section where you will learn how to customize WooCommerce category page templates without any coding.

How to customize WooCommerce category page in 6 steps

This is an easy-to-follow tutorial on how to customize WooCommerce category pages without any coding. By following this process, you can choose the layout as well as the design of your WooCommerce archive page in no time. So, let’s get started…

Step #1: Install Elementor page builder and ShopEngine

To edit product category page of WooCommerce using the process shown in this blog, you will need two WordPress plugins:

• Elementor Page Builder
• ShopEngine and ShopEngine Pro

ShopEngine is the Ultimate WooCommerce builder for drag and drop page builder- Elementor. It’s an add-on for Elementor that comes with an enormous number of widgets and modules to make WooCommerce customization effortless.

Note: You can use the coupon community20 to get 20% OFF on ShopEngine Pro. Install Elementor first as ShopEngine is dependent on this page builder. If you need help activating ShopEngine Pro, check the documentation.

Step #2: Create a category page template

Once you have installed and activated all the required plugins, you need to create a Category Template. To create a WooCommerce custom category page template,

• Navigate to: ShopEngine ⇒ Builders Template
• Click on Add new
• Provide a Template name
• Choose Type as Archive from the dropdown
• Leave the Applicable Category field as it is to create a common template for all category
• Turn on the Set Default option to override any existing Category/ Archive Page template
• Select the blank option under Sample Design 
• Click on Edit with Elementor to start building the template

Note: I chose the blank option cause in this blog, I am going to show how to create a custom category page from scratch. ShopEngine offers multiple pre-built WooCommerce category page template. If you want to use a pre-built template, choose the one you like then jump to step 5. (step 3 and 4 are mandatory if you want to build from scratch)

Step #3: Choose a layout/structure for the WooCommerce category page

Once you are in the editor mode, you need to choose a structure for your WooCommerce category page.

I am going to use 3 different types of layouts for three different sections to build a custom archive page. You can do the same as shown in the blog or choose the layout you like.

To choose a structure, click on the “+” icon, then hover on the layout you like, then just click on it.

Note: You can repeat the same process to choose different layouts.

Step #4: Drag and drop ShopEngine widgets and customize the settings

ShopEngine provides 8+ dedicated widgets to build custom WooCommerce archive pages. These category page widgets are

• Archive Description
• Archive Products
• Archive Title
• Archive Result count
• Archive View Mode
• Order By Filter
• Products per page filter
• Product list
• Product filters

I am going to use some of these. You can choose to use all of them. But before that, you need to ensure all the widgets are activated and available for use. 

You can activate/enable the widgets from ShopEngine ⇒ Widgets. Here turn on all the widgets or the ones you are going to use and finally click on Save changes Button to update the status.

I am going to choose a one-column layout and drag and drop Advanced Search and Archive Result Count widgets.

You can select the widget and customize related settings. For example, if you click on the Advanced Search widget, on the left panel, you get options such as Products Column, Show Category on the search result, Show Category Dropdown, Text for All Categories, Search icon, etc.

Now, for the next section, I am going to use the steps described in step 3 to insert a new layout of two columns. Then drag and drop the Product Filters and Archive Products widgets.

Note: The product filter widget is only available with ShopEngine Pro. So, make sure you have installed and activated ShopEngine Pro.

You can customize filter-related options such as Price Filter, Rating Filter, Color Filter, Category Filter, etc. In addition, you can customize layout-related options like Filter View Mode, Enable Container Toggle Button, Columns (per row), etc. You can also add a custom attribute list if you want.

You can change the Archive products layout settings from the WooCommerce layout option. For more details about how to change the layout option, you can check this doc. Moreover, you can personalize content settings such as Flash Sale Badge, Show Categories, Show Description Rating, etc. You can also choose a custom pagination icon and custom ordering of the CTA button like Add to Cart, Add to wishlist, Quick view, etc.

Step #5: Customize WooCommerce Archive page’s style settings

Once you are set with your customized layouts and personalized widgets, it’s time to change the look of it by changing the style settings of these widgets. To change the style settings you need to click on the widget and on the panel go to the Style tab to access all the style settings. Let’s have a look at the style option for the widgets used in this tutorial:

Advanced Search:  You can customize various options of the Search form, Search Icon / Text style, Category Style, Product Style, More Products Button, and Global Font. 

Archive Result Count: You can customize the alignment, color and typography options.

Product Filters: You can find options to style the product filters section under different categories such as Common Styles, Price Filter / Range Slider, Rating Filter, and Category Filter.

Archive Products: You can personalize archive product style setting by customizing the options provides in sections like Product Container, Product Image, Product Categories, Product Title, Product Price, Off Tag, Add To Cart Button, Rating, Flash Sale, and Pagination.

Step #6: Update and Preview the WooCommerce custom category page template

After finishing the style customization, click on the Update button to save. Now you can either click on the preview button to see the preview or visit any category page manually and you should see the new template is activated like the preview below:

Now, this was the process to create a customized category page for your WooCommerce store. But how about creating a different design for each category of your store? Well, you can do that as well with ShopEngine. To learn more details, move to the next section.

How to build custom WooCommerce Archive page for each category seperately?

You can build a totally different design for each category or a specific category only of your WooCommerce store. For that, the process remains pretty much the same as shown above. But in step 2, Create a category page template, you can not leave the Applicable Category field blank.

You need to select the category in the Applicable Category field for which you want to apply the design template you are building. For example, if you want to create a design that should only be applicable to the Music category, then in the Applicable Category field choose Music. 

The rest of the steps will be the same as building a general category template design shown in the section above.

Note:  When you create an archive template for a specific category, it will only apply to that category page and not the rest of the category pages.
For the rest of the categories you need to create a different category template with the “Applicable Category” field blank for all categories or a different one for each of them. Otherwise, the rest of the categories will have the default WooCommerce archive template or the template your activated theme offers.

Here is a preview of different WooCommerce category page with different design built with ShopEngine:

Note: The option to create different template/design for different category of your WooCommerce site is only available in the Pro version of ShopEngine.

Bonus: 5 Ways to optimize the WooCommerce category page to increase the conversion rate 

Here are some useful tips that you can follow to optimize your WooCommerce archive page to boost conversion rate:

Provide product filter option

Your category page by default shows all the products of that category. But usually, people are looking for a product of a certain color or size or any other attribute.

So, you should provide the options to filter and narrow down the number of products of a category according to their preferred attribute. This way, people can easily find their products and this will help you to boost your sales.

Add product comparison option

Adding a product comparison option to your WooCommerce will help consumers to compare products of a similar kind. This option is needed especially if you offer digital products like mobiles, watches, etc.

The product comparison option will help customers to make a decision faster. And this will help you to achieve your goal of higher sales fast.

Wishlist button

Wishlist provides the option to add products to the cart for later purchase. Some people don’t find Wishlist to be that effective when it comes to conversion. But honestly, it’s highly effective.

Because people usually add products to their wishlist when they really like the product but for some reason can’t purchase it right away. But it doesn’t mean, that person will not buy the products later.

In most cases, people do tend to buy products they have added to their wishlist. So, do add a wishlist option on your WooCommerce Category page.

Quick View option

Adding a quick view button ensures a great user experience as people don’t have to visit separate pages to know about a product. Using this Quick view option, your customer can stay on the category page and get to know details about products with just one click.

If people have to go to a product page to view it, then they can leave your site without purchasing the product in case they don’t like it. However, if you provide the quick view option so customers can check out multiple products while staying on the same page, it will elevate the shopping experience. And as a result, will help you to increase your store’s sales.

On-page SEO optimization

Category pages are the indicator of page hierarchy on your website. So, optimizing your category page for search engines should never be neglected. Because, while you want your home and product page to rank, your category page if ranked can also bring you a lot of traffic.

The more traffic you get on your website will increase your chance that you will get more conversions. So, make sure you add proper SEO metadata, optimize internal and external linking, optimize the URL, etc. You can take help from SEO plugins like Rankmath, Yoast SEO etc.

Are you thinking all the points seem valid, but will I need multiple plugins to add these options to my site to increase conversion?

Well, you have nothing to worry about. Because ShopEngine apart from being a fabulous WooCommerce customizer with abundance of WooCommerce widgets, it also provides 13+ modules like Wishlist, Quick checkout, Product Comparison, etc.

Morever, you can customize your complete WooCommerce store with this plugin. using this category editor, you can edit all your WooCommerce pages; from the shop page to thank you page. Watch the video to get to know about the vast features ShopEngine has to offer.

Final Words on custom WooCommerce category page

A category page is an essential page for both your customers and search engine. And customizing and optimizing your category pages can only help you gain more success in your eCommerce business. 

The good thing is now you know how to customize WooCommerce category page and how to optimize the page to double your conversion rate. On top of that now you know the how to create custom WooCommerce Category page for each category seperately.

You can leverage the most complete WooCommerce builder available in the market named ShopEngine to optimize your eStore’s category page. And you can get his all-rounder WooCommerce plugin at 20% OFF now!

🔔 🔔 To purchase ShopEngine Pro at 20% less price use the coupon code community20.

So, let’s hurry and join the community of WooCommerce lovers now!

Product categories and subcategories are used to organize and group products in the WooCommerce store.

The main categories are used to group similar products together. For example, you might have product categories such as “Men’s Clothing,” “Women’s Clothing,” and “Kids’ Clothing.” Similarly, subcategories are sub-divisions of the main category. For example, within the “Men’s Clothing” category, you might have subcategories such as “T-Shirts,” “Pants,” and “Shoes.”

In this tutorial, you will learn how to display categories WooCommerce in a separate list before displaying products.

Default Category, Subcategory, and Product

When you set up a store, you usually select the third option, i.e., show categories/subcategories and products. This implies that visitors can either select products from the home page or refine their search by clicking through to a product category archive.

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.

Note: All the code mentioned below should be placed in the functions.php file in the theme folder.

Display WooCommerce Product Category

There’s a woocommerce_product_category() function, which outputs the categories or subcategories before running the loop that outputs the products. The function is pluggable, which means override it in the theme.

function woocommerce_product_category( $args = array() ) {
    $woocommerce_category_id = get_queried_object_id();
  $args = array(
        'parent' => $woocommerce_category_id
  );
  $terms = get_terms( 'product_cat', $args );
  if ( $terms ) {
        echo '<ul class="woocommerce-categories">';
        foreach ( $terms as $term ) {
            echo '<li class="woocommerce-product-category-page">';
            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>';
  }
}
add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_category', 100 );

List Subcategories of a Product Category

Here’s how you can easily get the subcategory of WooCommerce product categories by using a custom function that takes advantage of the parent product category slug.

function woocommerce_get_product_category_of_subcategories( $category_slug ){
  $terms_html = array();
  $taxonomy = 'product_cat';
  
  $parent = get_term_by( 'slug', $category_slug, $taxonomy );
  
  $children_ids = get_term_children( $parent->term_id, $taxonomy );
 
    
  foreach($children_ids as $children_id){
        $term = get_term( $children_id, $taxonomy ); 
        $term_link = get_term_link( $term, $taxonomy ); 
        if ( is_wp_error( $term_link ) ) $term_link = '';
    
        $terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $term->name . '</a>';
  }
  return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';
}

The WP_Term object gets the product category parent in the above code snippet. Next, it gets the child ID in an array. Finally, the child categories are displayed in the HTML by running a loop through the child ID array.

Display WooCommerce Category Description

The following code snippet should be placed in the WooCommerce template file you use to display your product details. In this code snippet, the wp_get_post_terms filter is called when the cache has the required term. The filter will pass the term and the array $args.

In addition, the filter is called before the array of terms and will pass the arrays.

global $post;
$args = array( 'taxonomy' => 'product_cat',);
$terms = wp_get_post_terms($post->ID,'product_cat', $args);
 
$count = count($terms);
if ($count > 0) {
 
  foreach ($terms as $term) {
        echo '<div class="woocommerce-get-product-category">';
        echo $term->description;
        echo '</div>';
 
  }
 
}

Custom Plugin for Displaying Product Category

The above process of displaying subcategories for the WooCommerce product categories is done through inline code added to the functions.php file.

There are cases where WooCommerce store owners and developers do not wish to use inline code, mainly where they do not wish to temper with “good” code or where there is extensive customization that could get derailed by adding code to the functions.php file.

For such users, a great alternative is to package all this functionality into a plugin. the process is simple, and you have the additional benefit of switching OFF this functionality by deactivating the plugin.

Create a new folder in your wp-content/plugins directory and give it a unique name. I’ll call it cloudways-products-categories-in-archives. Inside that, create a new file, again with a unique name. I’ll use the same name: cloudways-product.php

Open your file and add this code to it.

<?php
/**
 * Plugin Name: WooCommerce Product Category 
 * Description: Display WooCommerce categories on WooCommerce product pages
**/

In your plugin file, add this:

function cloudways_product_subcategories( $args = array() ) {
 
    }
add_action( 'woocommerce_before_shop_loop', 'cloudways_product_subcategories', 50 );

Now add this code inside the function:

$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 displays the category image using woocommerce_subcatgeory_thumbnail(), followed by the category name in a link to its archive.

In your plugin folder, create a folder called css; inside that, create a file called style.css. Now in your plugin file, have the name cloudways-product.php. Add the following code:

function cloudways_product_cats_css() {
 
 
    wp_register_style( 'cloudways_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );
 
 
    wp_enqueue_style( 'cloudways_product_cats_css' );
 
}
 
add_action( 'wp_enqueue_scripts', 'cloudways_product_cats_css' );

In the above code snippet, wp_register_style allows you to add your own style.css file containing custom CSS code that you can use to display the subcategories.

Summary

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.

Share your opinion in the comment section.
COMMENT NOW

×

Thankyou for Subscribing Us!

1. Устанавливаем и настраиваем WordPress
2. Устанавливаем WooCommerce
3. Устанавливаем тему и необходимые инструменты
4. Выбираем готовый шаблон интернет-магазина
5. Работаем с товарами
6. Редактируем меню
7. Меняем дизайн сайта
8. Работаем со страницами
9. Настраиваем внешний вид URL-адресов
10. Переводим форму на странице «Контакты»
11. Подключаем доставку
12. Полезные материалы

После базовой настройки добавим функционал интернет-магазина в WordPress. Для этого перейдите в меню слева в раздел «Плагины».

Плагины — это дополнения, которые расширяют стандартный функционал вашего сайта и панели администрирования. Например, сейчас при помощи одного плагина вы превратите ваш сайт на WordPress в интернет-магазин, а потом при помощи других подключите доставку и оплату.

Вообще, в WordPress есть тысячи разных плагинов, платных и бесплатных. От простых блоков «Подпишитесь на рассылку» и онлайн-чатов внизу экрана до конструкторов страниц и инструментов по ускорению загрузки сайта.

Устанавливайте только те плагины, которые добавляют на сайт критически важный функционал. Каждый из них создаёт дополнительную нагрузку на сервер, поэтому сайт может начать тормозить, если плагинов будет слишком много.

Как видите, у вас со старта есть два плагина: «Akismet Anti-Spam» и «Hello Dolly». Они вам не понадобятся, поэтому можно смело их удалять, чтобы не занимали место. Для этого отметьте их галочками, в меню «Действия» сверху или снизу выберите «Удалить» и нажмите «Применить».

Теперь установим плагин для электронной коммерции. В этой инструкции будем делать интернет-магазин на WooCommerce. Это самый популярный бесплатный инструмент для создания интернет-магазина на WordPress.

Перейдите в меню слева в раздел «Плагины» — «Добавить новый» и найдите WooCommerce по названию в строке поиска в правом верхнем углу.

Как видите в левом нижнем углу карточки с плагином, его используют более чем на пяти миллионах сайтов по всему миру. А прямо под строкой поиска написано «8 060 элементов». Это всё дополнения для WooCommerce, которые расширят функционал вашего интернет-магазина. Так что решение рабочее.

Нажмите в карточке с WooCommerce кнопку «Установить». Процесс займёт около 10 секунд. Затем появится новая кнопка — «Активировать». Нажмите её.

Сразу после активации откроется страница, на которой вам предложат использовать новый интерфейс настройки. Нажмите «Да, пожалуйста».

Попадаем в мастер по настройке WooCommerce. Если он на английском, нажмите в самом низу страницы «Skip Setup Wizard», чтобы сначала всё русифицировать. Для этого перейдите в раздел «Плагины» — «Добавить новый» и установите плагин «WooCommerce Admin».

После активации плагина язык в интерфейсе мастера по настройке WooCommerce поменяется на русский. Чтобы перейти к настройке WooCommerce, откройте в меню слева раздел «WooCommerce» — «Главная страница» и нажмите в блоке «Завершить настройку» ссылку «Сведения о магазине».

Первый этап настройки — «Сведения о магазине». Впишите здесь адрес вашего магазина в физическом мире или любой другой контактный адрес, после чего нажмите «Продолжить».

На следующем этапе выберите, в какой отрасли будет работать ваш интернет-магазин на WP. Если нужно, выберите несколько отраслей. Затем нажмите «Продолжить».

Дальше укажите, какой тип продукции будете продавать. Бесплатно будут доступны только «Физические товары» и «Загрузки». За дополнительную плату можно добавить функционал для продажи специфических услуг вроде подписок или тарифных планов.

Следующий этап — дополнительная информация о вашем бизнесе. Сначала укажите, сколько товаров будет у вас в каталоге и занимаетесь ли вы торговлей в другом месте. Например, на другом сайте или в физическом магазине.

В зависимости от ответа на второй вопрос, появится ещё несколько дополнительных: про годовой доход и платформу, на которой вы уже запускали магазин.

Кроме вопросов вам предложат интегрировать магазин с Facebook, Mailchimp и Google Ads. При необходимости это можно сделать в любое другое время, а пока отключите эти опции и нажмите «Продолжить».

На последнем этапе вам предложат выбрать тему для будущего интернет-магазина. Нажмите в самом низу страницы «Пропустить этот шаг», потому что среди предложенных тем нет той, которая нам нужна.

На следующем экране вам предложат расширить возможности интернет-магазина с помощью плагинов Jetpack и WooCommerce Services. Эти плагины не понадобятся, поэтому жмите «Нет, спасибо».

На этом настройка закончится и вас перенаправит в консоль WordPress на главную страницу раздела WooCommerce. Давайте посмотрим, что ещё в ней поменялось после установки плагина.

Что нового в панели управления после установки WooCommerce

После добавления в WordPress функционала интернет-магазина, в боковой панели появилось четыре новых раздела: «WooCommerce», «Товары», «Аналитика» и «Маркетинг».

WooCommerce. На главной странице вы найдёте общую аналитику и советы, как развивать магазин. А в подразделах вы будете управлять заказами, просматривать данные о клиентах, создавать купоны, смотреть подробную статистику о продажах.

Отдельный момент — подраздел «Настройки». Если в основном разделе «Настройки» хранятся параметры именно WordPress и сайта в целом, то здесь будут параметры, которые касаются магазина. Например, валюта, в которой отображаются цены, способы доставки и оплаты.

Стандартная валюта магазина сразу после установки WooCommerce — доллар. Перейдите в раздел «WooCommerce» — «Настройки», чтобы её изменить.

Как видите, в верхней части раздела расположены вкладки для настройки разных аспектов бизнеса. Валюта находится на вкладке «Основные». Прокрутите страницу вниз до блока «Настройки валюты», выберите подходящую валюту и нажмите внизу кнопку «Сохранить изменения».

Товары. Здесь вы будете делать всё, что связано с товарами в вашем магазине: добавлять новые и редактировать старые, создавать для них категории, метки и атрибуты. Чуть позже поработаем в этом разделе подробнее.

Аналитика. Это целый раздел с отчётами и показателями, где вы можете отслеживать, как идут дела в вашем магазине, делать на основе этой информации выводы и планировать дальнейшие действия.

Маркетинг. Это новый раздел, поэтому здесь пока довольно скудно: инструкции по управлению WooCommerce и статьи о маркетинге на английском, а также отдельный подраздел по управлению купонами. В нём вы будете создавать промокоды, чтобы предложить отдельным клиентам единоразовую скидку.

Теперь, когда вы добавили функционал интернет-магазина в WordPress, пришло время поменять тему и установить необходимые для дальнейшей работы дополнения.

Устанавливаем тему и необходимые инструменты

Перейдите в раздел «Внешний вид» — «Темы». Здесь уже установлены три базовые темы от WordPress: «Twenty Twenty», «Twenty Nineteen» и «Twenty Seventeen». Это WordPress каждый год выпускает официальную тему и называет её по номеру года.

Для интернет-магазина эти темы не подойдут, поэтому давайте их удалим, чтобы не занимали место. Нажмите на тему, а потом в нижнем правом углу всплывающего окна нажмите «Удалить».

Тему «Twenty Twenty» удалить не получится, потому что она сейчас используется на сайте. Это можно будет сделать потом, когда установите и активируете новую тему. Для этого нажмите вверху страницы кнопку «Добавить».

Вас перенаправит в библиотеку бесплатных тем. В ней, как и в библиотеке плагинов, есть несколько вкладок. Вариантов тем — тысячи. Прокрутите вниз и посмотрите, что тут есть.

А ещё бывают платные темы, которые здесь не отображаются. Их тоже немало. Найти их можно на специальных сайтах вроде ThemeForest или TemplateMonster.

Не все темы подойдут именно для интернет-магазина. Некоторые из них создавали специально для блогов, промостраниц, портфолио и других сайтов. Но для каждого типа сайта найдётся тысяча вариантов.

Отдельный момент — функционал тем. У каждой темы он разный. То есть магазин, который получилось сделать на одной теме, не факт, что получится сделать на другой.

Чтобы сделать интернет-магазин на WordPress, как в примере из начала инструкции, нужна тема Astra. Она работает с WooCommerce и ещё с одним удобным плагином — Elementor. Это конструктор страниц, при помощи которого вы сможете быстро менять дизайн магазина в визуальном редакторе.

Найдите тему в строке поиска в верхнем правом углу и нажмите «Установить». Если не находит, ничего страшного — скачайте тему с официального сайта разработчика . Чтобы потом загрузить её в WordPress, нажмите кнопку «Загрузить тему» вверху экрана.

После загрузки снова введите в строке поиска Astra, затем наведите на неё курсор и нажмите «Установить».

Теперь зайдите на сайт и посмотрите, как изменился его внешний вид. На нём всё будет выглядеть по-другому: расположение блоков, шапка, шрифт. Пока что всё ещё выглядит пусто и уродливо, но скоро это изменится. Перед тем как начать наводить красоту, нужно установить ещё один плагин.

Вернитесь в консоль, перейдите в раздел «Плагины» — «Добавить новый» и найдите плагин «Starter Templates». Это плагин от разработчиков Astra с готовыми шаблонами сайтов. Идея в том, чтобы установить себе на сайт подходящий шаблон, а потом адаптировать его под свой бизнес в удобном визуальном редакторе.

После установки и активации откроется страница с установленными плагинами. Теперь остаётся найти и загрузить в WordPress шаблон будущего интернет-магазина.

Выбираем готовый шаблон интернет-магазина

Перейдите в раздел «Внешний вид» — «Starter Templates». Сначала вас попросят выбрать конструктор страниц, при помощи которого вы потом будете работать с сайтом. Выберите Elementor.

После этого откроется библиотека шаблонов. Это примеры уже готовых сайтов, которые сделаны на теме Astra и которые можно установить на свой сайт.

На некоторых шаблонах в правом верхнем углу стоит значок Agency. Это значит, что шаблон доступен только в платной версии темы — Astra PRO. В платной версии темы больше возможностей, можно менять вообще что угодно. Но в бесплатной версии тоже достаточно инструментов, чтобы создать достойный интернет-магазин на движке WordPress.

В верхней части экрана слева от поиска поставьте переключатель на «Free», чтобы на экране отображались только бесплатные шаблоны. Как видите, вариантов достаточно и среди бесплатных.

Нажмите на любой шаблон, чтобы рассмотреть его поближе. В нижнем левом углу следующей страницы будет кнопка «Preview» при нажатии на которую сайт откроется на полном экране в новой вкладке.

Для этой инструкции понадобится шаблон «Brandstore». Найдите его по названию и откройте, а затем нажмите в правом нижнем углу кнопку «Import Complete Site», чтобы установить шаблон на наш сайт.

Появится всплывающее окно, в котором понадобится выбрать, что именно нужно импортировать: настройки, виджеты, плагины и содержимое. Оставьте галочки, как они стоят по умолчанию, и нажмите «Import».

Импорт может занять от двух до десяти минут. В это время не закрывайте вкладку. По окончании процесса появится сообщение «Imported Successfully!» и кнопка «View Site», чтобы вы сразу могли взглянуть на свой сайт.

После импорта всё готово к созданию интернет-магазина на WordPress. Начнём с управления товарами, а потом перейдём к внешнему виду сайта.

Работаем с товарами

Обратите внимание:

• Как правильно формировать SEO-теги для страниц интернет-магазина?
• Как правильно сформировать каталог интернет-магазина?
• Как сделать карточку товара удобной и полезной: 25 элементов для эффективных продаж в интернет-магазине

Закройте всплывающее окно с сообщением об окончании импорта шаблона и перейдите в раздел «Товары» — «Все товары».

Здесь вы будете управлять товарами в каталоге вашего магазина. В колонках таблицы вы увидите основные параметры товаров: их названия, наличие, цены и категории. Наведите курсор на конкретный товар, чтобы увидеть базовые действия, которые с ним можно совершить.

Добавляем новые товары

Нажмите кнопку «Добавить» в верхней части страницы или в меню слева. Откроется пустой шаблон товара.

Сначала идёт название и описание товара. Если открыть товар на сайте, это описание будет отображаться внизу страницы под изображением. А справа от изображения — краткое описание. На странице добавления товара поле с кратким описанием будет в конце страницы.

Между полями для полного и краткого описания вы найдёте блок «Данные товара». В нём есть несколько подразделов, где можно указать детальные параметры товара. Расскажу только про первые два подраздела. Они самые важные.

Основные. Здесь только цена: обычная и акционная. Если хотите, чтобы акционная цена отображалась только в конкретные даты, нажмите «Запланировать» и выберите дни распродажи. На сайте во время распродажи обычная цена будет перечёркнута, а рядом будет новая.

Запасы. Здесь будет всё, что касается наличия товара. Вы можете добавить товару артикул и установить один из трёх статусов: «В наличии», «Нет в наличии» и «Предзаказ».

Также здесь есть два поля, которые можно отметить галочками: «Управлять запасами» и «Продавать индивидуально». Первое поле позволяет указать, сколько единиц товара у вас есть. Второе поле не даст одному человеку заказать несколько единиц товара в одном заказе, только один.

Отдельный момент — боковая панель в правой части экрана. В ней вы выбираете категорию, в которую необходимо поместить товар, а в самом низу загружаете изображения товара.

Когда заполните все поля, нажмите «Опубликовать» в панели справа. После этого останется только проверить URL товара. Это поле появится под названием товара после публикации.

WordPress подставляет в URL текст из названия товара. То есть, если в названии есть русские буквы, они попадут и в URL. Проверьте ссылку и при необходимости поменяйте русскоязычные слова на англоязычные.

Создаём новые категории

Ссылки на категории обычно размещают в шапке и подвале сайта, а также сбоку на странице с товарами в виде фильтра. Вы можете управлять ими в разделе «Товары» — «Категории». В левой части экрана добавляете новые категории, в правой — управляете существующими.

Чтобы изменить существующую категорию, наведите на неё курсор и нажмите «Изменить». На следующей странице вы сможете переименовать категорию, а также изменить её ярлык, изображение и описание.

Чтобы создать категорию, достаточно придумать только название и ярлык. Остальные поля — по необходимости.

Ярлыки отображаются в URL, поэтому используйте в этом поле только английские буквы. Ссылки в браузере будут выглядеть некрасиво, если в них одновременно будут и английские и русские буквы.

По умолчанию в новых категориях не будет товаров. Чтобы их добавить, перейдите в раздел «Товары» — «Все товары» и поставьте галочки возле товаров, которые хотите добавить в конкретную категорию. Затем найдите вверху страницы выпадающий список «Действия», выберите в нём вариант «Изменить» и нажмите «Применить».

Появится меню редактирования нескольких товаров. Найдите в нём блок «Категории товаров», поставьте галочку напротив нужной категории, затем прокрутите меню редактирования вниз и нажмите «Обновить».

Удалить товары из категории таким же образом не получится, только каждый товар по отдельности. В WooCommerce почему-то не предусмотрели такой функционал. Это будет несложно, если нужно удалить всего несколько товаров, и мучительно долго, если несколько десятков.

К счастью, на помощь в такой ситуации приходят плагины. Видимо, другим людям тоже не хватало такой функции, поэтому они создали плагин, который её добавляет. Плагин называется «Bulk remove posts from category».

После установки плагина под блоком с категориями в меню редактирования нескольких товаров появится пункт «Remove from category». Чтобы удалить товары из категории, выберите сами категории, а также поставьте галочку в этом пункте. В конце нажмите «Обновить».

Создаём бренды

По умолчанию функционала с брендами в WooCommerce нет, но есть плагин, который его добавит. Называется этот плагин «Perfect Brands for WooCommerce». Найдите и установите его в разделе «Плагины».

После установки в разделе «Товары» появится подраздел «Бренды». В нём такой же интерфейс как и в подразделе «Категории». Слева — добавить новый бренд, справа — управлять существующими.

Чтобы добавить новый бренд придумайте для него название и ярлык, а потом нажмите в конце страницы кнопку «Добавить новый бренд».

Следующий этап после создания бренда — добавить к нему товары. Это делается так же, как и в случае с категориями. Перейдите в раздел «Товары» — «Все товары», отметьте галочками товары, для которых хотите указать конкретный бренд, а потом найдите вверху страницы выпадающий список «Действия», выберите в нём вариант «Изменить» и нажмите «Применить».

В меню редактирования нескольких товаров найдите блок «Бренды», отметьте галочкой бренд, в который собираетесь добавить товар, прокрутите меню вниз и нажмите «Обновить».

Создаём атрибуты

Атрибуты дают возможность создать для товаров дополнительные параметры, например, размер или цвет. Пару слов о том, как именно это устроено.

Вы создаёте атрибут и придумываете для него название. Для примера — «Размер обуви». Дальше добавляете к атрибуту значения — 39, 40, 41 — непосредственно размеры. После этого применяете атрибут к товару и выбираете доступные конкретно для него размеры.

Товар конкретного размера при этом становится как бы отдельной сущностью. У него может быть своё количество в запасах, своя цена, своё изображение. Последнее удобно, когда создаёте цвета.

Возможно, пока что не совсем понятно, но на практике разобраться будет проще. Откройте в консоли раздел «Товары» — «Атрибуты».

Здесь всё так же, как и в разделе с категориями: в левой части экрана добавляете новые атрибуты, в правой — управляете существующими.

Давайте создадим для примера атрибут с размерами обуви. В поле «Имя» впишите «Размер обуви», в поле «Ярлык» — то же самое, но латиницей. В конце нажмите «Добавить атрибут».

Атрибут создали, теперь создадим значения — конкретные размеры. Для этого нажмите в таблице справа «Установить правила».

Атрибут создали, теперь создадим значения — конкретные размеры. Для этого нажмите в таблице справа «Установить правила».

В этом разделе такой же интерфейс, как и в предыдущем. В поле «Название» в левой части экрана впишите размер, например, EU 39. В ярлык впишите то же самое, только через дефис — eu-39. В конце нажмите «Добавить Размер обуви». Затем таким же образом добавьте остальные размеры.

Когда создадите атрибуты и значения, останется присвоить их товарам. Для этого перейдите в раздел «Товары» — «Все товары», наведите курсор на нужный товар и нажмите «Изменить».

На следующей странице найдите блок «Данные товара». В заголовке этого блока указан тип товара. По умолчанию это будет «Простой товар». Но когда вы добавляете к товару атрибут, нужно поменять его тип на «Вариативный товар». Логично, ведь по сути вы как раз добавляете вариации.

После смены типа товара зайдите в подраздел «Атрибуты», чтобы присвоить товару атрибут «Размер обуви», а потом создать на основе конкретных размеров вариации товара. В поле «Индивидуальный атрибут товара» выберите нужный атрибут, а потом нажмите «Добавить».

Следующий шаг — выбрать, какие именно размеры актуальны для этого товара. Введите названия нужных размеров, после чего отметьте галочкой поле «Использовать для вариаций» и нажмите «Сохранить атрибуты».

Дальше перейдите в подраздел «Вариации». Здесь в выпадающем списке выберите «Создать вариации из всех атрибутов». Под всеми атрибутами имеются в виду только те, которые вы только что присвоили товару в подразделе «Атрибуты». После этого нажмите кнопку «Применить».

Ваши вариации появятся в этом же разделе. Остаётся установить для каждой из них цену, иначе товар будет отображаться на сайте, как недоступный. Для этого кликните по вариации, чтобы раскрыть её параметры.

Главное указать здесь цену. Все остальные поля — по необходимости. Чтобы загрузить своё изображение для вариации, кликните по синему значку изображения.

Таким же образом заполните цену и другие параметры остальных вариаций. После этого не забудьте нажать «Сохранить изменения».

Откройте товар на сайте и проверьте, всё ли получилось. В итоге справа от изображения товара должен появиться выпадающий список, в котором покупатель будет выбирать нужную вариацию.

Настраиваем фильтры товаров

Речь о фильтрах, при помощи которых посетители вашего магазина сужают список предлагаемых товаров. Например, категории, бренды, цена или размер. Обычно их можно найти на странице магазина сбоку от товаров.

По умолчанию в вашем интернет-магазине будет четыре фильтра: поиск по товарам, самые продаваемые товары, список категорий, а также сортировка по цене. Чтобы добавить новые фильтры и отредактировать текущие, перейдите в раздел «Внешний вид» — «Виджеты».

Виджеты — это дополнения вроде плагинов, только попроще. В отличие от плагинов их нельзя установить, только выбрать из списка доступных в вашей теме. Список всех виджетов будет слева на странице, а справа — зоны, где их можно разместить.

По умолчанию справа развёрнута зона «Основной сайдбар». В ней расположены почти все виджеты сразу, но на сайте эта зона нигде не присутствует. Кликните по названию зоны, чтобы её свернуть, а потом разверните зону «Сайдбар WooCommerce». Это как раз та зона, которая находится в каталоге товаров на сайте.

Кликните по фильтру в зоне, чтобы развернуть его параметры. В них вы можете удалить виджет, а также изменить его параметры. Иногда это название, иногда количество товаров или принцип их отображения. Зависит от виджета.

Чтобы добавить новый виджет, просто перетащите его из левой части экрана в нужную зону. Другой вариант — кликнуть по названию виджета, выбрать название зоны из выпадающего списка и нажать «Добавить виджет».

Конкретно для фильтров вы найдёте специальные виджеты внизу. Названия у них начинаются одинаково — «Фильтрация товаров» — поэтому понять, где какой фильтр, можно только из описания. Например, чтобы добавить фильтр по размеру, выберите виджет со словами «Отображать список атрибутов» в описании.

Поэкспериментируйте с виджетами и соберите подходящие фильтры на странице магазина, чтобы посетителям было удобно находить товары.

Создаём метки

Метки — это ещё один дополнительный параметр для товаров вроде атрибутов или брендов. Их присваивают отдельным товарам, чтобы потом можно было вывести все товары с конкретной меткой на отдельной странице. Например, вы можете создать метку «Акция», а потом создать отдельную страницу и вывести на ней только акционные товары.

Конечно, можно вместо метки создать категорию «Акция» и наполнить её нужными товарами, но категория будет отображаться в виджете «Категории товаров», а метка нет. То есть, используя метки, вы сможете избежать лишних категорий, чтобы не перегружать виджет с ними в магазине.

Перейдите в консоли в раздел «Товары» — «Метки». Интерфейс раздела предсказуемо похож на подраздел «Атрибуты» или «Категории»: слева создаём новые метки, справа — редактируем их.

Для примера создадим метку для акционных товаров. В поле с названием впишите «Акция» или «Распродажа», а в ярлык — «sale». После этого нажмите внизу «Создать метку».

Теперь метку можно добавлять к товарам, как бренд или категорию. Для этого перейдите в раздел «Товары» — «Все товары» и отметьте галочкой товары с акционной ценой. Затем выберите «Изменить» в списке «Действия» вверху таблицы и нажмите рядом кнопку «Применить».

В меню редактирования нескольких товаров найдите блок «Метки товаров» и начните вводить название метки. После того как вы введёте несколько первых букв метки, она должна появиться в виде элемента списка. Выберите этот элемент, а затем нажмите «Обновить» чуть ниже.

Вы присвоили товарам метку. Теперь скопируйте на неё ссылку в разделе «Товары» — «Метки» и разместите где-нибудь на сайте. Например, чтобы на неё могли перейти с баннера на главной странице.WordPress сгенерирует страницу с нужными товарами автоматически.

Чтобы найти ссылку, наведите курсор на метку и найдите ссылку «Перейти». Кликните по ней правой кнопкой мыши и выберите «Скопировать ссылку».

Редактируем внешний вид карточек с товарами

Речь о внешнем виде миниатюр с товарами на сайте. По умолчанию они состоят из изображения товара и четырёх строк: названия товара, категории, цены и рейтинга. Отображение этих элементов тоже можно регулировать.

Откройте в консоли раздел «Внешний вид» — «Настроить». Это раздел с визуальными настройками вашего интернет-магазина. В нём нельзя поменять блоки местами или добавить новые, но можно изменить шрифты и стили кнопок на сайте, изменить местоположение боковой панели с фильтрами на странице или выбрать другую исходную сортировку товаров. А также много других настроек.

Сейчас вам нужно перейти в раздел «WooCommerce» — «Каталог товаров». На этой странице прокрутите боковую панель в самый низ, пока не увидите в ней блок «Структура магазина».

Этот блок отвечает за то, как выглядят миниатюры с товарами на сайте. По умолчанию здесь выбраны четыре элемента из шести. Как раз то, что видно в правой части экрана: заголовок, рубрика, цена и рейтинг.

Кликните по элементу, если хотите его выключить и наоборот. Например, поначалу неплохой идеей будет убрать рейтинг, потому что ни у одного товара его пока нет, а пустые звёзды выглядят странно. В конце нажмите «Опубликовать» в верхней части боковой панели, чтобы применить изменения.

На этом с товарами всё. Вы узнали о предназначении каждого подраздела в разделе «Товары». Чтобы выйти из визуальных настроек магазина, нажмите крестик в левом верхнем углу бокового меню. Теперь отредактируем меню в шапке сайта.

Перейдите в консоли в раздел «Внешний вид» — «Меню». В этом разделе вы сверху выбираете, какое именно меню редактировать, а снизу добавляете в это меню новые разделы и управляете разделами, которые там уже есть.

По умолчанию здесь будет выбрано меню «For Her». Это не то меню, которое сейчас находится в шапке. Выберите из выпадающего списка меню с названием «Main Menu» и нажмите справа кнопку «Выбрать».

Ниже на странице будут блоки для работы с выбранным меню: слева — элементы, которые можно в меню добавить, а справа — уже добавленные элементы.

Чтобы добавить новый элемент в меню, поставьте возле него галочку в левой части экрана и нажмите «Добавить в меню».

По умолчанию в левой части экрана среди разделов, из которых можно выбрать новый элемент для меню, не будет раздела с категориями. Но вы можете его добавить. Для этого в правом верхнем углу страницы найдите вкладку «Настройки экрана».

В открывшемся меню отметьте галочкой пункт «Категории» и снимите галочки с пунктов, которые хотите убрать. Например, вам вряд ли понадобится добавлять в меню элементы из разделов «Рубрики», «Записи» и «Эндпоинты WooCommerce».

Затем сверните «Настройки экрана», найдите слева внизу раздел «Категории» и добавьте в меню недостающие элементы.

Чтобы отредактировать существующий элемент меню, кликните по стрелочке в правой части элемента. Откроются параметры, где вы сможете переименовать элемент, переместить его или удалить. Вы также можете перетаскивать элементы мышкой.

Чтобы сделать элемент меню дочерним и создать выпадающий список, как у меня на демонстрационном сайте, возьмите элемент мышкой и поставьте его под нужным элементом, немного сместив вправо.

Пунктирная линия за элементом показывает, где он приземлится, если отпустить мышку

Другой способ сделать элемент дочерним — развернуть параметры элемента и в строке «Переместить» нажать ссылку «Под “Название элемента”». Элемент станет под раздел, который идёт сразу над ним.

После того как закончите добавлять и редактировать элементы меню, не забудьте сохранить изменения в правом верхнем углу экрана.

Меняем дизайн шапки сайта

Перейдите в раздел «Внешний вид» — «Настроить», а на следующей странице откройте раздел «Шапка».

В этом разделе будут четыре подраздела: «Айдентика сайта», «Основная шапка», «Основное меню» и «Прозрачная шапка». Кратко рассмотрим каждый из них.

Айдентика сайта. Здесь можно изменить одну из вариаций логотипа на сайте, а именно — чёрный логотип, который отображается на странице магазина, где шапка непрозрачная. Белый логотип с прозрачной шапки будет в другом разделе.

Также в этом разделе можно установить фавикон — иконку, которая отображается во вкладке браузера. А в конце раздела будут поля, которые добавят в шапку название и краткое описание сайта.

Основная шапка. Здесь можно выбрать один из трёх вариантов расположения логотипа и элементов в меню: логотип слева, справа или по центру.

Также можно сделать так, чтобы контент в шапке растянулся по всей ширине экрана или по бокам были небольшие отступы. В конце раздела — поля для настройки размера и цвета нижней границы шапки.

Основное меню. Здесь можно отключить меню, а также заменить иконку с корзиной справа на что-то другое: поиск, кнопку, произвольную ссылку или виджет.

Также здесь будут настройки внешнего вида выпадающих списков, которые появляются при наведении на элемент в шапке. Можно изменить толщину и цвет их границ, а также выбрать другой тип анимации.

Кроме того, здесь будут настройки для меню на мобильных устройствах. Например, «Брейкпоинт меню» — это ширина экрана, при которой стандартное меню перестраивается на мобильное.

На боковой панели внизу есть три иконки: компьютер, планшет и смартфон. С их помощью вы можете просмотреть ваш сайт как бы с разных устройств. Переключитесь на смартфон и уведите переключатель в строке с брейкпоинтом полностью влево. Вместо компактного меню появится такое, как при просмотре сайта с компьютера.

Прозрачная шапка. Здесь можно отключить прозрачную плашку, а также изменить белый логотип, который видно на главной странице, а также странице с информацией о магазине и контактами.

Также в этом разделе будут детальные настройки внешнего вида прозрачной плашки. С их помощью можно менять внешний вид ссылок в меню и дизайн выпадающих списков. Можно даже регулировать прозрачность плашки.

Например, по умолчанию ссылки в меню не полностью белого цвета, а немного сероватые. Они становятся белыми, только если на них навести курсор. Это интересный ход, но я на своём демонстрационном сайте сделал наоборот. Чтобы по умолчанию текст был белым, а при наведении становился сероватым.

Если хотите сделать так же, нажмите на значок карандаша в пункте «Меню», затем поменяйте местами «Цвет ссылки / текста» и «Цвет активный / при наведении». Чтобы изменения вступили в силу, не забудьте нажать кнопку «Опубликовать» вверху страницы.

Меняем дизайн сайта в Elementor

Приступаем к самому интересному этапу создания магазина на WordPress — работе с дизайном в конструкторе страниц Elementor. Я не буду описывать здесь все изменения на каждой странице магазина, а только подробно расскажу об интерфейсе конструктора, чтобы вы понимали, что он умеет и куда нажимать. Этого должно быть достаточно, чтобы понять принцип. Если хотите увидеть в деталях, как я менял дизайн на демонстрационном сайте, посмотрите видеоурок.

Зайдите на главную страницу вашего сайта и в панели быстрого доступа нажмите кнопку «Редактировать в Elementor».

Интерфейс конструктора похож на раздел с визуальными настройками: слева — панель, в которой вы меняете параметры элементов, справа — сами элементы на странице. По сути это главная страница вашего интернет-магазина на Вордпресс, но без верхнего меню и с возможностью менять содержимое.

В Elementor главная страница состоит из секций. У каждой из них голубые границы, а вверху небольшая плашка с тремя кнопками: добавить новую секцию, выбрать или удалить текущую секцию. За центральную кнопку можно взять секцию мышкой и перенести в другую часть сайта.

Внутри секций расположены элементы: заголовки, баннеры, ссылки, кнопки, товары, изображения. Наведите курсор на любой из элементов и увидите вокруг него синюю рамку с иконкой карандаша, что означает «Редактировать».

Кроме синей рамки вы также увидите рамку из белой пунктирной линии — границы колонки, в которой находится элемент. В левом верхнем углу этой границы ещё будет значок колонки. Если кликнуть по нему правой кнопкой мыши, появится меню с основными действиями, которые можно совершить с колонкой. Так вы можете добавить ещё одну колонку или удалить лишнюю.

Если кликнуть правой кнопкой мыши внутри элемента, также появится меню с основными действиями, которые с этим элементом можно сделать: отредактировать, дублировать, копировать или удалить.

По сути вся главная страница состоит из секций, внутри которых расположены колонки с элементами. А редактирование дизайна сводится к тому, чтобы выбрать нужную секцию, колонку или элемент, а потом поменять её параметры в панели слева.

Теперь разберёмся с интерфейсом боковой панели. Что бы вы ни выбрали, конкретный элемент или отдельную секцию, в боковой панели будут три вкладки: «Макет», если выбрать секцию, или «Содержимое», если выбрать элемент внутри секции, а также «Стиль» и «Расширенные».

В целом, по названиям примерно понятно, какие настройки будут в каждом разделе. Проверьте, что есть на каждой вкладке. Любопытство поможет вам быстрее освоиться в интерфейсе и запомнить, где что находится. Если поменяете какие-то настройки и результат вас не устроит, всё всегда можно вернуть комбинацией клавиш Ctrl+Z.

Также в боковой панели есть две кнопки вверху: слева — три горизонтальных полоски, а справа — точки в форме квадрата. Кнопка слева открывает главное меню Elementor. В нём можно изменить глобальные настройки и выйти обратно в консоль WordPress.

Кнопка справа открывает раздел с блоками, которые вы можете добавить на страницы. Если вам вдруг понадобится добавить заголовок, кнопку, картинку или ещё что-то, всё это можно найти здесь. Просто найдите нужный элемент и перетащите в нужную область на сайте.

Внизу панели находятся кнопки с основными функциями, которые понадобятся вам во время работы в конструкторе. Слева направо это: 1) базовые настройки страницы, 2) навигатор по секциям, 3) отменить предыдущее действие, 4) переключиться на режим просмотра с другого устройства, 5) просмотреть изменения без публикации.

Теперь давайте поменяем изображение и текст на главном баннере, чтобы вы поняли принцип редактирования отдельных элементов.

Чтобы заменить любое изображение на странице, выберите секцию или колонку, в которой оно находится. В случае с главным баннером это секция, поскольку баннер занимает всю его площадь. Кликните по центральной кнопке в голубой плашке вверху секции, а потом перейдите на вкладку «Стиль». Изображения всегда меняются именно на этой вкладке.

Кликните по изображению в боковой панели, чтобы открыть всплывающее окно для загрузки нового изображения. В нём будет три вкладки, на которых вы можете: загрузить картинку с компьютера, выбрать из библиотеки уже загруженных изображений или найти изображение в бесплатной библиотеке.

По окончанию загрузки вы можете отредактировать фото в правой части экрана, а также заполнить его параметры.

Рекомендую всегда заполнять поле «Атрибут alt». Это текст, который появится на вашем сайте вместо изображения, если оно вдруг не загрузится. А ещё его используют программы, которые читают содержимое сайтов для людей с плохим зрением.

Просто опишите, что изображено на картинке. Если занимаетесь SEO продвижением, сюда можно вписать ключевые слова. После того как заполните, нажмите справа внизу кнопку «Вставить медиа».

После того как вы замените изображение, отредактируйте его параметры в боковой панели. Сразу под миниатюрой изображения на вкладке «Стиль» будут настройки, с помощью которых вы можете выбрать, какую позицию должно занимать изображение и как оно должно себя вести при движении экрана.

Например, по умолчанию при скролле страницы главный баннер не уезжает за пределы экрана, а как бы стоит на месте, пока остальная часть сайта наезжает на него. Чтобы убрать этот эффект, выберите в пункте «Привязка» значение «Прокручивать».

Отдельный момент — синий фон поверх баннера. Его не было заметно, когда на сайте был стандартный баннер, но после загрузки изображения с фоном другого цвета, этот эффект бросается в глаза.

Изменить фон поверх баннера вы можете в разделе «Перекрытие фона» на этой же вкладке. Сейчас вы работали в разделе «Фон», а ниже ещё есть несколько других разделов: «Перекрытие фона», «Граница», «Разделитель секции» и «Типографика».

Разверните раздел «Перекрытие фона» и увидите поля с цветом наложения и его прозрачностью. Поэкспериментируйте с настройками, чтобы понять, как будет лучше в вашем случае: с наложением или без него. Чтобы полностью убрать наложение, кликните по кисточке в строке «Тип фона».

Чтобы поменять текст на баннере, просто кликните по нему в правой части экрана и увидите сбоку поле, в которое можно вписать свой текст. Там же будут настройки размера и выравнивания текста. Цвет текста будет на вкладке «Стиль».

Если вы откроете сайт в новой вкладке браузера, то увидите, что текст на баннере появляется с задержкой. Подобные настройки можно найти на вкладке «Расширенные» в боковой панели. Там же будет возможность добавить отступы вокруг элемента.

Настройки анимации текста будут в разделе «Эффекты движения». Можете убрать анимацию или наоборот добавить её для кнопок. Изначально этот эффект есть только у заголовка и подзаголовка.

Надеюсь, принцип работы с Elementor понятен. Подобным же образом вам предстоит отредактировать всю главную страницу. Главное не забывайте публиковать изменения в правом нижнем углу бокового меню, чтобы ничего не потерять.

Футер — это отдельная сущность, которой не будет в Elementor, когда вы будете редактировать страницы сайта. Чтобы отредактировать его, перейдите в консоли в раздел «Внешний вид» — «Настроить» — «Footer Builder».

[pwb-az-listing]

.woocommerce-shipping-destination {
    display: none;
}
.woocommerce-shipping-calculator {
    display: none;
}

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.

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?

When You Should Consider Customizing Category Pages

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

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.

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.

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!

Step 4: Check how the category page displays

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

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.

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.

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.

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.

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.

Link to other potential pages

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.

WooCommerce дает вам несколько вариантов того, что вы можете отображать на своих страницах коллекций:

• продукты
• категории (на главной странице магазина) или подкатегории (на страницах категорий)
• как продуктов, так и категорий.

Когда я настраиваю магазин, я обычно выбираю третий вариант: продукты и категории/подкатегории. Это означает, что посетители моего магазина могут выбирать продукты прямо с домашней страницы или уточнять их поиск, перейдя в коллекцию категории продуктов.

Тем не менее, есть одна причина отказаться от этого подхода: он отображает категории/подкатегории вместе, без разделения между ними. Это означает, что если ваши изображения продукта имеют разные размеры , макет может выглядеть немного грязным. Даже если ваши изображения имеют одинаковый размер, если одна из строк на странице коллекции включает в себя как категории, так и продукты, отсутствие кнопки «Добавить в корзину» для категорий делает эту строку неопрятной, поскольку не все ее элементы имеют одинаковые размеры.

В этом уроке я покажу вам, как показывать категории в отдельном списке перед отображением продуктов.

Чтобы сделать это, мы выполним четыре шага:

1. Определите код, используемый WooCommerce для вывода категорий и подкатегорий на странице коллекции.
2. Создайте плагин для нашего кода.
3. Напишите функцию для размещения категорий или подкатегорий перед списками продуктов.
4. Стиль вывода.

Но прежде чем вы начнете, вам понадобится установка WooCommerce с добавлением продуктов, а также настройки категорий продуктов и подкатегорий.

Что вам понадобится

Чтобы двигаться дальше, вам понадобятся:

• Установка WordPress для разработки.
• Редактор кода.
• Установка и активация WooCommerce.
• Добавленные продукты: я импортировал данные фиктивного продукта, которые поставляются с WooCommerce; для получения подробной информации о том, как это сделать, см. это руководство.
• Активная совместимая с WooCommerce тема — я использую Storefront.

Перед началом работы: параметры по умолчанию

Давайте посмотрим, что WooCommerce дает нам по умолчанию.

Я начал с добавления некоторых изображений в категории товаров и подкатегории, поскольку фиктивные данные WooCommerce не включают их. Я просто использовал изображение одного из продуктов из каждой категории или подкатегории, как вы можете видеть на скриншоте:

Теперь давайте посмотрим, как WooCommerce отображает категории продуктов и продукты на страницах коллекций.

Если вы еще этого не сделали, перейдите в WooCommerce > Settings, выберите вкладку Products, а затем выберите опцию Display. Для каждого из параметров Shop Page Display и Default Category Display выберите Show both:

Нажмите кнопку Save changes, чтобы сохранить настройки и перейти на страницу магазина вашего сайта. Мой результат выглядит так:

Это происходит, потому что у меня есть три категории товаров, и мои изображения категорий имеют тот же размер, что и мои изображения продукта, они выглядит довольно аккуратно. Но вот одна из коллекций категорий продуктов:

Поскольку эта категория имеет две подкатегории, первый продукт отображается вместе с ними, в сетке три элемента. Я хочу сделать мои категории и подкатегории более заметными и просто представить их отдельно от списков продуктов. Так что давайте сделаем это.

Идентификация кода WooCommerce использующего выходные категории и продукты в коллекции

Первый шаг — определить, как WooCommerce выводит категории и подкатегории. Итак, давайте углубиться в исходный код WooCommerce, чтобы найти соответствующую функцию.

Файл WooCommerce использует для отображения страниц коллекций archive-product.php, который находится в папке templates.

Внутри этого файла вы можете найти код, который выводит категории и продукты:

1

<?php

2

    /**

3

   * woocommerce_before_shop_loop hook

4

	 *

5

	 * @hooked woocommerce_result_count - 20

6

	 * @hooked woocommerce_catalog_ordering - 30

7

	*/

8

	do_action( 'woocommerce_before_shop_loop' );

9

?>

10

11

<?php woocommerce_product_loop_start(); ?>

12

13

    <?php woocommerce_product_subcategories(); ?>

14

15

	<?php while ( have_posts() ) : the_post(); ?>

16

17

		<?php wc_get_template_part( 'content', 'product' ); ?>

18

19

	<?php endwhile; // end of the loop. ?>

20

21

<?php woocommerce_product_loop_end(); ?>

Таким образом, определенна функция woocommerce_product_subcategories(), которая выводит категории или подкатегории перед запуском цикла, который выводит продукты.

Функция подключаемая, что означает, что мы можем переопределить ее в нашей теме. К сожалению, это не совсем так, поскольку WooCommerce имеет встроенный стиль для очистки элементов, который будет отображаться в начале строки с отображением по умолчанию.

Поэтому вместо этого мы отключим отображение категорий и подкатегорий на наших страницах коллекций, чтобы отображались только продукты. Затем мы создадим новую функцию, которая выводит категории товаров или подкатегории, и подключаем их к экшену woocommerce_before_shop_loop, убедившись, что мы используем высокий приоритет, чтобы он срабатывал после функций, которые уже подключены к этому экшену.

Примечание: поскольку WooCommerce добавляет очищения к каждому третьему списку продуктов, мы не можем использовать функцию woocommerce_product_subcategories() или отредактированную ее версию для отображения категорий. Это связано с тем, что он очистит третью, шестую (и т. д.) категорию или продукт, даже если мы используем эту функцию для отображения категорий отдельно. Мы могли бы попытаться переопределить это, но проще просто написать нашу собственную функцию.

Итак, давайте создадим плагин, который сделает это.

Создание плагина

Создайте в вашем каталоге wp-content/plugins новую папку и дайте ей уникальное имя. Я называю tutsplus-separate-products-categories-in-archives. Внутри создайте новый файл, также с уникальным именем. Я использую то же имя: tutsplus-separate-products-categories-in-archives.php.

Откройте файл и добавьте к нему этот код:

1

<?php

2

/**

3

 * Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages

4

 * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479

5

 * Description: Display products and catgeories / subcategories as two separate lists in product archive pages

6

 * Version: 1.0

7

 * Author: Rachel McCollin

8

 * Author URI: http://rachelmccollin.co.uk

9

 *

10

 *

11

 */

Возможно, вы захотите отредактировать данные автора, так как это ваш плагин, который вы пишете. Сохраните файл и активируйте плагин через администратор WordPress.

Написание нашей функции

Теперь давайте напишем функцию. Но прежде чем начать, отключите списки категорий на экранах администратора. Перейдите в WooCommerce > Settings, выберите вкладку Products, а затем выберите параметр Display. Для каждого из Shop Page Display и Default Category Display выберите Show products. Сохраните изменения.

Теперь ваша страница магазина будет выглядеть примерно так:

В своем файле плагина добавьте следующее:

1

function tutsplus_product_subcategories( $args = array() ) {

2

3

	}

4

}

5

add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );

Теперь добавьте этот код внутри функции:

1

$parentid = get_queried_object_id();

2

3

$args = array(

4

	'parent' => $parentid

5

);

6

7

$terms = get_terms( 'product_cat', $args );

8

9

if ( $terms ) {

10

11

	echo '<ul class="product-cats">';

12

13

		foreach ( $terms as $term ) {

14

15

			echo '<li class="category">';					

16

17

				woocommerce_subcategory_thumbnail( $term );

18

19

				echo '<h2>';

20

					echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';

21

						echo $term->name;

22

					echo '</a>';

23

				echo '</h2>';

24

25

			echo '</li>';

26

27

28

	}

29

30

	echo '</ul>';

31

32

}

Давайте посмотрим, что делает эта функция:

• Она идентифицирует текущий запрошенный объект и определяет его id как $parentid.
• Она использует get_terms() для определения условий с текущим запрошенным элементом в качестве родителя. Если это главная страница магазина, она вернет категории верхнего уровня; если это коллекция категории, она вернет подкатегории.
• Затем она проверяет наличие каких-либо условий, прежде чем открывать цикл foreach и элемент ul.
• Для каждого условия она создает элемент li, а затем выводит изображение категории с помощью woocommerce_subcatgeory_thumbnail(), за которым следует название категории в ссылке на ее коллекцию.

Теперь сохраните файл и обновите главную страницу  магазина. У меня выглядит так:

Отображаются категории, но им нужен стиль. Давайте следующим сделаем это.

Стилизация списков категорий

Чтобы мы могли добавить стиль, нам нужна таблица стилей внутри нашего плагина, которую нам нужно будет поставить в очередь.

В своей папке плагина создайте папку css и внутри нее создайте файл с именем style.css.

Теперь, в вашем файле плагина, добавьте это выше функции, которую вы уже создали:

1

function tutsplus_product_cats_css() {

2

3

    /* register the stylesheet */

4

    wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );

5

6

    /* enqueue the stylsheet */

7

    wp_enqueue_style( 'tutsplus_product_cats_css' );

8

9

}

10

11

add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' );

Это правильно помещает таблицу стилей, которую вы только что создали.

Теперь откройте таблицу стилей и добавьте код ниже. WooCommerce использует сперва мобильный стиль, поэтому мы тоже будем его использовать.

1

ul.product-cats li {

2

    list-style: none;

3

	margin-left: 0;

4

	margin-bottom: 4.236em;

5

	text-align: center;

6

	position: relative;

7

}

8

ul.product-cats li img {

9

	margin: 0 auto;	

10

}

11

12

@media screen and (min-width:768px) {

13

14

	ul.product-cats {

15

		margin-left: 0;

16

		clear: both;

17

	}

18

	ul.product-cats li {

19

		width: 29.4117647059%;

20

		float: left;

21

		margin-right: 5.8823529412%;

22

	}

23

	ul.product-cats li:nth-of-type(3) {

24

		margin-right: 0;

25

	}

26

27

}

Я скопировал точные ширины и отступы из стиля, используемого WooCommerce.

Теперь проверьте свою главную страницу магазина. Вот моя:

Вот коллекция категории Music:

И вот как это выглядит на маленьких экранах:

Резюме

Категории продуктов — отличная функция WooCommerce, но способ отображения не всегда идеален. В этом уроке вы узнали, как создать плагин, который выводит категории продуктов или подкатегории отдельно из списков продуктов, а затем вы ввели списки категорий.

Вы можете использовать этот код для вывода списка категорий или подкатегорий в другом месте на странице (например, под продуктами), подключив функцию к другому хуку экшена в файле шаблона WooCommerce.

Если вы в настоящее время запускаете магазин, который хотите расширить, или вы ищете дополнительные плагины для изучения, связанные с WooCommerce, не стесняйтесь посмотреть, какие плагины доступны на Envato Market.