Create a Singular themer layout for WooCommerce (Themer)
You can use the Singular themer 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 themer layout for a WooCommerce single product page.
Create a Singular themer layout
- In the WordPress admin panel, click Builder > Themer layouts.
- Click the Add New button at the top of the page.
- Enter a title for your theme layout.
- Verify that Type is Themer layout and for Layout select Singular, then click Add themer layout.
The Edit themer layout screen will open.
Edit the Singular themer 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.
Tip: As of Beaver Themer Version 1.2, you can insert a WooCommerce product image gallery into a layout by inserting the Product Gallery Images field connection into the Photos field of a Gallery module, as shown in the following screenshot.