How To Make A Custom Product Page With Elementor (2024) Step by Step

How to make a custom product page with Elementor

Hey guys, welcome back. So today we'll be taking a look at how you can get started

with building your product pages on WordPress with Elementor. So let's get into it

Now the first thing you have to do is head on over to your WordPress dashboard

You want to click on plugins and then click on Add New. Once you click on Add New, you can click on Elementor

Now one thing to keep in mind is that the default product selection on

on Elementor is only available, so the default template is only available on the paid version of Elementor

So if you're using the free version of Elementor, you're not going to be able to use the default theme

However, you can still build your product pages with Elementor. So all you have to do is click on Install now

And once you have installed the particular plugin, which is Elementor website builder, you're going to click on Activate

Once you click on Activate, you can get started with Logging, into your Elementor account

So you do need a separate Elementor account. You can click on Skip over here

And you can continue with the Hello Theme or even skip. After that, you have to enter your site name

For us, this is Web. And then after that, we're going to skip

And then you can choose a blank canvas or you can browse from templates

Now, if you click on Browse from Templates, and this can be a great way for you to actually

see some other templates and see some other product designs, and easily be able to replicate

So if you click on the categories and select online store from the left side

you can take a look at the different templates that are available. All of these are available only on the pro version

However, they can be a good way for you to actually see visually what kind of website you should be looking to build

So once you have installed Elementor, you're going to click on Elementor over here

and you will see the Post types. Now, you want to enable this for posts, pages, and landing pages

And one thing to note is that you're not going to be able to have a direct checkout button

directly on your Elementor page. You're going to have a rerouting button that is going to actually lead to the checkout button

So this page would be a secondary product page, not the first primary product page

So after that, what you're going to do is that you can go on ahead and you can go into the

new section and you will have multiple different options now you will notice that we currently don have a product option over here the reason for this is we haven downloaded any Shopify or VooCommerce type of plugins

So if you want a default product section, then all you have to do is go into plugins

click on Add New and add VooCommerce, or any search engine that you're using

or any other kind of commerce booster that you're using. So for most people, they are using VooCommerce on WordPress

because it's pretty simple to get started with, and it does fulfill the needs of an online store

So VooCommerce is going to help you build your essential basic checkout points

and your basic point-of-sale system, and then you can edit that with Elementor

So we're going to activate VooCommerce as well, and it only takes a couple of seconds for these plugins to be downloaded

and for them to be activated. Now, after that, we have to set up our Voo-commerce store

I'm going to click on skip this guided setup because we don't really require a lot of details i can just continue on and directly go to my store

now as you guys can see vucommerce has been added now if i click on my pages section you will see you have a

card page a checkout page and then if you scroll down you have a sample page and your shop page

in your shop page you can click on edit over here and once you click on edit on your shop page

you can click on edit with elementor now this will enable you to edit your VooCommerce shop pages directly with Elementor

Now, they're currently having some issues. This might be just a simple little bug, but we're going to try again

If you find this issue, then you have to clear the cache on your browser and then retry as well

Now, this is just only to set up your shop page. After your shop page, you're actually supposed to build individual product pages, which is

the main focus of our video. So to do that, you can go into Add New on all pages

And if you already have a product added, you're going to title it accordingly

But let's say I don't have a product in mind and I just want to get started with building a product page, just like a structural page, which I can copy

So I would click on Edit with Elementor. Now, later on, I'm going to edit the name of the page, which is currently Elementor 29, and then edit this to actually reflect the name of A

individual product. Now after that on the left side of your screen you're gonna

find different layouts. So you have a layout container the width the minimum height

you can build containers then you also have additional options you have multiple different types of items that you can add you have basic items such as text images videos and more then if you scroll down you have the

pro features of elementor which i was previously talking about these features allow you to use a simple

button and to use these simple buttons and integrate your shop directly with elementor and you can

directly link elementor instead of building a third party or not a third party but a redirection link

link where people would first open up your elementor shop page or an elementor product page and after

your elementor product page they would be led to the actual checkout page by voommerce so if you take a look

at some of these site options you will actually find voommerce integrated so if you see over here you

have boo commerce and then you have archive products product archive descriptions product prices add to card

and you can directly add your VooCommerce products into your Elementor WordPress website

Now, the other way that you can do it, if you don't have access to paid subscriptions of WooCommerce or Elementor

you can go on ahead and just use a simple divider and use containers to segment and build pages

Now, to do this, you can click on the plus icon over here. You're going to choose a structure that you want

Let's say it's going to be this one. Once you have chosen a structure on one side, you want to add an image, which will be your product image

So you can click on Choose Image and go into your Media Library, or you can even insert from URL or select your own particular files

So let's say for us it's this file over here. This is like a painting that we're selling

Now I'm going to click on Select. Once I've added this on the second section over here, which is this particular section

Now I'm going to make this smaller. Now, this section I might want to make slightly larger, which is a VooCommerce thumbnail, or maybe not a thumbnail

I'm going to put this in full or extremely large, like this

So after I have chosen the placement like this, I'm going to go into the second container over here

And then in this container, I can add my heading, which might be abstract painting

Now, after I've added this, below that, I can add my price and my sell now button and a description

So what I'm going to do is I'm going to add a dual structure

And then first, I want to change the text as well, so I can select the text

And then I will go ahead and choose style on the top left And then I will choose a black color like this Now below that I can add my call to action which might be my buy now button so I going to

click on button over here and I'm going to place it over here. Now after that I will choose the

alignment which I wanted to be centered and then I will choose my size to be medium

After that, you can also choose your icon spacing, but I don't really want any icon spacing

And then after that, I want to choose the text, which is going to be buy now

Now, from here, what you're going to do is that the link that you're going to insert within this button

is going to be the particular link for the WooCommerce item. So the actual WooCommerce product page is going to be linked to this button

And then when people click on Buy Now, they would be led to the WooCommerce simple

product page that you have designed with WooCommerce or it could directly even be a checkout page

And then on the right side, I can go on ahead and drop some text and I can add some text over

here as well to further describe my product. Now, once you have completed your design, you can

click on publish on the bottom left. And once you click on publish, you can go back to your actual

site. So if we click on site, I will click on apply, click on update, and go to site. And go to site

We're going to click on exit over here. And now, once I've done this, I can go back into my WordPress dashboard

And then in your pages, you're going to scroll down. And you have the particular page name, which is probably going to be Elementor 29 or whatever Elementor page

And then you're going to click on Quick Edit over here. And you're going to change the title

Abstract Flower Painting. And then the slug is also going to be changed to your actual title description like this

Now, after that, you have your parent page. So the parent page for this is going to be the shop page

Keep in mind, you're supposed to add this as your parent page. And then you have your template, which we're going to keep the default one

And this is a published page. Now, if I click on update over here and go back into my site, you will see that in our particular shop page

in our particular shop page, we would be able to see the subpage of our product

So in this way, you can easily build your product pages with Elementor, even if you don't have the paid version of Elementor, you can still use it pretty efficiently for product building

I hope you guys found this video helpful if you did, make sure to leave a like and subscribe, and I will catch you guys in the next video