ProductX

  1. Home
  2. Docs
  3. ProductX
  4. ProductX WooCommerce Builder
  5. Product Header Template

Product Header Template

In order to create or customize a WordPress Product header template with the ProductX Gutenberg WooCommerce Builder, you need access to the ProductX  Builder. Using the builder you can build new headers for your WordPress website. 

Here’s how to do it: 

  • In order to edit header in WordPress with ProductX, you need to go to ProductX > WooCommerce Builder from your WordPress dashboard. 

    Note: Make sure to turn on the WooCommerce builder addon first before using the builder to create a header for your product pages.
Enabling the WooCommerce Builder Addon
Enabling the WooCommerce Builder Addon
  • Here you will find the Header option. If you don’t have any templates created, then you will have the option to Start from Scratch. 
  • If you click on “Start from Scratch” (“+”-icon), you will be taken to the Header Template page. You can add various ProductX blocks and the default WordPress blocks to create your WordPress header template

Note: This is true for the footer, 404 page, and all other pages you design for the first time using the ProductX WooCommerce builder. However, when you create a couple of templates, they will show up on the builder dashboard – under “All Templates”. Also, you can create a new template using the “Create Template” button.  

WooCommerce Builder Dashboard
WooCommerce Builder Dashboard
  • You will be prompted to choose the condition – where to show the header template (Do you want to show it on all pages, single Product pages, or your archive pages?) Based on your choice, you can show the header on any page you want. 
Create and Edit Header Template using the Header editor in the Builder
Create and Edit Header Template using the Header editor in the Builder

Note: When you are about to publish a page template for the first time, you will be prompted to choose a condition from the template page. Once you choose it, you will be able to publish the page. However, this will not apply to the Front Page and the 404 Page as these pages do not have any dependencies. 

Once you publish the header template, you will be able to see it on your desired page. Here’s how it looks on the front-end:

ProductX Header Front-end View
ProductX Header Front-end View

Read the Relevant Documentation

Was this article helpful to you? Yes No