Create WooCommerce Single Product page layout using Elementor
- Log in to your site admin. Go to AE Templates -> Add New Template
- Set any available (theme provided ) sidebar, header settings as per your choice. We prefer set full width with the sidebar. Also, enable Page Builder Integration for GeneratePress.
Or better choose Elementor Canvas for complete distraction-free design experience. It won't effect target page for which you are designing this layout.
- Below content area, you will get a meta box “Anywhere Elementor Settings”. Configure the options as mentioned below.
- Render Mode: Post Template
- Preview Post ID: Product ID of the product you want to see in preview while creating layout in Elementor editor
- Post Type: “Product”
- Auto Apply: Select if you want this template to be applied to all products automatically. Leave it unchecked if you want to select product template individually for each product.
- Now start designing it with Elementor.
In Elementor ‘s widget area you will get various new widgets to place and design individual parts of product page.
Selecting Product Layouts for individual products
In can you need multipe product layout for different type of product, you can create multiple AE Templates using the procedure mentioned above. After creating the layouts you can select them individually for each product.
For this just go to Product edit page in woocommerce. On right top you will get option “AE Post Template”. This will show you all the layouts you have created. Select your desired layout here.
Following options are available there
- None – If you don’t want any layout override and want to show default woocommerce layout.
- Global – This will show the layout which is set with Auto Apply as True (Checked)
- All other templates – List of All layouts created in AE Templates.