The ProductX Page Builder Addon lets you create single product pages or product archive pages as per your needs. With ProductX, you can create a single product page template, use it across specific pages, and even set the conditions for use.
Here’re are the key things you should know when creating Single WooCommerce Product Pages with ProductX.
*** There’s a link to a Single Page Builder video tutorial at the very end. Make sure to check it out if you need more information.
Activating the ProductX ‘Builder’
The ProductX builder is a PRO feature of the ProductX plugin. Make sure to have a pro license to take advantage of the builder’s features. Visit the Pro License Activation Section to get a clear idea of how to activate ProductX PRO.
***Activating the builder addon is the same as activating any other addon in ProductX. Go to Addons> Toggle the Builder Addon Button to ‘ON’. Once done, under the ProductX Menu, you’ll see the Builder option.
Builder Navigation
You can start by creating a new template. To do so:
- Click on ‘Add New’.
- Write a name for your template under ‘Name of Your Template’ section.
- Select a Template Type from the ‘Select Template Type’ dropdown.
***Currently we have 3-templates available. 1. Single Product, 2. Product Archive, 3. Shop . You can create a template with any of these types.
- Now have to choose where to display your template. You can choose to show it on:
- All Single Product Pages
- Based on a Specific Product
- Based on a Specific Product Category (product_cat)
- Based on a Specific Product Tag (product_tag)
- Shop Archive Pages, Search Results, All Product Categories, All Product Tags (for the Product Archive Template)
- Once your done, click on ‘Create Template’. Once the template is created you will be prompted to ‘Save and Edit’ the template you created.
Now choose the template you want to edit. Just click on it and it will take you to the page editor.
Once you go to the Page Editor. Once you’re on the page editor:
- Click on the ‘+’ icon to add Single Page Product Blocks.
- Then click on ‘Browse All’.
- Scroll down to find the Single Product Blocks.
There are 13-Single Page Builder Blocks available. Let’s go through them one by one:
Product Title Block
What’s great about the ProductX Single Page Builder is that it can take your product title, image, descriptions and more directly from your WooCommerce Products. You don’t have to insert anything manually. For instance, with the product title block, you can:
- Choose your Product Title with ‘Preview Products’ dropdown.
- Change the ‘Tag (Heading Type)’, alignment, color and typography of the Product Title.
Product Description and Short Description
These are two different blocks.
The Product Short Description Block lets you add a short description of the Product you choose from the ‘Preview’ section. You can also change:
- the typography
- text alignment
- text color.
For the Product Description Block, you pretty much have all the same options. Here, apart from the typography and text colors, you can also change:
- Heading Spacing
- Description alignment
- Heading text
Product Stock
You can set the availability of your product using this block. You can:
- Change the product stock status (‘Preview’) from the dropdown (In Stock, Back Order, Out of Stock).
- Change the text alignment, and typograpghy.
- Change the label texts, and corresponding colors.
Product Price
You can choose to show the product price just the way you want. Using this block, you can:
- Select the product of which you want to show the pricing from the ‘Preview’ dropdown.
- Show/Hide the Pricing Label, and Product Badge.
- Change the label text and its design properties.
- Change the Discount Badge design properties.
- Change the text typography, coloring, and spacing of each setting.
Product Review (Rating)
With this block:
- Show your desired product review rating.
- Enable/Disable order and Label/Order Label.
- Change the Label typography, color and hover color.
- Change the rating star size.
- Change Custom Order Label and design properties.
- Change Review text and typography.
Product Meta Description
You can choose to display relevant product meta descriptions using this builder block. You can:
- Show how the Meta Description is displayed (Meta Display)
- Enable/Disable SKU, Category, Tag, Label etc.
- Change their associated design properties.
- Change the label spacing.
- Change their respective typography and colors.
Product Add to Cart
You can go extremely granular with the ‘Add to cart’ builder block. You can make the following changes:
- Change the alignment and ‘Add to cart’ text.
- Change the Quantity position.
- Change the Icon size, color, background, and hover background colors.
- Change the border and padding settings.
Also, you can change the Button Styling as well. You can change the border, background, typography, and more for this setting.
Additional Product Information (Product Additional Info)
You can choose to show/hide the heading text for the product description. Furthermore, you can change the label and their values design properties as well. You can change the Heading text and the heading spacing as well.
Furthermore, you can even change the table padding.
Product Breadcrumb
There’s a dedicated product breadcrumb block where you can change the alignment of the text, link color, hover color, and typography. Furthermore, you can change:
- The text spacing.
- The Separator color and sizing(using the size slider).
Product Image
You can do a lot with the product image block in the single page builder. First of all, you can choose to show various options for the product image. You can toggle to show/hide them. Also, you can chose to show the image view either by hovering or clicking.
Then there are the image arrow styles. You have the large image arrows and the image gallery arrows. You can expect excellent level of detail when changing the settings of these arrows. From the arrow color, background, and padding, almost every design property is changeable.
Then there’s the image gallery setting where you can showcase different images of your products. You can choose the position of the image gallery as well as the column gap and the spacing in between.
Furthermore, you can choose to show whether the product is on sale or not. Text settings including typography, background, padding, border are all changeable.
Finally, you can change the lightbox zoom setting as well, changing the icon size and its color properties.
Product Tab
Under the product tab builder block, you have several options:
- You can choose to show/hide description, additional information, and the review. All of these settings have different color, border, typograpghy settings and more.
- You can change the review style, form label, respective spacing and input radius. Again, all of these options will have color, background, typography and other settings.
- Furthermore, there are the ‘button style’ and ‘hover settings’. You have access to their seperate design properties as well.
Archive Title
Under the archive title, you have settings like:
- Showing Image, Prefix, Title, and Excerpt.
- Change properties of each of the respective settings.
*** The archive title has specific use cases.
Here’s a short preview of a simple single product page:
How to change the block Sequence
You can change the single page builder block sequence from the builder page. The top left up-down toggle arrow will help with that:
*** You can also change the Page Conditions from the top right of the Builder Editor Page. There you can find a tab labelled Conditions. You can change the page conditions from there.
If you want to learn more about the page builder, you can look at the following video tutorial below: