How to Create Custom Single Product Page in WooCommerce

Designed for small to large-sized online merchants using WordPress, WooCommerce has become the most popular e-commerce solution so far. You can easily create a store and sell any products there, from physical to digital ones. Customer data and sales reports are fully controlled right in your WordPress dashboard.

In terms of product page layout, since WooCommerce has to satisfy the demand of almost business types, it must provide a basic default one so everyone can use it. However, there might be times that you try to customize several product pages’ designs for specific needs.

A visual editor is not helpful in this case. WooCommerce uses one template file for all product pages. When styling an individual product page template, you will apply the changes to all pages.

So what should you do? To help you get started customizing a single product template more easily, we’ve put together a simple guide. Before digging into steps, let’s touch on some reasons for replacing the WooCommerce default product pages.

Why Is It Important to Create a Custom WooCommerce Product Page?

Compared to the built-in template, it’s better to create a more attractive layout for specific products in your WooCommerce store. These main reasons partly explain why:

  • Create an attractive visual store
    Not all your products are similar to each other so applying multiple layouts will keep your product pages more eye-catching and increase their value.It depends on your product types to provide a suitable design. For example, if you offer an online fashion store, the woman cloth product pages shouldn’t look the same as men’s. You can also add a video or more SEO friendly text there.
  • Stay competitive with your competitors
    Knowing how to differentiate your goods from competitors can shift their customers to your store. Besides quality, most customers prefer something visual as well. When comparing goods in 2 or 3 online stores, they won’t hesitate to make a purchase of those they fall in love at first sight. Once achieving this, you will become the game changer in your niche.

How to Edit Single Product Page Layout in WooCommerce

What does the default product page look like?

The basic WooCommerce product page includes 2 main columns: the product image on the left and the product name with a description on the right. Here is how it actually shows up.

ppwp-woocommerce-product-page-example

It’s possible for you to modify the product page template in many ways, such as including a shopping cart column on the right or displaying more than one product image on a page. Adding the product’s rating is a great option too.

ppwp-woocommerce-product-page-example-2

You’re able to manually edit single product pages in WooCommerce or use a third-party plugin to deal with it. While the sooner doesn’t require outside help, the later saves you from coding and technical issues.

However, for the first method, the challenge lies in code overwriting when you upgrade the WooCommerce plugin. Once the plugin is updated, all the code will disappear and the customization will be removed. You have to consider carefully before adopting this way.

It’s highly recommended to add a plugin specialized for individual product page template customization, Elementor WooCommerce Builder for instance.

Use Elementor WooCommerce Builder to style single product page

The plugin allows you to drag and drop multiple elements on your product pages as well as personalizing the page’s design and layout. There is no code or theme file edition needed.

WooCommerce Builder feature is available in Elementor Pro so you need to buy this plugin to use this function. Apart from editing a WooCommerce single product page template, the plugin enables you to build WordPress pages and add popup too.

Follow this guide to easily create your own product page template:

Step 1: Setup plugins

To customize the WooCommerce product page layout, you must have the WooCommerce plugin installed and activated in your WordPress site. Take these steps to install Elementor plugins and its Pro version:

  1. Download the Elementor and Elementor Pro plugins
  2. Head to the Plugins in your WordPress admin dashboard and click Add New
    add-new-plugin
  3. Click Upload Plugin and select the zip files you’ve just downloaded
    ppwp-upload-plugin
  4. Install and activate the plugins

Step 2: Create the single product page template

  1. Go to ElementorMy Templates and hit Add New. Then you will see a popup where you can select a template.
    ppwp-elementor-my-templates
  2. Choose Single Product in the dropdown list and name your template before clicking Create Template
    ppwp-elementor-choose-template-type
  3. Select an available predesigned template provided by the plugin (optional)
    ppwp-elementor-predesigned-product-template

Step 3: Add product elements

You should add product widgets such as product title, breadcrumbs, product image, product description, rating, or related products. There are other elements you should consider like upsells, product data, share buttons, and even additional information.

Step 4: Preview new product design

You can preview the new product page template with multiple products to make sure it’s applied in the right way.

Step 5: Display your single product layout

The new template will be set on all of your WooCommerce product pages by default. You need to select which product category this template can show up. After that, hit publish.

ppwp-elementor-set-template-display-condition

Password Protect Single WooCommerce Products

You’re enabled to protect single WooCommerce product pages as well as sections of a product with passwords. Since you’re using Elementor to build pages and create product pages, Password Protect WordPress Pro plugin would be a perfect addition.

The plugin is integrated and compatible with Elementor so you can protect your product pages while creating them with ease.

You can refer to the steps to install the plugin in the section above. Then,

  1. Visit the plugin Settings page
    ppwp-settings
  2. Choose Products in the Post Type Protection section and save your changes
    ppwp-password-protect-custom-post-type
  3. Go to All Products under Products section
    ppwp-woocommerce-all-products-section
  4. Click Password protect to secure your desired product
    ppwp-password-protect-product
  5. In the Password Protection management popup, auto-generate a password or add your own one
    ppwp-add-passwords

Your single product page becomes invisible to the public now. People have to enter the right password in order to access it and purchase the product.

Password protect products with Elementor

As mentioned, PPWP Pro is integrated with Elementor. In other words, you can add a password protected element to your product page while building or editing it. This private section can be the product’s additional information or any custom fields.

The guide below will show you how to cover private parts on your product page:

  1. In the product list, edit your desired product
  2. Click the Edit with Elementor button
    ppwp-edit-product-page-with-elementor
  3. Search for the Password Protection (PPWP) element under “Search Widget” field
  4. Drop it to the place where you want to display the protected area
  5. Set passwords for the private section
  6. Add content which will be covered by the password form
  7. Update the product page

Make use of customized WooCommerce product layout

Instead of using the default product template provided by WooCommerce, you can create a custom product layout to attract more customers and to surpass the competitors.

Elementor WooCommerce Builder turns out to be the easiest solution to style your single product page’s design. It saves you a lot of time and effort compared to adding code to the theme files.

You’re allowed to password protect single or parts of WooCommerce product pages. PPWP Pro works perfectly with Elementor to lock your products with one or multiple passwords. You can protect them right in the product edit screen. And you don’t have to worry about plugin conflicts either.

Install Elementor WooCommerce Builder and Password Protect WordPress Pro to style and protect your single product page now!

Leave a Reply

Your email address will not be published. Required fields are marked *