Undoubtedly one of the essential pages of an eCommerce website is the single product page. In fact, from the single product page (where a buyer has all the information about a product) are conveyed most of the purchases. Having the possibility of not being bound to pre-set layouts and independently deciding the perfect design to emphasize your product is a huge advantage.

▶  

From Uncode 2.3.0, it's possible to create custom WooCommerce Single Product Page layouts, and to use these layouts as a  design matrix for all or specific products. This advanced functionality is made possible by the new WooCommerce Product Builder modules and the Content Block.

With Uncode, you can design your dream Single Product Page with the new WooCommerce Builder, visually and without coding.

• Product Builder elements
• How to set up a simple product template
• How to set up a structured product template
• How to set up a product template with Page Builder Description
• Product Content Block with the Frontend Editor
• Wireframes Plugin
• Uncode Do Action
• Important Plugins support and compatiblity

Product Builder elements

When you open the list of all elements, you can filter the modules that can be used on the Single Product thanks to the WooCommerce Product tab, screenshot . Some modules are specific to WooCommerce, and others are modules that you usually use in Page Builder to create standard pages, but enriched with special features for WooCommerce. Let's list all the modules which have specific features when you create a Single Product Page, and for each one, let's highlight the peculiarities.

Note that here are listed only modules that have a specific Single Product Page function. Generic modules that do not have specific Single Product Page functions are excluded but can be used, such as Row, Empty Space, Tabs, Accordion, Divider, and many more...

Special Product Builder modules

• Product Gallery: this shows the product image and possibly the associated image gallery (carousel, dots navigation, or stack mode). NB. Only one Product Gallery in each page is permitted: screenshot ;
• Product Meta: this shows meta data such as SKU, categories, and tags, screenshot ;
• Product Reviews: this shows the customer product reviews, screenshot ;
• Product Rating: this shows the result from the average score of the individual reviews, screenshot ;
• Product Information: this shows the additional information on a product, such as attributes, screenshot ;
• Product Wishlist: this element creates the button to add a product to the Wishlist, screenshot ;

Modules with special Product Builder features

• Row and Columns when used inside a Content Block it's possible to use the Dynamic Background option (of the Row or Column module) to display the main product image, note that in case of a variable product the image is static, screenshot ;
• Posts: use this element to create the Related Products, thanks to the dynamic option, screenshot ;
• Media Gallery: use this element to display the main image and the product image gallery. Note that if you use this method to display product images, you cannot display any WooCommerce badges or display product variations for variation products, screenshot ;
• Single Media: use this element to display the main image of the product. Note that you cannot display any WooCommerce badges or display product variations for variation products, screenshot ;
• Heading: use this to display the product name, price, or short description/Excerpt, screenshot ;
• Button use this to create the Add to Cart button, or the Link to Product button (for Quick-View only), screenshot ;
• Text Block: use this element to display the Excerpt or Content (product description), screenshot ;
• Uncode Do Action: use to launch hooks at specific points during the page execution, screenshot ;
• Breadcrumbs: use to create the breadcrumb (navigation bar) with the user's location, screenshot ;

How to set up a simple product template

Setting a custom template to be used as an array for the layout of all your products requires the use of a Content Block. In this example, we are going to create all the layout within a single Content Block. We will use this Content Block as a matrix for our Single Product template via the Content option of the Theme Options.

Please note that depending on the organization you want to have, and the layout you want to create, you can also divide your template into different Content Blocks. In fact, the template can be structured using different Content Blocks, for example, Header, Content, and Related Products, each one is connected with a separate Theme Options template setting.

If you need to set up a custom Single Product template just follow these steps:

1. Create a new Content Block and assign a descriptive name such as 'Template Single Product (Content)'. Optionally, you can also create a dedicated category, such as 'Product'. In this way, it will be easier to organize your Content Block section if you plan to have several Content Block modules, screenshot .
2. Create your layout freely according to your needs using the Page Builder modules. You can use the Backend Editor or the Frontend Editor. Be careful to include the necessary modules for a Single Product in your layout: a Product Gallery screenshot , a Heading with the dynamic option 'Get the Title' screenshot , a Heading with the dynamic option 'Get the Price' screenshot , optionally a Text Block module with the dynamic option 'Get the Excerpt or 'Get the Contents' screenshot, and a Button with the dynamic option 'Add to Cart' screenshot .
3. When your layout is ready, all you have to do is connect the dynamic Content Block to the Single Product template via the Theme Options. Please navigate to Theme Options → Product → Content and connect your newly created Content Block, screenshot . If as in this example the layout is simple and is placed entirely in one Content Block and it does not require a Header and a Related Posts (After Content) area, be sure to disable possible selection for these options, screenshot .

How to set up a structured product template

For a better organization or to create a more sophisticated design, you can divide your layout into a Header, a Content part, a specific Related Posts section, and maybe a dedicated Footer.

If you need to set up a structured Single Product template, the instructions do not differ much from the steps required to create a simple template, and it is only required that each portion of the template is assigned to the respective Theme Option:

1. Create a Content Block for the Header, one of the Content and one of the Related Products, and assign each one a descriptive name, screenshot .
2. Create your layout freely according to your needs using specific Page Builder modules for each Content Block. Be careful to include the necessary modules for a Single Product in your layout.
3. When your layout is ready, all you have to do is connect the dynamic Content Blocks to the Single Product template via the Theme Options. Please navigate to Theme Options → Product and connect each of your newly created Content Blocks to the respective option, screenshot .

How to set up a product template with Page Builder Description

If you have created a Page Builder description for each of your products, you can benefit from the Content Type → Page Builder Description, screenshot .

With this option selected in the Content section is displayed the specific description you created through Page Builder inside each of your product. This option is, therefore, useful when you want to have at the top of the page a standard layout for all products, and follow with a section built with the Page Builder tailored for each product.

If you need to set up product layouts that use the Page Builder description, the instructions do not differ much from the steps required to create a simple template, and it is only required that in the Content part you select the Page Builder Description option:

1. Create a Content Block for the Header, screenshot .
2. Create your layout freely according to your needs, inserting all the common and essential elements to all products (ex: the Product Gallery, the Heading, the Price, and Add to Cart), screenshot .
3. In each product create your content section with the Page Builder in order to characterize the description of each product, screenshot .
4. Navigate to Theme Options → Product → Header and connect your Header Content Block, screenshot .
5. Select the Theme Options → Product → Content Type → Page Builder Description to display the specific description of each product created with the Page Builder, screenshot .

Product Content Block with the Frontend Editor

Please note that if you use the Frontend Editor, the first product on creation date, in your products list, is used by the editor for the Content Block preview, screenshot .

Wireframes Plugin

In the Wireframes Plugin, we have already included all the custom Single Product design you see in the Uncode demo. They are presented into a single wireframe that if needed, you can split into different Content Blocks. You can find all Single Product wireframes in the Single Product section, screenshot .

Uncode Do Action (for developers)

For those who want to modify the Single Product Page with customs code further or use plugins that need the implementation of a specific hook (for which template editing may be required), we have included a handy module: the Uncode Do Action module.

With the Uncode Do Action module you can launch hooks at specific points during the page execution.

Please note that this module has no visual impact, but it is used to launch PHP functions. No special characters but underscores are allowed. This is a simple example of use, screenshot :

add_action( 'your_hook', 'your_appended_function' ) ;
function your_appended_function(){
   echo 'something';
}