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 the following configuration
- Render Mode - Post Type Archive
- Post Type - Product
- Template - 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 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)
- Do the rest of the settings as per your requirements.
- Post Block settings will look like this
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.
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 the Post Block widget to render the Product Grid/List.
Design it the way you want and save. Now this will be available under the Template field of Post Block widget.