How to create a custom product page

Create a new Block

Blocks can be titled anything, but we'll use the next once as an example and prefix them with CPL (custom product layout).

  • Globally: make a new empty block 'CPL - Global'
  • Per category: make a new empty block 'CPL Category - Clothing'
  • Per single product: make a new empty block 'CPL Single - Design 1'
  • Location: Dashboard → Blocks → Add new

Enable the custom product page (globally, per category, or per single product)

→ Globally

  • Enable 'Custom' in the Product page layout options and select the block you just created for the purpose of the custom product page layout. 
  • Save and exit the settings.
  • Location: Theme Options → Shop → Product Page

→ Per category

  • Navigate to the category edit screen to select the custom layout

Primary category priority integration is available with both YOAST and Rank Math when enabled.

→ Per single product

  • Navigate to a single product edit screen to select the custom layout

Configure the custom product page

  • After you have exited the settings panel from the previous step, navigate to an existing product page in the frontend that you have set up earlier. To get the best experience it's recommended to take a product that you have set up completely, like some pictures, short description, etc. That way you can more easily visualize the page section you will create.
  • Edit the page by using the "Edit product layout with UX Builder" link in the admin bar

Edit links explained:

Edit mode

When the UX builder is opened you will now have Product Page elements available in the left side panel in the section 'Product Page'.
Starting out with a 'Gap' and a 'Row' is a good way to start building the page.

Product Page elements (left panel) Small Page hierarchy sample (UX builder)

In case a plugin adds content/functionality onto one or more of the 'woocommerce_...' hooks it is important to add them manually with the 'Product Hooks' element, you have to add it to the page to see the content or functionality. To keep all elements individual on the page with plugins adding such functionality custom re-hooking might be necessary. 

flatsome_custom_single_product_x

Are premade (empty) hooks to hook custom content on in case necessary

Shortcodes for custom product page layout

Here is the link of shortcodes for custom product layouts:  http://docs.uxthemes.com/article/247-custom-product-page-layout-shortcodes

Just copy your desired shortcode in the product page block and start customizing the layout on the fly.

Related Articles