Designing WooCommerce Shop Page using AnyWhere Elementor Pro

You can design a 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 the following configuration.
  • Render Mode - Post Type Archive
  • Post Type - Product
  • Template - Check this if you want to use the Elementor canvas template for Shop Page.

• The settings section will look something like this.

  

• Now start editing this layout with Elementor.

• For the title, use the Heading widget of Elementor and give it some title, and design accordingly. 

  Now for product collection, use AE - Post Block Adv widget with the following configuration in the Layout and Query section.  

  

  • Skin: Select Grid option

  • Primary Block Layout - Select the Block layout you have created for the Products Archive page. You might find a template drop-down blank. For this, you will have to create a Block Layout first.  (Click here to know about creating a block layout for Products). 

    Configurations to be done under the Query Section

    

  • Source: Products.
  • Taxonomies: To get products from particular taxonomies enter

  • Do the rest of the settings as per your requirements.

    With this, your shop layout is complete. Now browse the 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. 

  • 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 a single product layout. The Post Block Adv 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 Block Layout field of the Post Block Adv widget.