How to create a custom product page

In this article

  1. Create a new Block
  2. Enable the custom product page
  3. Configure the custom product page
  4. Shortcodes for custom product page layout (if you don't want to start from a blank block)
  5. Be creative :)

1

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' (from version 3.12)
  • Per single product: make a new empty block 'CPL Single - Design 1' (from version 3.12)
  • Location: Dashboard → Blocks → Add new

2

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 (from version 3.12)

  • 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 (from version 3.12)

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

3

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 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 you do not use the 'Product Hooks → woocommerce_single_product_summary' its important to add 'woocommerce_before_single_product_summary' and 'woocommerce_after_single_product_summary' manually with the 'Product Hooks' element. Some plugins attach functionality to these hooks.

4

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.