{"id":5321,"date":"2021-09-30T08:59:00","date_gmt":"2021-09-30T08:59:00","guid":{"rendered":"https:\/\/www.wpservices.com\/how-to-create-product-template-on-elementor\/"},"modified":"2022-05-31T20:53:17","modified_gmt":"2022-05-31T20:53:17","slug":"how-to-create-product-template-on-elementor","status":"publish","type":"post","link":"https:\/\/www.wpservices.com\/how-to-create-product-template-on-elementor\/","title":{"rendered":"How to Create Product Template on Elementor","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Elementor product template is the best thing that you can add to your eCommerce website. You can easily start with the Ecommerce website by installing WooCommerce. However, the product page in WooCommerce gives very little functionality. Also, the looks are all same which makes it a bit boring. Therefore, you can go with the alternative and use an Elementor product template. This guide will cover the exact way to build the best Elementor product template that you can use for all the products.<\/p>\n

Let\u2019s begin with the overview and then we will see the steps to do it.<\/p>\n

 <\/p>\n

Overview of Elementor product template<\/h2>\n

Elementor product template is the template that allows you to change the product page and add new things to the page. Here, we won\u2019t see how you can create an individual product page which is also known as a sales landing page. Instead, we will see how you can create an Elementor product template that can be used for every single product.<\/p>\n

So, the next time you publish a product, it automatically considers the new template. Whenever the user visits the product page, they will see a new product page that is of the new template. Therefore, you can surely use this technique here.<\/p>\n

It allows you to create a complete Elementor product template.<\/p>\n

The main thing that you need to keep in mind here is the name of the elements. Many elements can be added to the product page. If you know what are elements that you need to add and you know the name of them, you are halfway there. So, when you are reading this guide. Make sure that you remember the name.<\/p>\n

Also, you will need Elementor pro<\/a> if you want to create an Elementor product template. It can\u2019t be done from the free version of Elementor. So, if you are planning to create a template, you can upgrade to the pro version right now.<\/p>\n

Thereafter, we can directly start the guide and see how you can create a complete template.<\/p>\n

 <\/p>\n

Getting Things Ready<\/h3>\n

The first thing you need to do is the preparation before you start the steps. Here, we will just do the basic preparations.<\/p>\n

So, to begin with, you need to install the Elementor and WooCommerce plugin. You also need to install the Pro version of Elementor. It will give you a new plugin that is the Elementor pro plugin that you can install.<\/p>\n

Once you have installed it and activated it, you can begin the guide.<\/p>\n

 <\/p>\n

Create a Blank Template<\/h3>\n

We will first head over to Elementor and then click on the theme builder. The theme builder will allow you to create a page for the template.<\/p>\n

When you click on it, it will ask you which type of Elementor product template you want to create. You need to select \u201cSingle product<\/strong>\u201d here.<\/p>\n

In some older versions, you will have to do the same thing by going to Templates and then create the new Single product template from there. Either way, the steps are almost similar.<\/p>\n

When you are there, you need to select the Elementor layout you want. The default layout is recommended one and will work for most of the cases. So, you can keep the default layout and then carry on to the next part.<\/p>\n

We will now start creating a complete product page and see what are the things you need to add.<\/p>\n

\"Elementor<\/a><\/p>\n

Menu Cart<\/h3>\n

The majority of people will forget this thing. If you already have it in the theme, you don\u2019t need to worry about it.<\/p>\n

However, if you don\u2019t have it in the theme or you have created the many on your own using Elementor, you need to add the Menu cart.<\/p>\n

There will be a widget for the same. it will display the cart icon in the menu. Users can see their cart items from here.<\/p>\n

 <\/p>\n

Breadcrumbs<\/h2>\n

Once you do this, the first thing that users see is the breadcrumbs. This is nothing but the location of the product.<\/p>\n

Store > Shoes > Casual Shoes > Model123<\/strong><\/p>\n

This is how the breadcrumbs look. So, you can add the breadcrumbs as well on the web page. Once you add it, you can proceed to the actual product information.<\/p>\n

We will divide the product section into two parts. The first one is the one that people usually look for such as short description, price, ratings, etc. The next half will cover more details like the exact list of features, reviews, etc. Most people will just look at the first half and make the decision. So, you need to give proper attention to the first half of the product.<\/p>\n

Thereafter, you can do the second half of the Elementor product template too.<\/p>\n

\"\"<\/a><\/p>\n

Elementor Product Template First Half<\/h2>\n

The first Elementor product template will cover the spotlight things.<\/p>\n

At first, you need to add the title of the product. You can either add it in the full width or the preferred one will be in the right column where the left one is the product image.<\/p>\n

Here, we will create a section with two columns.<\/p>\n

In the first column, we just have the product images. Thereafter, on the right column, we have a bunch of product information that we will see here.<\/p>\n

You can add the title like we have mentioned retailer. Below the title, you can have the product rating. This will convince the users to buy the product. If there is a rating shown directly there, the users are more likely to buy from you. So, you can add the ratings there.<\/p>\n

Thereafter, you can add the price at the bottom. You can also add the short description there and then you can add the add to cart button.<\/p>\n

This is how most of the product pages look like. You can surely add the number of quantities left at the bottom. This will trigger scarcity.<\/p>\n

Here is the list of things that you need to add here. Also, these are the same names that you can find in the widget. So, you can look for the following widgets and then add them.<\/p>\n