Using Post Blocks widget of our plugin AnyWhere Elementor Pro you can design awesome WooCommerce Product Category archives and shop page layouts. You will get full control over every element on that page.
Here I will show you how you can create a Product Category Archive layout.
If you know Elementor, you can easily design the basic layout. The mystery that I am going to solve here is creating a good layout for Product Collection or Product loop.
Most of the themes come with a default layout for this section. This layout might not be as good as you want and also you don't like to have the same layout for all the WooCommerce sites you are creating with that theme.
Let's have a look at how WooCommerce Product Archive looks in one of the famous and my favorite theme - GeneratePress.
It is not that bad, but also not so good to be delivered to a client :)
What about making it something like this and all this by using your favorite page builder - Elementor?
So let's start with the process. Here is the list of tasks that I will be going through while designing WooCommerce Product Archive layouts.
- Create a Block Layout - A layout that will define how an individual product item will look in the Product Grid.
- Designing Template for the Category Archive - This will be the main layout that will take over the theme's layout.
Create a Block Layout
- Create a new AE Template - Go to AE Template -> Add New
- Give an appropriate title to that template and do following configurations under AnyWhere Elementor Settings.
- Render Mode: Block Layout
- Preview Post: Select a product by typing its title here. (This product will be used to show preview data while designing in Elementor editor.)
- Now save the template and hit Edit with Elementor to open it in Elementor editor.
- Once you are in Elementor editor, have a look at widget area under Category "AE Template Elements". You can find a lot of widgets there. There are also a lot of WooCommerce specific widgets (prefixed with AE - Woo).
- You can use them to design the layout of individual Product. Like AE - Woo Gallery, AE - Woo Title, AE - Woo Rating and AE - Woo Price.
- After this, we are ready with Block Layout. Time to move ahead and design Product Category Archive layout.
Designing Layout for WooCommerce Product Categories
- Create a new AE Template. Go to AE Templates -> Add New.
- Give it an appropriate title and do following configurations under AnyWhere Elementor Settings.
- Render Mode: Taxonomy Archive Template
- Taxonomy: Product Category
- Preview Term: Select a Product Category by typing its name here.
- Auto Apply: Check this option if you want this layout to be applied over all product categories. (You can override it by settings different template to each category.)
- Override Theme Layout: Just tick this one. (It is there just for backward compatibility, will be removed in near future.)
- Template: Just select how you want it to work. The default will load the theme's layout. It might have many unnecessary elements. The best way is to use the Elementor Full Width. You can also use Elementor Canvas if you are also designing header part in the same template.
- Save the template and click on Edit with Elementor to open Elementor Editor.
- For the dynamic title, use AE - Title widget and select Type -> Archive Title. In the editor, it might just show you the word "Archive" but on the frontend, it will display the respective Category Name.
- Now the most important part is to display product collection. For this, you will have to use the AE - Post Blocks widget.
- Drag the Post Block widget at the desired location in your layout.
- In Post, Blocks widget do the following configuration
- Source: Current Archive (To display product only from the current category)
- Template: Select the Block layout we have just created above.
- You can notice that this Block layout is now used to render the layout of each product.
- You can adjust the rest of the settings as per your requirement. Like the number of columns, styles etc.
- That's it. Now view your Product Category on the frontend and you will see your new layout.