Do you want to modify the category page? This guide provides a variety of ways to customize woocommerce category pages, with or without plug-ins. Category pages are usually one of the most neglected and difficult to customize pages in e-commerce stores. This is usually because it is a hierarchical bridge between products and shopping pages. However, there are several practical schemes for users to search products according to category pages, so it is best to edit and make full use of them. Before looking at the various ways to customize category pages in woocommerce, please better understand the benefits of doing so.
Why edit the woocommerce category page? The category page displays all the products of the woocommerce store in this category. Users usually use different pages to search for products, but sometimes think it is easier for customers to find items on the category page. For example, if you don’t know the product name but know the category, you can use the category page to search for products. In addition, customers who are greatly affected by the category page area can stay on the website for a longer time. Since these pages are often ignored, customization will be obvious and improve the customer experience.
The good news is that you can easily customize the category page using woocommerce. The bad news is that woocommerce offers quite limited default options. You can only edit the name, slash, parent category, description text, display type, and thumbnail of each category page. You can also use the theme customization tool to edit other elements, but you need something else to take the category page to a whole new level. Therefore, this guide will show you how to edit category pages in woocommerce and make it easier for customers to browse the site.
How to customize the category page of woocomer WordPress provides a variety of ways to easily customize the category page of woocomer. In this section, you can review each method step by step and select the method that best suits your needs, as well as the programming method (coding) using a dedicated plug-in. Note: before you start, make sure that woocommerce is set up correctly and all required pages are generated. 1. Customize the category page of woocomer with divi. Divi is one of the most popular WordPress Themes, so it’s reasonable to do so. It provides many functions, is fully compatible with woocommerce, and is very suitable for custom category pages.
This topic is provided with the built-in drag and drop builder that creates custom category page templates. In this way, a template is created for category pages and can be used for all pages of the woocommerce store. Divi is easy to use because you can see all the changes made by the builder in real time through real-time preview. Divi also provides various modules that can easily add many elements to the page, saving a lot of time when creating or editing category pages. 1.1. To install and activate divi using divi, you must first install and activate it. The divi zip file can be ed from the official website.
Then navigate to the WordPress dashboard and navigate to shapes > themes > new. Upload the recently ed divi according to the theme. Select the zip file and upload it to the site. When the upload is complete, click the \
The divi builder, the built-in page builder for customization, will also be installed automatically. 1.2. Create a custom category page template to start creating a custom category page template, navigate to divi > Theme Builder and click add new template.
Male then select the check box of all product category pages under the archive page, and then click create template. Then select add custom body from the new template just added. We also choose the build custom body option because we will create a new template with divi. Male displays 3 options. Build a template in the divi library from the beginning and further use it to customize the woommerce category page. You can copy an existing page and choose the option that is best suited to be used as a page template for all product categories. In this tutorial, select build from scratch and click the start build button.
You will be redirected to the category page layout where you want to generate the template by using androg divi builder. To start building a template, you must select a structure. In the new row, select the row type to use for the category page. You can add multiple rows and columns. The category page title and body require at least two rows, but if you want to add a sidebar to the category page body, you may need more columns. After selecting the number of rows and columns, you must add a divi module to further customize the category page layout. 1.3. For the category page title category page title, you must add the page title and moving path of the category page.
To add a post title, click the \
Male 1.3.1 – adding the mobile path module requires further navigation of the mobile path module on the category page, so click the \
1.4. After editing the category page body title, you can go to the category page body. If you do not already have rows, click the green \
. before demonstrating the method, please back up the WordPress website and make sure to use sub themes. You will change some core theme files, and if there is a problem, the site may be interrupted. Therefore, it is recommended that you always keep a recoverable backup version to prevent problems. To create a code snippet using a custom category page title to create a custom category page title, go to shape > Theme Editor and use the following code snippet as a function of the sub theme: You must add it to your PHP file. 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 snipt, please check this website. This allows you to display a custom title on the category page instead of the default category title. Just as you can change the background of a product category page, you can also use code snippets to change the background of a product category page. The next code snipt is another fusion. Paste into the PHP file. if (is_product_category()){ add_action( ‘wp_head’ , function () { ?> 
.woocommerce.post-type-archive-product { background-image:none !important; } . woocommerce. single-product { background-image:none !important; } This is an advanced plug-in, but to add a quick view on the category page, you must install the free version and one of the advanced plans. Please go to this page first to install and activate woocommerce direct checkout. After installing and activating the plug-in, go to the woocommerce > Direct checkout > archive from the WordPress dashboard. Select Yes from the drop-down menu, activate the add quick view button option, and then save the changes. After viewing the website at the front end, you can see a new button next to the \
During the period of the store, the whole store can also be transformed. To accomplish this, we discussed various ways to edit category pages. I hope this guide, together with Devi, uses dedicated plug-ins for programming, which is both useful and easy to edit category pages. We also provide reward tips for adding a quick view of products on the category page. Finally, we identified some suggestions to improve the conversion rate by improving the category page, using better images, and always showing the moving path. If this guide is useful, it is recommended that you review the following guide. Woocommerce how to hide and delete the Add button on the shopping cart woocommerce shopping cart page customize woocommerce to pay handling charges
