Anastasiia Mykytiuk
Updated on

How To Build Single Product Page With JetWooBuilder Plugin for Elementor

Good news for all WooCommerce owners who use Elementor! You have probably experienced some troubles with customizing your product page. Besides changing lines of PHP and JavaScript, you have to keep up with the latest WooCommerce updates, as you can easily ruin the design and the performance of the site.

Fortunately, with a brand new JetWooBuilder plugin, you can make all the changes quickly and easily in no time flat.

In this tutorial, we will take you through the entire customization process step by step.

Creating New Single Product Page Template

  1. So, let’s get closer to the business. Crocoblock subscription includes the functionality for customizing your product page via Elementor. Once you have JetWooBuilder plugin installed, all products added and all prices set, go to your WordPress Dashboard and click WooCommerce tab > Jet Woo Templates.
  1. Click Add New Template on the top. Give it a name, then select the Sample Product for Editing and hit Save.

    Click Edit With Elementor button.

  2. Here we will create a layout for every single product page used on the site.

Designing the Single Product Page

  1. If you have a .psd file with the design of the product page, please, open it. In this tutorial, we will use the sample shown below.

    Note, that all the information about the product is taken from the Single Product admin page automatically. In other words, you only need to move modules to the sections and change the styles the content downloads automatically.

  2. As you can see, the page has two columns: one with the image and thumbnail gallery. The second column provides all the information about the product.
    Locate Single Images module in the left sidebar under the JetWooBuilder section and drag it to the column. Here you can specify the width, paddings, border, and other parameters of the image.


  3. Now let’s move to the content section. Find Single Sale Badge and drag it to the column. Specify the font-size, color, background, etc.
  4. Do the same for the title and SKU.
  5. Single Rating module adds star rating and reviews count. Here you also can change the styles of the elements and make them match with the corporate style of your business.
  6. Single Excerpt and Single Price modules display the main information about the product.
  7. Use Single Add to Cart module to display the quantity input and Add to Cart button. It will automatically add the new fields and dropdowns in accordance with the product data type.
  8. Single Tabs module is used to display additional information, description and reviews of the product.

Using the Template

Now the page is complete but if you navigate to the single product page on the front end, you can see that the layout remains the same. To change this we need to add the template to every single product on the site.

There are two ways to do that.

  1. If you want to use a particular template for all products, you can set the template globally and the layout will be changed automatically. Navigate to WooCommerce tab in the left sidebar and click Settings. In the new window find Jet Woo Builder tab. In the Single Product Template dropbox pick a template you want to use and check Enable Custom Single Product Page option. Hit Save Changes and you can see the product page on the frontend.
  2. There is also an option if you like to use a different template for a particular product. Go to the admin panel of a product you need to change and find Jet Woo Builder Template Settings box in the right sidebar. Choose the template in the Custom Template field and save the changes.

    Now you can create custom templates for your products on the fly without digging into the code. Take your time, create cool single page designs and use them on your page.

Follow us to learn more about Elementor and new features!