Up next in 10
How To Customize Your Woocommerce Account Page With Elementor
442 views
Apr 17, 2024
"Transform your WooCommerce store with this comprehensive tutorial on customizing your account page using Elementor. Learn how to seamlessly integrate Elementor's powerful page builder features with your WooCommerce platform to create a personalized and user-friendly account page for your customers. From designing sleek layouts to adding custom widgets and elements, discover step-by-step instructions to elevate the functionality and aesthetics of your online store. Empower your brand and enhance the user experience with a tailor-made account page that reflects your unique identity and meets your customers' needs."
View Video Transcript
0:00
How to customize your WooCommerce account page with Elementor
0:05
Hey guys, welcome back to the YouTube channel. In this video, we will be taking a look at how you can change your basic
0:13
WooCommerce account page that your customers get into a more interactive and more customized appearance using Elementor
0:21
So let's get into it. Now, this is like a account page
0:25
This is like a sample account page that has been created automatically by VooComers
0:29
by WooCommerce for my WordPress website. It's rather bland and it might not fit with the overall
0:35
aesthetic or theme that I'm going for for my store or business. And you can really edit this
0:41
directly on the WordPress website editor, but that can be a little boring for most people. So
0:48
to make it more interactive and to make it more interesting, you can edit it and change it as well
0:55
So to do that, you have to first off download Elementor if you don't have it already
1:01
To do that, you can just go into plugins on the left side of your screen, click on Add New
1:08
and then you will simply search for Elementor. Now, Elementor is nothing, you know, to be intimidated by
1:15
You just have to install it and activate it. It's a very basic website builder
1:21
It allows you to create a good, gorgeous website with, you know
1:25
a drag-and-drop editor that is simple to use you don't have to learn how to code you don't have to
1:32
learn complicated ways to build websites you can use a simple drag and drop that can be really
1:38
helpful for a lot of people so i'm just connecting with my elemental account over here i have
1:44
previously created an elemental account so i'm just logging in if you have not created a uh
1:52
you know elemental account previously you don't have you actually you know worry about that You can create a Elemental account easily with your email address That all you need and you just register it not a paid application Elementor is free to use for anyone So once you
2:10
have installed the application you want to go back into your you know onto your WordPress website dashboard
2:17
and you will be able to see Elementor over here. So what are the post types what it can do? Now you might
2:23
be wondering hey when I opened that Elementor it showed you know it was creating a new page
2:27
a new page with Elementor, I want to edit my VooCommerce account page that my customers are going to see
2:35
Well, don't worry. To access those pages with Elementor, simply click on pages over here on your WordPress dashboard on the left side
2:44
Then you will be able to name, you know, see the page that you have. So you have your My Account page
2:50
Now, you have editing options with each specific page. It says edit with Elementor
2:56
your checkout page, your basic pages. So you can click on edit over here
3:01
And this will open up the page. And once you do that, you can click on Edit with Elementor
3:07
to move to the Elementor website editor instead of editing with the basic one
3:12
So just to recap, if it doesn't show Edit with Elementor directly
3:17
you just have your My Account page like this. You're going to click on Edit. And once you click on Edit, you will click on Edit with Elementor
3:25
And in this way you can open any kind of VooCommerce page with Elementor
3:29
So now you guys can see I have a simple little drag and drop. It says my account
3:34
Maybe below that I want to enter, you know, sections or something
3:38
So I'm going to take a look at the different options I have
3:42
So let's say I want to bring VooCommerce integrations. I can also do that
3:47
But to integrate VueComus integrations into Elementor, you do have to upgrade to the pro version of Elementor
3:53
But let say I want to add some general images first up in my account section So let say I have a progress bar And then I want to add the title of buy now save more i can go on ahead and change that and this will provide information and the
4:14
percentage would be added you can hide the percentage if you want and you can add the in the text
4:22
so you can add anything like this you can click on advanced over here to change the layout
4:27
depending on the type of content you want i think i don't like this placement for this so i might
4:32
add it on another page but let's say i want to add um account information so i'm going to create a
4:40
heading drag and drop it over here write a account information below that you can add those text
4:46
fields so you can click on text pads over here i think i'm going to go with voicemers
4:51
and then you have product stock product images you have product information but i want to
4:57
to add account information. So I want to integrate author box or WordPress pages. So I would
5:06
integrate the information for that specific account over here. You can leave a inner section over here
5:12
and you can later on add that information as you go for all of your customers. You're just going to
5:18
copy a code and enter a shortcode box where people will be able to see their own specific
5:24
information now below that let's say in my account section I want to add a couple of
5:30
images to make it look more interesting so I can go into basic I can first add a
5:36
divider and then I'm going to make it like this I want it to be doubled or
5:42
squared however you want it to be then after that I will just click on update
5:48
then go back and go on ahead and add more items so I am going to add
5:54
I going to scroll down and I can go into the WordPress section and I can drop images over here and then I can click on apply click on add image and any of the image files I uploaded to WordPress can be inserted over here And you can really customize this page however you like Now once you have completed your customization you can even go into global edits
6:20
and this will allow you to have a cohesive theme on your entire website
6:25
So for that, you do have to upgrade to a premium version of Elementor
6:28
But with Elementor, if you just want to edit one website, it only starts at
6:34
59 USD and you do get a lot of value out of this
6:38
You're going to be able to do a lot of different things with this as well
6:43
And if you want to change any part of your website like the header
6:47
footer, you can also edit those with Elementor if you upgrade to the premium version
6:53
Now you can also edit, you know, the UI theme, which is basically the user preference and change that according to your specific
7:01
customer preferences as well, depending on the type of website you have and once of this is completed simply click on update on the bottom left once you
7:10
click on update your new account page for your website for your woo commerce website or for your
7:17
wordpress website will be created and you will be able to now see all of these changes made to your
7:23
page i hope you guys found this video helpful and you are now able to get started with customizing
7:31
your boocomas pages with Elemento. Make sure to like this video and subscribe to the YouTube channel and comment down below the best tips and tricks that I have taught you within this video
7:43
And make sure to also share this video with your friends and family and to other creators as well so you can help them out as well
7:50
And to anyone that might need to know this basic detailed platform and how you navigate through these different social websites
7:59
So I hope this was helpful enough for you. for you and make sure that you do leave a comment down below if I missed out on anything
8:06
and if there is anything you would like to add and I will catch you guys in the next video