With WooCommerce plugin, you can easily create a store and sell everything, from physical to digital products. You can then check customer data and sales reports directly in your WordPress dashboard.
As for the product page layout, since WooCommerce has to meet the requirements of almost all store types, it has to provide a basic default layout so that everyone can use it. If you want to customize things, you’ll need to edit the multiple product page designs for your own store.
But WooCommerce uses one template file for all product pages. This means that if you design a single product page template, the changes will be applied to all of your pages. So what should you do? Let’s look at how you can create a custom single product page in WooCommerce.
How to edit the layout of a single product page in WooCommerce
The default WooCommerce product page contains 2 main columns: the product image on the left and the product name with a description on the right. Here you can see what the page actually looks like.
You can change the product page template in various ways, such as adding a shopping cart column on the right-hand side or displaying more than one product image on a page. Adding the product rating is also a good option.
You can edit the individual product pages in WooCommerce manually or use a third-party plugin. While you don’t need any external help with the first option, the second option saves you programming effort and technical problems.
However, the problem with the first method is that the code is overwritten when you update the WooCommerce plugin. As soon as the plugin is updated, the entire code disappears and the customizations are removed.
For this reason, it is highly recommended to add a plugin that specializes in customizing product page templates, such as Elementor WooCommerce Builder.
How to create a custom single product page in WooCommerce
With the WooCommerce Builder plugin, you can drag and drop multiple elements onto your product pages and customize the design and layout of the page. No code or theme file is required.
The WooCommerce Builder feature is available in Elementor Pro, so you will need to purchase this plugin to use this feature. In addition to editing a WooCommerce template for a single product page, the plugin also allows you to create WordPress pages and add popups.
Follow this guide to create your own product page template (after you’ve installed both WooCommerce and Elementor Pro plugins, of course):
Step 1: Create the template for the individual product page
Go to Elementor → My templates and click on Add new. A pop-up window will then appear where you can select a template.
Select Single product in the drop-down list and name your template before clicking Create template.
Select a ready-made template provided by the plugin (optional).
Step 2: Add product elements
You can now add product widgets, such as product title, breadcrumbs, product image, product description, review or related products. There are also other elements you may want to consider like upsells, product data, share buttons and even additional information.
Step 3: Preview the new product design
You should now be able to preview the new product page template with multiple products to make sure it is applied correctly. This will also help you in customize the layout if the design is not to your liking.
Step 4: View your individual product layout
The new template will be displayed on all your WooCommerce product pages by default – you can select which product category this template should be displayed. Then, click on Publish.
Password protection for individual WooCommerce products
You can also password protect individual WooCommerce product pages and sections of a product. To do this, you’ll need to use the Password Protect WordPress (PPWP) Pro plugin.
The PPWP plugin is integrated and compatible with Elementor, so you can protect your product pages while creating them.
Once the plugin is installed, visit the plugin settings page and select products in the Post Type Protection section. Then, save your changes.
Next, go to All products in the Products section.
Now click on Password protection to protect your chosen product.
In the pop-up window for managing password protection, you can have a password generated automatically, or add your own password.
Your individual product page will now be invisible to the public. Visitors will need to enter the correct password to access and purchase the product.
Password protection for products with Elementor
As mentioned earlier, PPWP Pro is well-integrated with Elementor. You can add a password-protected element to your product page while creating or editing it, and this private area can be the product’s additional information or any custom fields.
Here’s how to cover private areas on your product page:
Find your desired product in the product list. Then, click on the Edit with Elementor button.
Next, search for the Password Protection (PPWP) element under the “Search widget” field.
Drag and drop it in the place where you want to display the protected area. You can set your chosen passwords to protect the private area here too.
Now you can add content that you want to hide under the password form, and update the product page.
Conclusion
The Elementor WooCommerce Builder is the best solution for designing single product pages. It can help to save a lot of time and effort compared to adding code to the theme files.
You can also choose to password protect individual or parts of WooCommerce product pages with PPWP Pro. This works perfectly with Elementor to protect your products with one or more passwords. You can protect them directly on the product edit screen, and you don’t have to worry about plugin conflicts either.
