How To Edit and Customize All WooCommerce (2024) No Coding Needed Tutorial

How to edit and customize all WooCommerce pages easily and for free, no coding needed tutorial

Hello everyone. Welcome back to another video. I hope you all are doing great and are having an amazing and absolutely incredible day

I bring you back with yet another video. And in this video, we are going to be talking about how you're going to edit and customize all of your basic WooCommerce pages in the easiest, most simplest way possible, all for free

and you will not need to do any coding in it as well

So it's going to be really easy. It's going to be really simple. And all you're going to want to do is you're going to have a fully set up

WooCommerce account or, you know, a WordPress account. And once you have this WordPress account

you're going to want to get into the in-depth features of WordPress

you know, actual features that it provides you. What you are going to want to do is we're going to add a few

you know, there's different ways. to actually edit and customize pages. There's code

which is something that not a lot of people like, but you know

we're still going to talk about it. Although this video is no coding needed, so I'm just going to talk really small about code

because, you know, code is pretty, it gives you a really good features to work with

so I'm going to talk really small about code. But yeah, code is the first way

The second way is to use WordPress's very, own drag and drop editor and the third way okay is using an external add-on or plug-in okay and in our case

we're going to be using a very famous add-on for ourselves so it's going to be really easy to work

with us so please do make sure to fully watch this video till the end to get the whole custom detail

of how things work so yeah to start things off first of all what we are going to be doing

is we're going to be using our basic, you could say, code lines

And to add different code lines you know you can either use some type of store customizer which supports CSS or you can add additional CSS through your store obviously through the whole store editor

So if I come over here, web and design, okay, and over here, you know, you can create new posts in your store

And obviously, as you can see, I have these different snippets of codes over here that I can use to design my store

So basically what code allows you to do is you can make your page so much better

And let me tell you what part of my pages are actually in code. So if I open up Inspect Element, you can see all these parts of my page that are in code

that work with different kinds of codes. You know, I'm going to keep scrolling down and we're going to get more and more of these things

with the different types of styling. You can see the paddings in it. And you can see, you know, all this custom basic CSS

that they've added. So, you know, there's custom gap, VAR, paddings, and a whole lot more

So really simple and really fun stuff. Then there's different upside blocks as well, where you can

go margin left, margin right, margin width, margin block, start. Then there's background color

So in our case, obviously, it's a variable white, but you can change it to whatever you want

So, and look at that. Doesn't that look much better? So, you know, it depends on the type of

you know style you're going with and trust me if you know coding then please do use it

because coding helps you a lot so as you can see I've chosen the color then you can

choose the different tertiary background colors for yourself as well so let's say in

this case I'm gonna go with a bit of a dark blue yeah then there's border boxes

okay and that is to size your boxes in different ways anti-ease your boxes and

alias it then there's your font family okay uh let's say i'm gonna come here and change the font

colors for myself let say i gonna go with uh you know a bit of a yellow shade a bit of a dark yellow preferably But yeah you get the general point of it

So you can use code. You can use actual inspect elements to work with this

You can also change your font size. You can change your font family, which is pretty incredible as well

So add whatever font family you want to add. Make sure that they're in the HTML library of your PC or maybe the HTML

library of your WooCommerce and things should work pretty well. So yeah, basically these are the ways you can use code to work with

And then once you've finally done this, make sure to save everything. And look at that. Our site looks much better now with different styles of color and all

I'm going to go back to my home now. Now once you're over here, basically, uh, let's try the other two ways that I told you

that you can edit and, uh, you know, customize all your pages. So basically

the other two free ways are going to be WordPress's very own editor and some external editor

So first of all, let's talk about some external editor. Okay. Now, if you have WooCommerce, then obviously your WordPress has the upgraded business plan

because without that, WooCommerce cannot be added. So I'm going to assume we already have that, and plugins are a piece of cake for you

Like free plugins can be added anytime. So in this case, we're going to go ahead

I'm going to go ahead in the search bar. We're going to write Elementor

And once you write Elementor, this is basically one of the most greatest and most amazing website builders out there

And it works the best, in my opinion, with WordPress and Google Commerce

And trust me, you are not going to regret using this. I would definitely 100% recommend all the users would actually use this to call

customize their pages because it gives you the best features for the lowest prices and it's just

really great to work with So really great really amazing stuff to get your head around And then moving on Elementor Flithora features obviously provides you with the whole society of you could say editables as well

So in our case, you can see it's a basic drag and draw builder. But obviously with this basic drag and draw builder, you get all these different types of features to work with

So really great, really simple. But yeah, this is obviously an add-on

Then obviously comes the very own editor that WordPress has. Okay, so let's say I'm going to come here

Once you're over here, you're going to go ahead and click on edit. Once you go ahead and click on edit, it's going to open up the website editor that WordPress has for itself

And we're going to work with that. So over here, you know, this is your WordPress editor

You can start editing things by clicking on the plus icon. And obviously you get a whole list of features over here

So, you know, paragraph heading list, code details pre formatted pull quote table verse classic so you can start just adding uh let's say i

want to drag and drop things over here and once you know it's over here you can start adding

you know whatever you want to it's a classic editor click on save and it's going to add that line of

text over here and then just go ahead mess around with things as much as you want there's different

patterns for different kinds of things you know contact page there could be your account

page and a whole lot of other things. So basically this is the different ways on how you can edit and customize all your

WooCommerce pages. So I hope this tutorial was extremely helpful to you

And if you have any queries regarding this video, you can let me know down in the comments

And yeah, I guess I'll see you next time. Before signing off, please like and subscribe to the channel

And leave down a nice comment if you watch the video. And please don't forget to share the

this video with any of your friends in need or your family and I hope you all have a great day

so until next time I'll see you later and goodbye