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 or header settings as per your choice. We prefer to set full width with the sidebar. Also, enable Page Builder Integration for GeneratePress or better choose Elementor Canvas for a completely distraction-free design experience. It won't affect the target page for which you are designing this layout.

  Below the content area, you will get a meta box “Anywhere Elementor Settings.”  Configure the options as mentioned below.

  

  • Render Mode: Post Template
  • Preview Post: Enter the name of the product you want to see in the preview while creating the layout in the 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 a 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 the product page.

  

Selecting Product Layouts for Individual Products

In case you need multiple product layouts for the different types of products, 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 the Product edit page in WooCommerce. On the right top, you will get the option “AE Post Template.” This will show you all the layouts you have created. Select your desired layout here.

The following options are available there

• None – If you don’t want any layout override and want to show the 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.