How To Edit Woocommerce Shop Page (With Elementor) 2024 Step by Step

How to edit WooCommerce shop pages using Elementor, quick and easy

Hey guys, welcome back. In this video, I'll be showing you how you can edit your Root commerce pages using Elementor

So let's get into it. Now, the first thing you have to do is head on over to your WordPress dashboard

and once you open up your WordPress dashboard, we're going to install our plugins

So obviously, you're going to go into plugins on your bottom left and click on Add New

And once you do that, we're just going to enter your plugins. going to enter and search for VooCommerce and we're going to download VooCommerce and

activated so it's just going to take a couple of seconds for the installation to be completed

so I'm just going to wait for this and once VooCommerce has been installed I can go on ahead

and activate the VooCommerce plugin so we're just waiting for the plugin to be activated

now once WooCommerce has been activated I'm going to go back into my add new plugins and over here

we're going to install elementor now you do need to create an account on elementor but for that you

don't need any verification all you need is your email and your password that's all you need to create

an account on elementor now that we have added both of our plugins over here we can get started

with editing our pages now the first thing we're going to do is actually take a look at what pages

we do have currently currently i don't have any pages on my site this is just a sample website this is

just the default template so we can go on to VooCommerce over here and once you go on to

VooCommerce you can get started with optimizing your content and actually you know

previewing your store taking a look at your actual products that you're adding so you can go

into your VooCommerce section and you can start adding your pages you will be able to see

what type of website you have and make sure you're allowing VooComers to make these changes so you can

go into your general settings and make sure that all of the basic settings have been turned on Now I going to go into VooCommerce and we going to add the pages So the first thing I going to do is I going to go into VooCommerce then click on our

extensions. So I haven't added any basic extensions, but I'm going to go ahead and use a template to

get started. So we're going to click on over here. Let's say I'm going to click on template over

here or just a basic page and WooCommerce pages can include anything from your

checkout page your product page your product display category page whatever it might be

so it might be any page whatsoever and I'm just going to save a couple of pages

so you guys can see what a basic page and a WooCommerce page is going to look like how

they are pretty different so this is just a sample page that we've created without any

customization and now we can actually enable VooCommerce to create its pages so now I'm in Voo

commerce and I can go into this status section of VooCommerce then I'm going to go into

tools over here and over here in your tools you're going to have multiple different

tools but the one that we're looking for is creating our default pages so this is the one

that you're looking for you're going to click on create pages to create your default

to WooCommerce pages that you can begin editing with Elementor. So now once we have actually created those pages, I'm just going to take a look whether

or not these pages have been created in our pages section. You will see these have now been created

So this is like my My Account, Checkout, Card, Refund and Returns, Shop page. Now what you're going to

do is click on edit on any of these pages. The shop page is created by Booth Commerce. And once you

click on edit all you have to do is click on edit with elementor on the top you're going to click on

edit with elementor and just like that you can start editing with elementor now currently our pages are not completed so it just loading up our actual page is not going to connect right now But you can click on edit with Elementor to actually begin editing your e page

But I'm just going to take a look at the page first off to see whether or not the products have been added

So now our page is working now you can click on customize once you open a page as well and this will open up the page editor and you will see

some of your options so you have your product catalog how it's going to be laid out you have product

images as well as other tools then you will also have your particularly root commerce integrations

then you also have your page integrations your how you want this to be laid out so if you want

this a narrow layout a default layout whichever one you want and then you can click on publish on

the top right and then go back into your WordPress dashboard now if i go i go

ahead and open up our store just by clicking on the top left you can see you will

have your store over here and you can go on ahead and start adding your items

within your store as well now if I go into our individual pages section it's

usually the best to just open an item and click on edit with Elementor on any

page that you have any WordPress VooCommerce page and you can go on ahead and add it

now if you are facing this issue it's very likely that you might have a bug or something and you might not have logged on to your elementor account so you can just go into elementor directly

and once you go into elementor simply log on to your elementor account that you are using to get connected with wordpress and you can get started with

editing of WooCommerce pages with Elementor as well. Keep in mind is you can see over here

this is our page so I can just click on this and I can get started with editing it as well

and keep in mind that whenever you are editing these pages that these pages can easily be edited with Elementor however if you do upgrade to a more premium plan on Elementor you going to be able to make a lot more

customizable changes to your page so if you open any page up with Elementor you're going to find

on the left panel so you guys can see this is another Whocommerce page that we have loaded up

and in this who commerce page you're going to find your basic stuff that you can add

But below that, you will have some pro features. And in your pro features, you're going to have your stripe buttons, video playlist, templates

as well as some other tools, which you can find in your VooCommerce section within Elementor

So you're going to find this at the bottom, if you close up some of the top ones

You're going to find a separate section titled WooCommerce, and these are features that are directly integrated within Elementor that are specifically made for WooCommerce

So you can add your product. product categories, do commerce pages, custom ad to card buttons, product displays, product

meta, descriptions, and more. However, for this, you do need to upgrade to a premium plan

on Elementor. Now, even so, even if you don't upgrade, there are still some amazing changes that

you can make with Elementor, such as their basic drag and drop features, spacers, dividers, buttons

All of those things are not as easily accessible when you're using the WordPress editor. It can be a bit

limiting so you can go into any section that you want to edit let's say I want to build something

different so let's say I want to add maybe image carousel I can add this over here wherever you want

to add it I can just add it at the bottom and then over here I can upload my images this might be

great for building displays for new collections that you're promoting so on and so forth so I hope you

guys found this video helpful and you're now able to get started with Elementor and editing

your Root commerce pages in WordPress using Elementor. Make sure to leave a like and subscribe to

our YouTube channel and I will catch you guys in the next video