Design WooCommerce Product Category Page using Elementor

You can design WooCommerce Category Page layout using AE Pro and Elementor. This process is similar to designing a layout for 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 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 AE - Title widget provided by our plugin and do following configuration
    • Title: Archive Title (in the preview you will only see 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 AE - Post Block widget with the following configuration 
    • Source - Current Archive
    • Template - Select the Block layout you have created for Products Archive. You might find template drop down as blank. For this, you will have to create Block Layout first.  (Click here to know about create a block layout for Products)
    • Do rest of the settings as per your requirement.
  • Post Block settings will look like this 

  • Do the rest of the settings for Post Blocks widget as per your requirement.
  • With this, your setup for Category Archive layout is done. Now check your category page to see 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. 
  • 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. This layout will be repeated by Post Block widget to render Product Grid/List.
  • Design it the way you want and save. Now this will be available under Template field of Post Block widget.

Still need help? Contact Us Contact Us