1. Home
  2. Docs
  3. ProductX
  4. Add-Ons
  5. Product Page Builder Addon

Product Page Builder Addon

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:

ProductX Builder Addon
ProductX Builder Addon
  • Click on ‘Add New’.
  • Write a name for your template under ‘Name of Your Template’ section.
Builder_Addon_Menu
Builder Addon Menu
  • Select a Template Type from the ‘Select Template Type’ dropdown.
New Template Creation
New Template Creation

***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:

Accessing Single Page Builder Blocks
Accessing Single Page Builder Blocks
  • 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:

Product Title Block
Product Title Block
  • 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:

Short Description
Short Description
  • 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:

Product Description
Product Description
  • Heading Spacing
  • Description alignment
  • Heading text

Product Stock

You can set the availability of your product using this block. You can:

Product Stock Block
Product Stock Block
  • 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:

Product Pricing
Product Pricing
  • 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.
Product Rating
Product Rating
  • Change the Label typography, color and hover color.
  • Change the rating star size.
  • Change Custom Order Label and design properties.
Other Rating Settings
Other Rating Settings
  • Change Review text and typography.

Product Meta Description

You can choose to display relevant product meta descriptions using this builder block. You can:

Product Meta
Product Meta
  • 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:

Product Add to Cart Block
Product Add to Cart Block
  • 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.
Product Add to Cart Button Style
Product Add to Cart Button Style

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.

Product Additional Information
Product Additional Information

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:

Product Breadcrumb
Product Breadcrumb
  • 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.

Product Image Block
Product Image Block

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.

Image Block Arrow Settings
Image Block Arrow Settings

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.

Image Block Gallery Arrow Settings
Image Block Gallery Arrow Settings

Furthermore, you can choose to show whether the product is on sale or not. Text settings including typography, background, padding, border are all changeable.

Image Sales Section
Image Sales Section

Finally, you can change the lightbox zoom setting as well, changing the icon size and its color properties.

Lightbox section
Lightbox section

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.
Product Tab
Product Tab
  • 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.
Review Section
Review Section
  • Furthermore, there are the ‘button style’ and ‘hover settings’. You have access to their seperate design properties as well.
Other Settings
Other Settings

Archive Title

Under the archive title, you have settings like:

  • Showing Image, Prefix, Title, and Excerpt.
  • Change properties of each of the respective settings.
Archive Title Block
Archive Title Block

*** The archive title has specific use cases.

Here’s a short preview of a simple single product page:

Short Demo
Short Demo
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:

Changing Block Sequence
Changing Block Sequence

*** 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:

Was this article helpful to you? Yes No