Design WooCommerce Product Category Page using Elementor

You can design a WooCommerce Category Page layout using AE Pro and Elementor. This process is similar to designing a layout for the taxonomy archive. 

Follow the steps below to design WooCommerce Product Category Page layout using Elementor & "AnyWhere Elementor Pro."

• Go to your WordPress admin -> Ae Templates -> Add New. 
• Give it a friendly title and do the following configurations.
  • Render Mode: Taxonomy Archive Template
  • Taxonomy: Product Categories
  • Preview Term: Select a product category from the drop-down. This will be used to show preview data.
  • Auto Apply: Check this if you want to make this template Global and apply it to all product categories. 
  • Override Theme Layout: This should be checked.
  • Enable Canvas: Check this only if you want to use Elementor Canvas Template for your product category page. 

• Now start editing this layout with Elementor.
• For Category Title, use the AE - Title widget provided by our plugin and do the following configuration.
  • Title: Archive Title (in the preview, you will only see the text "Archive," but on the category page, it will show the name of that particular category.)
  • Do the rest of the configuration as per your requirement.
• Now, for product collection, use the AE - Post Block Adv widget with the following configuration.    
  • Skin: Select the layout style from Grid, Carousel, or Accordion
  • Primary Block Layout - Select the Block layout you have created for the Products Archive. You might find a template drop-down as blank. For this, you will have to create a Block Layout first.  (Click here to learn about creating a block layout for Products)
  • Source - Current Archive
  • Do the rest of the settings as per your requirements.
  • Post Block settings will look like this. 

• Do the rest of the settings for the Post Blocks Adv widget as per your requirement.
• With this, your setup for the Category Archive layout is done. Now check your category page to see the new layout in action.

Final Layout

How to create Block Layout for Products Archive Page

• Go to AE Template -> Add New and create a new AE Template with the following configuration.
  • Render Mode -> Block Template
  • Preview Post -> Select an existing Product by typing its title.  This product will be used to show preview data while creating the layout. 

• The template configuration will look like this.    

  

• Now design the template using Elementor.
• Here you will have to use available AE widgets like Woo Title, Post Image, Woo Price, etc., to design the layout of a single product. The Post Block widget will repeat this layout to render the Product Grid/List.

• Design it the way you want and save. Now this will be available under the Primary Block Layout field of the Post Block Adv widget.