Create a theme layout for WooCommerce single product pages (Themer)
You can use the Singular theme layout to design WooCommerce single product pages.
Note: The WooCommerce modules that you use in Theme Builder to lay out single product pages have standard WooCommerce functionality. The WooCommerce modules provide a convenient way to style the page and show or hide various WooCommerce components.
Here's how to create a theme layout for a WooCommerce single product page.
Create a Singular theme layout
- In the WordPress admin panel, click Builder > Theme layouts.
- Click the Add New button at the top of the page.
- Enter a title for your theme layout.
- Verify that Type is Theme layout and for Layout select Singular, then click Add theme layout.
The Edit theme layout screen will open.
Edit the Singular theme layout
- For Location, click Choose, then select Product from the Products category. In the field next to it, select All products.
- Click Publish, then click Launch Page Builder.
- Click Templates in the upper right corner.
- Select the Product template, then click Replace existing layout.
Now you have the initial layout for a WooCommerce single product page.
Tip: It's easier to design the layout if you already have at least one product created. You can preview the product as you work and see the information that will appear.
Special WooCommerce modules for the Singular theme layout
When you edit the Singular theme layout in Page Builder and have the WooCommerce plugin installed, there's a special content category in the Add content panel called WooCommerce modules. Most of these modules are used in the Product initial layout template.
See the Related Articles for a description of each of these modules.