Custom Product Layout

Category: How To / Features, Videos 2

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 layout and feature combines are possible using this new feature.

How to Enable Custom Product Layout Builder?

To enable Custom Product Layout Builder, you need to select “Custom” in Theme Options -> WooCommerce -> Single Product -> Product Layout.

You can build product layout by navigating Product Layouts -> Add New.

Create Custom Product using WPBakery Page Builder

You might need to enable product_layout post type in visual composer role manager.

Visual Composer Role Manager

You can now create new product layout using Visual Composer Backend / Frontend editor.

Product Layout Builder

Create Custom Product using Elementor

1. You need to enable product_layout post type in Elementor settings.

2. You can see the “Porto Single Product” widgets in the elements list. Please create a new product layout using these widgets.

What’s the next step?

After creating product layout, you need to select it in Theme Options -> WooCommerce -> Single Product -> Custom Product Layout.

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.

Share this post