How to Customize Your WooCommerce Product Page Template Visually & Fonts.
Learn how to visually customize your WooCommerce product page templates using Elementor.
Do you want to customize your WooCommerce product pages?
You’re in luck!
Elementor makes it that much easier to visually drag & drop different elements of your product pages, customizing the design however way you like.
In the past, these sort of WooCommerce design tutorials involved dozens of lines of code.
Luckily, those days are over – thanks to Elementor WooCommerce Builder.
Now, you get full control over your product page design and layout with the power of Elementor Pro. No need to incorporate actions or hooks, or delve into the various PHP files. Every design customization is done right from the Elementor editor.
WooCommerce Product Template
The basic WooCommerce product page looks like this:
With Elementor, you can play around with the layout of the product page template however you like. In this guide, you will learn to create this product page design:
Because you’ll be using Elementor’s single product template, once you finish creating the template you’ll be able to apply it across 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’ll skip the basic WooCommerce setup and adding of product – but we do have a great tutorial on WooCommerce, if you need help with that.
After the setup, you should have WooCommerce installed, and a few products added to your site.
You should also have Elementor & Elementor Pro installed, in order to get the visual design capabilities.
Note! If you don’t have WooCommerce activated, you will not be able to access Elementor’s product templates.
Step 1: Create the Single Product Template
To start designing the single product template in Elementor, we will follow a similar procedure as creating the regular single template.
Step 2: Choose a Pre-Designed Product Page Template, or build 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 are working on a full width product page, by switching to a full-width template (learn how to do that here).
Using Elementor, you have total customization control over the layout and style of the product page.
The other option is to build it from scratch. In the editing panel, you can see the special widgets for the product.
Step 3: Add the Product Widgets that will make up your page
Note!It’s important to insert several example products, including their fields, so you will be able to preview them in the single product template.×Dismiss alert
Now, it’s time to build the elements that will make up your product page. For the full list of product widgets, head over to our documentation on the subject. For this tutorial, you will use the following widgets:
- 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
- Product related
- Upsells widget
As you can see in the video, you have complete freedom to play around with the layout and move elements around. You can use any other widget to make your product page more effective and engaging. Share buttons, call to action widgets, featured image… Even custom fields can be added to the template using the dynamic content feature.
Step 4: Preview the Product Page With Another Product
To make sure your product template has the right design, it is advised that you preview it with several different products.
Click on the eye icon on the bottom left panel, then settings. Under Preview Settings, choose the product you want to display. Now, apply and review to see how it looks like.
Step 5: Set the Conditions
This is the stage in which you set the conditions that determine where your product template will appear. By default, the template will affect all the product pages on your site. You can also select a specific category of products.
Click on Publish – and your single product is live!
Bonus: Customize Your Product Shop Page
To complete the task, design a catalog page of products that will affect all the products on the site or by a category. So first, go back to Elementor > My Templates, and create a product archive templates.
Then, select and existing template, or create one.
Add the Products widget and the Archive Title, and customize their design.
In order to adapt it to the design you already did on 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 product archive template, right-click Paste Style.
In the Products settings, Under Query > Sources, choose Latest Products. Then under Product Category, choose rings. This way, only the ring category will appear.
Slide on 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 the colors, fonts and more.
Before publishing, choose the conditions to determine where the archive will appear, same as you did for the single product template.
Hit publish, and your archive page is live.
