How To Edit and Customize All WooCommerce (2024) No Coding Needed Tutorial
Show More Show Less View Video Transcript
0:00
How to edit and customize all WooCommerce pages easily and for free, no coding needed tutorial
0:07
Hello everyone. Welcome back to another video. I hope you all are doing great and are having an amazing and absolutely incredible day
0:16
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
0:27
and you will not need to do any coding in it as well
0:32
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
0:38
WooCommerce account or, you know, a WordPress account. And once you have this WordPress account
0:44
you're going to want to get into the in-depth features of WordPress
0:49
you know, actual features that it provides you. What you are going to want to do is we're going to add a few
0:55
you know, there's different ways. to actually edit and customize pages. There's code
1:02
which is something that not a lot of people like, but you know
1:06
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
1:12
because, you know, code is pretty, it gives you a really good features to work with
1:18
so I'm going to talk really small about code. But yeah, code is the first way
1:23
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
1:38
we're going to be using a very famous add-on for ourselves so it's going to be really easy to work
1:43
with us so please do make sure to fully watch this video till the end to get the whole custom detail
1:48
of how things work so yeah to start things off first of all what we are going to be doing
1:53
is we're going to be using our basic, you could say, code lines
2:01
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
2:13
So if I come over here, web and design, okay, and over here, you know, you can create new posts in your store
2:22
And obviously, as you can see, I have these different snippets of codes over here that I can use to design my store
2:28
So basically what code allows you to do is you can make your page so much better
2:34
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
2:42
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
2:49
with the different types of styling. You can see the paddings in it. And you can see, you know, all this custom basic CSS
2:58
that they've added. So, you know, there's custom gap, VAR, paddings, and a whole lot more
3:04
So really simple and really fun stuff. Then there's different upside blocks as well, where you can
3:10
go margin left, margin right, margin width, margin block, start. Then there's background color
3:17
So in our case, obviously, it's a variable white, but you can change it to whatever you want
3:22
So, and look at that. Doesn't that look much better? So, you know, it depends on the type of
3:28
you know style you're going with and trust me if you know coding then please do use it
3:35
because coding helps you a lot so as you can see I've chosen the color then you can
3:41
choose the different tertiary background colors for yourself as well so let's say in
3:46
this case I'm gonna go with a bit of a dark blue yeah then there's border boxes
3:53
okay and that is to size your boxes in different ways anti-ease your boxes and
3:58
alias it then there's your font family okay uh let's say i'm gonna come here and change the font
4:06
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
4:18
So you can use code. You can use actual inspect elements to work with this
4:23
You can also change your font size. You can change your font family, which is pretty incredible as well
4:29
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
4:37
library of your WooCommerce and things should work pretty well. So yeah, basically these are the ways you can use code to work with
4:47
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
4:55
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
5:01
that you can edit and, uh, you know, customize all your pages. So basically
5:07
the other two free ways are going to be WordPress's very own editor and some external editor
5:14
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
5:23
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
5:30
Like free plugins can be added anytime. So in this case, we're going to go ahead
5:36
I'm going to go ahead in the search bar. We're going to write Elementor
5:40
And once you write Elementor, this is basically one of the most greatest and most amazing website builders out there
5:49
And it works the best, in my opinion, with WordPress and Google Commerce
5:55
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
6:06
customize their pages because it gives you the best features for the lowest prices and it's just
6:11
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
6:28
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
6:38
So really great, really simple. But yeah, this is obviously an add-on
6:43
Then obviously comes the very own editor that WordPress has. Okay, so let's say I'm going to come here
6:49
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
6:59
And we're going to work with that. So over here, you know, this is your WordPress editor
7:04
You can start editing things by clicking on the plus icon. And obviously you get a whole list of features over here
7:11
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
7:21
want to drag and drop things over here and once you know it's over here you can start adding
7:28
you know whatever you want to it's a classic editor click on save and it's going to add that line of
7:33
text over here and then just go ahead mess around with things as much as you want there's different
7:38
patterns for different kinds of things you know contact page there could be your account
7:43
page and a whole lot of other things. So basically this is the different ways on how you can edit and customize all your
7:49
WooCommerce pages. So I hope this tutorial was extremely helpful to you
7:54
And if you have any queries regarding this video, you can let me know down in the comments
8:00
And yeah, I guess I'll see you next time. Before signing off, please like and subscribe to the channel
8:07
And leave down a nice comment if you watch the video. And please don't forget to share the
8:13
this video with any of your friends in need or your family and I hope you all have a great day
8:19
so until next time I'll see you later and goodbye
#Business & Industrial
#Computers & Electronics
#Skins, Themes & Wallpapers
#Custom & Personalized Items

