WPBakery Extensions
As stated above, you can easily edit the single product template exactly in the same way as you edit your pages /posts with the page builder of your choice.
Few extensions have been added for WPBakery Page Builder ensuring maximum flexibility by editing product page layouts (in Elementor all this options are available out-of-the-box):
Column
In WPBakery page builder the columns have been extended with a flex container options – exactly in the same way, as it has been extended for the Header Builder. This means, that all WPBakery columns in TheGem’s single product builder have a special set of “Flex Options”, allowing you to align and position the content elements inside a row:
Layout
Flex Container: if activated, this checkbox applies the flex container on the column. By default this option is active – all elements added to this column will be aligned using flex approach.
Items direction: other than in the Header Builder, where by default all elements are placed inline, in the Single Product Builder by default all items are placed in a “Column” direction, i.e. under each other.
Vertical Align: this setting defines the vertical alignment of elements inside the column.
Horizontal Align: with this option you can apply flex alignments to all elements inside the column at once.
Elements
All single product specific content elements (like product title, product price etc.) have been extended with “Flex Options” for aligning and positioning inside the column. You can find this options here:
Hide Element: allows you to hide this elements on the chosen device
Horizontal Align: with this option you can apply horizontal flex alignment to the element. Please note: this alignment works inside the flex container so all flex alignment rules are applied here (contrary to simple text-align).
Vertical Align: specifies the vertical alignment of the element inside the column
Position absolute: activates the absolute positioning of the element inside the column; if activated, no flex alignment rules are applied to this element anymore.
Flex Padding: This setting controls paddings which apply to the flex container of the content element.
Flex Margin: This setting controls margins which apply to the flex container of the content element.
All flex options in all elements and columns inside the single product template can be separately set up for desktop, tablet and mobile. Also you can hide rows/sections, columns and elements on different devices. In this way you can create absolutely different product layouts for different devices.