Learn how to visually customize your WooCommerce product page templates using Elementor.
In order for your ecommerce store to stand out and truly create a unique experience for your customers, you need to be able to customize your product page. On top of that, the ability to visually customize your product page is critical to maintaining a unique style throughout your online store.
So you want to customize your WooCommerce product pages? Well you're in luck!
Elementor makes it much easier to visually drag and drop different elements from single product pages, customizing the layout however you like.
In the past, these types of WooCommerce design tutorials involved dozens of lines of code.
Fortunately, those days are over, thanks to Elementor WooCommerce Builder.
Now, you gain full control over your layout and product page layout with the power of Elementor Pro. No need to incorporate actions or hooks, or dig into different PHP files. Every design customization is done in the interface, directly from the Elementorpage builder.
WooCommerce Product Template
The WooCommerce base product page looks like this:
With Elementor, you can play around with the product page template design however you like. In this guide, you will learn how to create this product page layout:
Because you will be using Elementor's single product template, once you finish creating the template, you will be able to apply it across all of your products, as well as for specific categories or other conditions.
Initial setup
In this tutorial the focus is on customizing the product page so we will skip the basic WooCommerce setup and how to add new products. Kinsta has a great tutorial on the matter if you need help with that.
After setup, you must have WooCommerce installed and some related products added to your site.
You must also have Elementor and Elementor Pro installed to get the visual design capabilities.
Note! If you don't have WooCommerce enabled, you won't be able to access Elementor's product templates.
Step 1: create the unique product template
To start designing the single product template in Elementor, we will follow a similar procedure as creating the normal single template.
Step 2: choose a pre-designed product page template or create one from scratch
The easiest way to get started is to use one of the pre-designed product page templates and customize it to fit your site. There are several different styles of product pages to choose from.
Before you start adding widgets, you can make sure you're working on a full-width product page, switching to a full-width template (learn how to do this here).
With Elementor, you have full customization control over the layout and style of the product page.
The other option is to build it from scratch. In the edit panel, you can see the special widgets for the product.
Step 3: add the product widgets that will make up your page
Now is the time to create the elements that will make up your product page. For the full list of product widgets, see our documentation on the subject. For this tutorial, you will be using the following Elementor widgets and no other plugins:
- Product title widget
- Woo Breadcrumbs widget
- Product image widget
- Product rating widget
- Short description widget
- Product price widget
- Add to cart widget
- Product meta widget
- Product data tabs
- Related product
- Upsell widget
As you can see in the video, you have complete freedom to play with the layout and move elements.
You can use any other widget to make your product page more effective and attractive. Share buttons, call-to-action widgets, featured image, drop-down menus… You can even add custom fields to the template using the dynamic content feature.
Step 4: Preview the product page with another product
To ensure your product template has the correct layout, it is recommended that you preview it with several different products.
Click the eye icon in the lower left panel, then Settings. Under Preview Settings, choose the specific product you want to display. Now apply and check to see how it looks.
Step 5: set the conditions
This is the stage where you set the conditions that determine where your product template will appear. By default, the template will affect all product pages on your site. You can also select a specific category of products.
Click Publish, and your only product will be active!
Bonus: customize your product store page
To complete the task, design a product catalog page that will affect all products on the site or by category. So first, go back to Elementor> My Templates and create a product file template.
Then select an existing template or create one.
Add the Stock Products widget and File Title, and customize your layout.
To adapt it to the layout you already made in your single product template, use the copy style functionality that works between pages. Go back to the product page and right-click Copy. Back in the stock product, right-click Paste Style.
In the Stock Products settings, under Query> Sources, choose Latest Products. Then under Product Category choose rings. This way, only the category of the ring will appear.
Swipe over Pagination if you have a long list of products for the category.
In the style tab, you can design the distance between the columns and the rows. Adjust colors, fonts, and more.
Before publishing, choose the conditions to determine where the file will appear, just like you did for the single product template.
Hit publish and your archive page will be active.
Create imaginative WordPress product pages using the power of #Elementor
conclusion
Elementor's WooCommerce Builder gives you the design flexibility to visually create and adjust your product pages. This saves you time and greatly reduces the time it takes to go from an idea you have to a fully functional, live WooCommerce online store.
You will discover many other free WooCommerce templates at Envato Elements, which offers more than 2000 different templates, many of which are related to e-commerce sites. Also, there are numerous WooCommerce themes that you can check out like the ones we mentioned in our article.
