Customize WooCommerce My Account Page | Elementor & JetWooBuilder
HTML-код
- Опубликовано: 6 июн 2024
- Take your WordPress website and skills to the next level!
Learn how to customize WooCommerce My Account Page with Elementor & JetWooBuilder from Crocoblock.
While the standard WooCommmerce My Account page is totally functional, it isn't the most exciting design. Using JetWooBuilder from Crocoblock, I'll show you how to quickly start customising it in minutes.
If you want to take the design further, you could easily use JetTabs (also from Crocoblock) to create something much more bespoke and give your clients a much nicer and personal experience.
Buy JetWooBuilder: jo.my/croc
Buy JetTabs: jo.my/croc
TIMESTAMPS
00:00:00 - Introduction
00:00:24 - Building the My Account Page with JetWooBuilder
00:07:40 - JetTabs
00:08:09 - Building a smoother My Account Dashboard
00:16:38 - What next?
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► EXCLUSIVE WPTUTS DISCOUNTS ◄
✅ WPVivid Backup Pro: jo.my/vividpro (use WPTUTS30 for 30% off)
✅ Project Huddle: jo.my/etafyp (WPTUTS for 20% off - Exclusive)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Brizy Pro: bit.ly/2Ji97r8
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ OCEANWP: bit.ly/2fRHBr0
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ SMART SLIDER 3: bit.ly/2G0G1vB
✅ CSSHERO: bit.ly/2qbrRl6
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
👉 Twitter: / wptutz
👉 Facebook Group: wptuts.co.uk/facebook
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk 
Хобби
Just a heads up for anyone who is watching this video now. There is no need to do all the extra stuff he is doing. You can make a "login page" like he did then you can just right click on the login section you made and choose "Save As Template". That will save it as a template that you can now choose on your switcher. Do the same thing with your Registration section. Save you some time!
actually the same goes for my account page -- you can just add the tabs on a new section. Then "save as template" for orders, addresses etc. Go to your tab sections & add the template you just saved. There's no need to make multiple different pages for templates!
Thank you!!
I watch a ton of youtube videos for web dev and dozens of other topics, and I must say that your videos are top notch. Not overdone, not under done...just straight to the point. Much appreciated.
Thank's a lot Paul, i´m glad to follow you, always an inspiration.
is jut what i needed! thanks Paul.
Another top notch tut Paul! Brother you do such a good job of making things easy and practical!
That's what I'm here for :D
The success sound effect is so satisfying
I like more of your tutorials, keep it up, thank you.
Many Thanks Paul, good job!
Hi Paul. Great overview and enjoyed seeing how to incorporate other Crockoblock tools into the final design. I'm going to be using JetTabs for a section on a client site so this was a great example of what can be accomplished.
Good to hear this helped shed some light on using JetTabs David. :)
Thank you for sharing! Great tutorial, as per usual! What method do you recommend for customizing the single order view?
I'm new in woocomerce and your videos helps me a lot set up a unique shop and especially a unique my account page!
Great work!
Also i have a question for the my account site. Is there any option to design the layout, which comes with woocomerce dashboard (Hello Username /logout) more user friendly. Like a profile card where you can directly edit your adress etc?
Dude I did the Jettabs thing and added the templates with the JetWooBuilder widgets, but when I go to "From your account desktop you can view your recent orders, manage your billing address and edit your password and account details.".... If I click on recent orders or manage your address or edit your password or account details, nothing happens, it doesn't go to the endpoint or the url it should go to... it just refreshes the page... why does that happen?
Great... Keep making videos on Elementor + Elementor Pro + Astra + Crococoblock - (Combined) . . . 👍
Thank you! there is a way do it with Elementor pro?
I just tried to do what you explained, but I need to change the "my orders" style. How is it possible? I'd like different colors, border radius and details. How could I do?
Hi, how can I link the Login button in the Header with the My Account Template/Page that you created in the video?
Is there a way to also put my payment methods? cards for example? Thanks Paul
Looks like you can no longer copy the widgets from the Jet Woo template builder over to the Elementor template system. So you can no longer implement what the second half of the video describes.
I thought the same, but yes it's possible. In order for the JetWoo widget to be pasted to an Elementor template, you must first activate it in WooCommerce > Settings > JetWooBuilder > My Account Page > Custom My Account Page > Custom My Account Page > Click on the box to activate and then select your template .
If you do not follow these first steps you will never be able to copy and paste the JetWoo widget to the Elementor template to do it as in the tutorial.
Greetings! ✌
@@fernandoriveraalarcon7470 YOU ARE AN MVP !!!!
Also used for woocommerce memberships and subscriptions?
Hi, I installed these two plugins, but to create different parts of the WooCommerce user account in Elementor templates, Jetbuilder widgets do not work in Elementor templates, how should I solve this problem? Thank you for your guidance
is there a way to add fields to the registration form?
hello, I tried to follow this video today, 2 years after publishing it and the widgets when they are inside the jet tabs are not pulling the information correctly, mainly address book and account details. How to fix it?
Hi Friend, i have just create a custom accout page with this tut.. but i have only one problem. when I click on an order link, (it sends to the order details), the account page is opened but as initial, not showing the order summary. Do you know where to configure that? Sorry about my english, and thaks a lot!
hi please i ve a problem with the Muy account order, when i insert it, it look like this: orderdate.., all together and with no template, thanks
good job 🙏
Thanks a lot!!!!
No worries! 😀
When I create the template it have the title, and different of other pages in configurations there's not an option to configure and remove the page title.
In this tutoria you use a Advanced JetTabs to load elementor template , but when you click on order view button or pay or cancel order... ther's no templates for them they is showed inside tab and still there with no back action button. The best will be use a popup to show order or payment .
Is it possible to show or hide the tabs based on user role?
suppose i have a woocomerce category dedicated or protected in my account who can i show that in my dashboard because in regular woocomerce account is coming my under my memberhsip
For anyone wondering how to keep the endpoint styling after clicking across to different menus such as orders or addresses, you need JetThemeCore. Perhaps there's a bug that prevents this styling from being kept with the new wordpress in 2022 onwards. Before reading, note which Jet Plugin I am referencing to understand what affects what (its confusing!) Using JetThemeCore you don't need to have the custom my account or endpoints checked. The prevailing template is the JetThemeCore My Account page, which you will create when this plugin is active. This means all the content you want on the My account page is needed to be created on the JetThemeCore template - My Account. Your work in creating the endpoints style is not lost now thankfully - when you use JetThemeCore, you can reference use Jet-tabs to reference a JetWooBuilder template and it will retain style. JetWooBuilder pages, even with checkboxes ticked won't override your wordpress Theme style and so the problem is displaying the content/page of a JetWooBuilder template on the live site. This is where the template from JetThemeCore actually overrides the existing wordpress or elementor page template and Theme styling! This method retains all widget styling even after clicking different sections. Took me forever to workout pages from JetWooBuilder don't seem to override the wordpress pages in the current versions even when the checkboxes in Woocommerce > Settings > JetWooBuilder are ticked, they only transpose the content - They LOSE the STYLING! So to summarise - the only way to keep the styling is with by creating a JetThemeCore pages/template and within these you can reference stylised JetWooBuilder pages or other JetThemeCore pages. The JetThemeCore templates can actually override wordpress pages, therefore keeping everything you see and create within them. Beware, JetThemeCore conflicts with Shop/Category pages etc, so you will need to rebuild those if not already created. Hope this saves you all hours of testing! You can also use the megamenu instead of tabs if that suits your style
hi i want add new filed in my account .
can i do this with jetwoobuilder?
What’s are best hosting sites for a store?
it would be nice if you could hide the tabs in the dropdown menu in the mobile version
If you click on "log out" on the my account page, it brings me to a different login screen than I want to use, how can I fix that?
Hello WPTuts, how are you? I have my question something important when I will forget the password but there are horrible styles but I cannot find the JetWooBuilder configuration as styles because when the person if they forget the password but the form is very ugly and they do not have options to fix the styles it is possible to arrange with this plugins I thank you very much greetings :-)
Is it ok even for mobile?
unable to add recaptcha in my account login page, and google authenticator
I cant edit my adresses, why?
what is the theme you used? Do you recommend any one in particular to work with Woocomerce? The Hello theme has not given me such good results.
I used Astra in the video, which is a good theme as is Blocksy. :)
@@WPTuts Thank you! for your recommendations, I did not know Blocksy
@@garciajoaquin no worries. If you take a look at the video on the channel about building a clean and simple WooCommerce website with free tools, that uses Blocksy free.
It should help you see some of thing options it has on offer. :)
The plugin overall is awesome, but seems incomplete. You can't customize the end points with it. It just looks nice until you click 'view order' or edit any other details.
Has anyone else found that this doesn't work? I save copy the element to the template and save. It displays how he described - it shows the element but without the styling. I save it... and then it strips out the account specific elements. Anyone have any suggestions?
Same problem, still no idea how to solve it
Hi All! Gibt es die Möglichkeit, das wenn ein Beitrag gelöscht wird das dann auch alle dazugehörigen Bilder gelöscht werden?
Hi Paul, what's the best way to remove the "My Account" title? thanks
Hi, do you found a solution?
@@ricr8987 Sage
h1.entry-title {
display: none;
}
Paul the second part of this video doesn't work anymore - Croco in their infinite dumbness doesn't allow paste outside Jet builder anymore.
you don't need to do all that. Look at my comment! I explained it :)
why it wont show up ?
This does not work as shown in the video. I cannot copy paste a WooBuilder Element to a Elementor Template. I get an empty container.
To effectively set up your 'My Account' template in Elementor using JetWooBuilder, start by creating a single template and add all the necessary components such as tabs, orders, dashboard, etc. Make sure to enclose each component within its own container for better organization. Once you've arranged everything to your liking, simply click on the center button of each container to open its options. From there, select "save as template". This method ensures that all your JetWooBuilder templates are properly saved within Elementor Templates, streamlining your design process. Hope this helps! 😄 @kryptoniir
still no fix for the edit-adress part?
CRAZY I JUST BOUGHT THESE AND IT DOESNT WORK LOL
The switcher does not appear to bring in the template. I believe I have it set up correctly but the template will not show up.
Actually the problem seems to be that copy and pasting from Crocoblock to elementor does not seem to work. It pastes it in alright but when you save and close the page, and then reopen it, the content is gone.
@@davefilchakmusic I have the same problem! @WPTuts how to fix this?
Same problem. Templates are loading in, but the ‘my account’ widgets only work on ‘my account’ pages. Tried to create extra My Account pages in Jetwoobuilder, but these template are not showing in the list of templates from the tabs settings.
Woocommerce address endpoints - how do you customise the page?
/my-account/edit-address/billing
exactly..... no one knows apparently , now thats a video worth a million views
Customise it in what way?
@@WPTuts to make it work , in this tutorial if you click on the edit address etc it does not do anything
@@silentphil77 ahh, I see what you mean. I'm looking into a way to get that aspect working, so leave it with me and I'll try and find a solution. :)
@@WPTuts you are a total legend Paul... also I hope your liking the gradient buttons
I got excited, implemented this, and then found out it's got those pesky endpoint issues and on the orders tab when you click an order there's no way to get back to the orders list unless you refresh the page, so no bueno. :(
so abort mission? I got excited too but the actual fields don't work when you click it
I'm in disbelief. There are ZERO videos that go into the setting up of the endpoints. How do you set it up so that when someone clicks on "edit" in addresses that it brings you to the edit addresses end point? And why didn't you bother to mention there is no widget at all for payments?! Don't people who are considering buying this deserve to know these terrible flaws? I purchased these widgets because I thought they were a solution! Instead they created more problems for me and wasted my time. The only people who think this video is a good tutorial are people who haven't actually done it yet.
Maybe it's your responsibility to do your due diligence in whether a plugin or add-on covers what you need and not rely on RUclips videos to do that research! 🙄
@@WPTuts This isn't quite the right answer for that question I think. It can't be the responsibility of the user following your tut ending up unexpectedly nowhere? Leading out of the tabs and content when clicking a woocommerce endpoint link doesn't really make sense, does it?
Crocoblock made the video of what to do for the endpoints so they look nice. You just need to make templates using jetwoobuilder and then you can customize it however you like - I followed their video and came out with a great result!
@@ivanmartino1381 video please
first woooo
wow there isn't still a way to edit addresses? that's embarrassing for crocoblock!!!!!
There's but it's not working with JetTabs
Is Jet woo builder free?
I'm afraid not, no.
no longer works.
copy and paste doesn't show up
@@ajakson11 Same problem here
Oh my god, I just wasted money buying this plugin.
WARNING!
I have a better idea to customize account page,
using elementor pro, YITH Customize Account page and WooCommerce.