How to Create & Customize WooCommerce Product Category Page Template Using ProductX
Today I will show you, how you can create a custom product category page template for your WooCommerce Store. And, It will replace the default WooCommerce category page template.
👉 Learn More: https://www.wpxpo.com/how-to-customiz...
🚀 Get ProductX: https://www.wpxpo.com/productx/?utm_s...
👉 Filter Video: • How to add Product Filter to WooComme...
For that, I will be using the WooCommerce Builder addon of ProductX.
It is the best WooCoommerce Builder based on Gutenberg. So that, you can dynamically redesign all pages of your WooCommerce store without compromising the loading time.
So without further ado, let’s start creating a custom product page template. But before going into that, make sure you have the Productx plugin installed on your site.
After properly, installing the Productx plugin, go to the addon section and make sure that, the WooCommerce Builder addon is turned on. Now go to the builder section. Here, you can see all available options. For now, let's click on the Archive, it allows us to create templates for product categories, tags, or both at once.
Here you can see two options. Either, we can start from scratch, or, start with a premade template. First of all, I will start with the premade template. Later, I will also show the process of starting from scratch. So, please watch the full video for a better understanding.
To start using the premade template, we need to click on the import button. Here you can see that, the template is imported to the page. It is displaying the latest products of our store, and, will be replaced with the actual products when we visit the product pages.
Now, as you can see that, the category page template is ready. So you can publish it without making any changes. However, you can also customize it, if required.
But before going into that, you should know that, the template is built with three blocks of ProductX. which are, Archive title block, Filter Block, and, Product Grid 1 block. So, you can customize all of the blocks individually. To customize a block just click on it and you will see the customization options on the right side.
Now, let’s see how we can create a custom category page template from scratch. For that, click on the Start from Scratch option, instead of importing the template.
Here you can see that, the template is empty. So, we have to fill it up, by using the blocks located on the left side.
First of all, we need to add the Archive Title Block. For that, just click on the plus icon, and drag and drop the Archive Title Block to your desired position. For now, it is showing text. But, it will be replaced with the actual category title and description, when you visit any product category pages.
Then, As we want to display the filtering options on the left side, and, the products on the right side. We need to use the Gutenberg column block.
So, let’s add a column block, with a 33 by 66 ratio. Now we can add the filter block, on the left side. And, Product Grid 1 block, on the right side.
Now, let’s see the available customization option. For the Archive-title block, you can change the layouts, with or without product category images.
Then you can change heading tags as well. There are many more customization options available. Including, text colors, Typography, padding, and so many more.
For the category filter block, we must connect it to the block, that, we have added to the template. As I have added the product gird 1 block. I am selecting it from the drop-down. Then, we need to remove the filtering option that is not required, for the category pages.
If you want to know the customization option of filter block. We have a dedicated video, that you can watch to learn mor about it. The link will be in the description.
For now, let’s see the customization option for the product grid block.
First of all, you will get some premade layouts of the product grid blocks. Then you can change between grid and slide view.
Moreover, you can increase or decrease the number of columns, and adjust the gaps, between columns, and rows.
Time Codes:
0:00 - Introduction
0:36- Turn On Builder Addon
0:43 - Start Creating WooCommerce Single Product Page Template
0:54 - Import Premade Template
1:52 - Create Template from Scratch
2:54 - Customize WooCommerce Product Page
★ --- Important Links --- ★
🚀 Download Free Plugin: https://wordpress.org/plugins/product...
👉 ProductX Landing Page: https://www.wpxpo.com/productx/?utm_s...
🔥 Live Demo: https://wopb.wpxpo.com/
🏆 Download Free Theme: https://www.wpxpo.com/coblog/
★ --- Social Links --- ★
• Facebook - / wpxpo
• Twitter - / wpxpoofficial
#woocommerce #Product_Category_Page
Смотрите видео How to Create & Customize WooCommerce Product Category Page Template Using ProductX онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь WPXPO 11 Декабрь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 5,901 раз и оно понравилось 45 людям.