Custom Product Layout
Porto 5.1 supports Custom Product Layout Builder which allows to build single product page layout using page builder elements.
Porto comes with tens of product page layout presets, but you can also build your own layout using Porto's product page builder. Any combination of layout and feature is possible using this new feature.
How to Create Custom Product
Please navigate Porto -> Templates Builder -> Single Product. You can create a new custom product layout here.
Product Layout Builder is fully compatible with 3 page builders: WPBakery, Elementor and Visual Composer and provides various customization options.
You might need to set roles to build product layout using page builders. For example, if you want to use WPBakery, please go to
WPBakery Page Builder > Role Manager
and make sure to check the following checkboxe under Content Types:
porto_builder
. After making the changes please click
Save Changes
button.
Following video describes how to create custom product layout and set display condition using Visual Composer.
Product Layout Builder Elements
As you can see, there are 13 elements for product page builder.
Product Title, Product Price, Upsells and Related Products elements have more powerful features than ones in default product layouts.
- Using Product Title and Product Price elements, you can customize typography fields easily for product title and price such as font size, font weight, color, etc.
- Upsells and Related Products elements
In the default product layouts, upsells and related products are displayed in only products slider view.
But if you using these elements, you can display products in any view such as grid, list, creative grid, etc.
Also you can customize more fields such as count, product type, columns, column spacing, orderby, order, product image size, etc.