As a domain owner, we want our e-commerce store to stand out, and to 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 customize your product page visually is paramount to keeping a single style throughout your online shop pages. So we find a way to customize our WooCommerce product pages. Lucky enough, Elementor makes it that much easier to visually drag & drop different elements of your single product pages, customizing the design however you like.
WooCommerce design tutorials involved dozens of lines of code. But now, Elementor for WooCommerce was made. Elementor WooCommerce Builder can get full control over your design and product page 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 on the front end, right from the Elementor Page builder.
But first, create an Elementor template. Click ‘Create New’ then select Single Product as the template you wish to create. After the setup, you should have WooCommerce installed, and a few related products added to your site.
Note: You must activate your WooCommerce first, or else you won’t be able to access Elementor’s product templates.
Step 1: Create Your Product Template
To start designing the single product template in Elementor, we will follow a similar procedure as creating a regular single template. Elementor WooCommerce Builder can design your single product and archive page templates.
How to create a Single Product Template:
- Under Templates > Theme Builder > Single Product > Add New, from the dropdown choose Single Product, give it a name, and click Create Template.
- Choose a Single Product Block and Insert. Alternatively, you can design your own.
- After you’ve finished designing, click Publish.
- Choose Condition.
Step 2: Choose a Pre-Made Product Page Template
Starting from scratch can always be an option if you don’t want to start with a pre-made design product page template. In the editing panel, you can see the special widgets for the product. But 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.
Using Elementor, you have total customization control over the layout and style of the product page. Another thing, the product image gallery should be considered.
Every WooCommerce product has a product image, or image gallery, showing pictures of the product to customers. Elementor has a built-in Product Images module that allows us to insert this in our template.
Step 3: Add Your Desired Product Widgets
After setting up your images and texts, you can now add widgets to make your website functional. The good thing about Elementor and WooCommerce addons and builders, you can add a product, cart page, and other widgets that will compliment your theme. For the full list of product widgets, head over to our documentation on the subject. Here are the lists of widgets that you would want to add on your page.
- 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
Of course, you can always remove or add more widgets on your page that are not on our lists. The most important thing to remember why we put widgets on our page is to make it effective and engaging. Share buttons, call to action widgets, featured image, drop-down menus and other buttons will help your visitors to reach you out.
Remember that every product needs to display some basic information like product descriptions and reviews if they are available. This is often handled by product tabs. Create a new row beneath the top section and drag the Product Data Tabs module from the Elementor builder into the row to insert it. There’s not much styling required here, because it is inheriting some styles from the Hello Elementor theme. However, let’s change the styling of the review submission button.
Step 4: Product Preview 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 specific product you want to display. Now, apply and review to see how it looks like.
Step 5: Set Your Page or Website’s Conditions
You are in the process of building a beautiful website for your business when the developer asks for your Terms and 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.
Here is some basic content that must be included in your Terms and Conditions:
- Limiting your liability – Disclaimer aimed at limiting your liability in cases where there are errors in your web content. You can also add language that limits your liability from their offensive postings.
- Copyright – Add copyright and trademark like “Copyright©2020. Your domain.com.”
- Set the governing law – Your Terms and Conditions should align with your area’s governing law.
Elementor’s WooCommerce Builder gives you the design flexibility to create and fine-tune your product pages visually. This saves you time and considerably reduces the time it takes to go from an idea you have to a live and fully-functional online WooCommerce store.
You will discover many other free WooCommerce templates in Envato Elements, offering over 2,000 different templates, many of which are related to e-commerce sites. Additionally, there are numerous WooCommerce themes that you can look at like the ones we mention in our article.