Designing WooCommerce Shop Page using AnyWhere Elementor Pro

You can design WooCommerce Shop page using AnyWhere Elementor Pro. This is actually a "Post Type Archive" template for post type - Product

  • Go to your WordPress admin -> AE Templates -> Add New 
  • Give it a user-friendly title and do following configuration
    • Render Mode - Post Type Archive
    • Preview Post - Leave it blank
    • Post Type - Product
    • Override Theme Layout - Checked
    • Enable Canvas - Check this if you want to use Elementor canvas template for Shop Page
  • Settings section will look something like this

  • Now start editing this layout with Elementor
  • For title use Heading widget of Elementor and give it some title and design accordingly. 
  • Now for product collection use AE - Post Block widget with the following configuration 
    • Source - Products
    • Block Layout - Select the Block layout you have created for Products Archive page. You might find template drop down 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 

  • With this your shop layout is complete. Now browse shop page and you will see this layout implemented there. This is just an example of the basic setup. You can make a much attractive layout using your Elementor design skills. 

Complete Setup 

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