Customize Ugly WooCommerce My Account Dashboard To Look Like Amazon
Vložit
- čas přidán 28. 06. 2024
- Let's face it, the My Account page in WooCommerce is ugly. It's always been ugly, but the great news is, it's easy to replace it with something awesome.
In this video I am going to show you how to replace the WooCommerce my account page in 2 simple steps.
Table Of Contents
00:00:00 What We Are Doing
00:01:14 Step 1 Design Your New Dashboard
00:11:50 Step 2 Hide The Navigation
00:13:05 Step 3 Change Visibility Settings
00:15:46 Use My Template
Grab the CSS code here www.wpcrafter.com/custom-wooc...
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart -- www.wpcrafter.com/surecart (SAVE 50% Auto Applied)
🟡 SureMembers -- www.wpcrafter.com/suremembers (SAVE 50% Auto Applied)
🟡 Presto Player -- www.wpcrafter.com/prestoplayer (SAVE 33% Auto Applied)
🟡 Astra Theme -- www.wpcrafter.com/astra (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows -- www.wpcrafter.com/cartflows (SAVE 40% Auto Applied)
🟡 Cloudways -- www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss -- www.wpcrafter.com/buddyboss (SAVE 10%)
* Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra -- www.wpcrafter.com/spectra
🟡 Elementor -- www.wpcrafter.com/elementor
🟡 Beaver Builder -- www.wpcrafter.com/beaverbuilder
🟡 Divi -- www.wpcrafter.com/divi (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List -- www.wpcrafter.com/hosting
🟡 Cloudways -- www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger -- www.wpcrafter.com/hostinger (SAVE 75%)
🟡 NameHero -- www.wpcrafter.com/namehero (SAVE 70%)
🟡 SiteGround -- www.wpcrafter.com/siteground (SAVE 70%)
CONTACT WPCRAFTER
☑ Website -- www.wpcrafter.com
☑ Facebook Group -- / wpcrafter
☑ Twitter -- / wpcrafter
☑ Twitter -- / adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link. - Jak na to + styl
You have a generous heart, Adam. Nice instruction and downloadable content to boot!
Hi Adam,
What a helpful video! I helped my sister set up an online store, and I think your tips will help me customize the site and make it better. It was a great watch, and you shared some amazing insights into the process. I will definitely be using this video to customize my sister’s website, and I really hope I can make a difference. Thanks a ton for sharing this amazing resource, it was very helpful.
Thanks Lord Varys... Super helpful!
Very helpful tutorials. Thanks a lot!!!
amazing stuff. so happy to see ur channel.
Thanks Adam for this tutorial! 💪😁👍
Thanks, Adam, nice job.
very nice and simple, thank you
So nice of you to share these wonderful tips and tutorials. Very easy to understand and apply them. By the way what tool or how did you create timeline separators in your video and the table of contents? Thanks
very very helpful thankyou for this
This would be a good place to use the 1 row/3 pseudo columns trick you shared a couple of weeks ago.
Thanks a lot for the great vid. A heads up, if you are using WPML you need to resave the Permalinks for it to work for the second language.
Awesome 👍👍👍
Only Adam could get me to switch to another page builder. Nuggets of Gold, Adam!
Oh that wasn't the intention here, but you are always welcome to switch to blocks :-)
Great video
i love ,all video you make :)
Great vid, especially on Kadence. Kinda surprised you didn't put "Kadence" in the title as it's on the rise. Anyhow, hope you don't mind me adding it to the my "Kadence Top Ten" article. It's down in the "advanced integrations" section. Wont link drop here tho. Thanks for making great content!
Thank you for the step by step explaination . i tried to get your copy but is not there anymore. Do you have a new link ?
Thanks a lot, Adam, for this amazing trick!
Is there a way to get the name of the account page that is currently displayed so we can show it in a text field, or even make the main buttons to highlight?
Best. Video. Yet. Thank you for sharing this... it helped me with something I've been beating my head against a wall to fix and you made it SOOO easy!
GREAT But im having a question how did you changed the look of that login form.
Can't tell you how much this helps. It's really so sweet of you but please how do i add registration to the page for new customer?
helpful tip for all you Divi users - if you;re struggling to figure out how to hide the new navigation when the user is logged out then select what you want to hide, go to the "advanced" options in the settings, select "Conditions" (this is directly above the visibility option), and then select "Logged In" from the drop down. Hope that helped someone.
Would love a tutorial for setting up a Woocommerce website start (using Cloudways) to finish using the Kadence Theme.
Great sir, how to do with Divi in visibility option, can you help how to do in Divi builder?
Hi Adam awesome video, I could do it using elementor, just one question... how do we highlight the box on click based on URL to show it as active like it does in the original woocommerce my account page... that would make it complete functioning as the default- thanks
Thanks from Bangladesh.
Hi, thank you for this very useful tutrial. My only issue is, that the custom CSS is not working. There ist allways the respond bracket is missing after line 1. I can´t code, so I´ve just copy your CSS and insert.
hi adam, what a great tutorial however those css code was not available, 404 page not found on droplr
Thank you for the Video.
Coudn't find the template. Please help
Nice, Kadence is pretty cool. That hide from logged out users feature was Kadence specific right? That's not available with the default block editor?
Any chance a The Events Calendar video is on your radar?
I believe you can get the feature on Kadance block (a plugin). It's on the free side if you are not touching on other feature... But I think you may be able to find a similiar feature too on other blocks editors. :o It'll just be more exploring.
That is interesting. I only see one issue with it. The row layout containing info boxes will show on all pages of the user's dashboard. Is there a way to hide the row layout for the sub-pages (orders, addresses...etc.)?
Hi. thank so much for sharing. where can I get your free template? please
Hi Adam,
How can I use this in my divi Builder? i've tried it as shown on this video, but im stuck with the navigation menu on the left. I'm not sure if CSS would fix it?
Hi Adam thanks for the video....
Now it's time to juice up the boring sign in /register page to?
Love complete control of that, what about a separate login and the register page.... Not much info out there that's easy... Hint hint 👍😊😊what you think?
I'll work on that one. I have some ideas in mind.
Thank you very much. But there is a problem here: the dashboard layout will still show even in /my-account/edit-account or in /my-account/edit-address pages. So this can't work unless I put the dashboard layout in another page and redirect to that page upon login first.
HI Adam Thank you tried to create it myself but i have gone wrong somewhere. can i please have the link to download your design. i cannot see it on your website. Thanks John
Could you please make a video on how to customize that woocommerce login and registration page
Does the Gutenberg code you offer on your website work with other themes than Kadence? I see Kadence in the CSS classes.
If you want the design I put together, you have to install Kadence Blocks. But you can just as easily create your own design in whatever tool you prefer.
Great Man
Hi, thanks for this tutorial. I would like to hide the default menu of the woocommerce shortcode in Divi. Where should I enter the CSS code that you have provided us? I have tried inserting it in the ADVANCED // CUSTOM CSS option in Divi and I have not gotten any changes. If I managed to remove the default woocommerce menu as explained in your tutorial, but using the Divi builder, I would create a much more personalized My Account page and even create a much more attractive private member's area. Maybe the CSS code that would be needed to hide the woocommerce menu in Divi would be different? Thank you and I look forward to receiving your response.
Go to Appearance > Customize and from the menu choose Custom CSS.
Divi is overall a terrible solution, wouldn't recommend it. Seems professional, but a lot of features are useless / not working and very buggy. One of those is their ""Custom CSS"
@@aquaproductionstv Hello, and thank for your answer. What another option do you recomend to build my website?
Hello Adam, Great video! Great content!!! I am just wondering when you place subscriptions and tiers on your website, how google crawl your new content if it's locked for everybody now that you are asking for people to subscribe and pay you for different tiers in order to have access to your content? And also, I follow some of your tutorials and when I place the payment method with Paypal, they charge a whopping 10% of the total amount charged. I think is too much. Do you have any solution to lower the amount we have to pay to these big companies? Thank you for all you do for us!!!!
Hi!
I can't find the code you used at the end of the video
Can you please upload it again ?
Thanks
Hey Adam, top effort. Thanks man.
How can I edit text in [woocommerce_my_account] short code? It's bold and underline like yours?
how can we edit the texts in endpoints? Such as, in orders, it's "Browse Products" how can we change it to some other texts like "Browse Services".
Please Help!
does elementor pro have visibility option or not?
How come your woocommerce install has the links on the top and mine on the left?
How do you make something like this with Elementor?
Hello Adam good video, but I had a problem :c
I'm trying to edit "edit-account" but when I edit with elementor, it show me to edit "my-count", I don't know what to do, I hope you can help me.
Regards.
You are a genius, but with my website it has a problem.. who ever logs in with their account the "Home page" shows Error, Not found and appears when you logout.. i couldnt figure it out, can anyone please help?
Hello
CSS code for download is not available on the website.
at 3:15 in HOW did you get to the classic page?
That is the default look. WooCommerce usually sets that up for you on your website at domain.com/my-account
Hello sir 😁💞
How to make perfect my account page for mobile layout
Like professional app please make a video and guide me ☺️
I'm using the FREE version of Elementor - can't find the 'Hide Visibility from logged out user' option
- is this a plugin?
- you said it was a plugin somewhere
- is this the same as HOOKS?
- Theres tool on ASTRA that lets you create Page Layouts and select sections that are Hidden from Logged out Users - but it looks very technical.
Hi Adam, the download page redirects to a 404 page.
Looks like it has been deleted, can you fix that please.
I feel this is tutorial is incomplete as it only shows you how to make the front end beautiful, but what about the pages that opens when you click those icons? it will still be the ugly WOO default look :(
this is i was thinking ...
Can you do it using wpbakery?
What is the advantage that makes you use Kadence or any other external theme instead of WP 2021 or 2020 theme?
Too long to list in a comment. There is zero reason anyone should be using either of those rigid default WordPress themes. They are what they are, you can't customize a darn thing.
The main reason for me is performance and minimal request size
wow
Does it need Kadence theme to work, or it can work with other themes, like flatsome ?!
Nope not at all, will work with any theme.
I am with Kadence and followed everything from the vid (pasted at the end) but with me above the "Hello Adam (in your case)" 16:56 the Adam username shows again. So it is unnecessarily duplicated. Do you know how can I remove it ?
Perhaps the WooCommerce shortcode is in there twice?
This is this still available
How to download the code? It's not available on your website
I think your template code in your website is missing 404!
Is there a way to copy and paste this code into Elementor?
Unfortunately not, but you can recreate the design in Elementor in 10 minutes. It's a basic straightforward design.
why you delete your template?
Not working anymore for me
Tried this, and even though it looks great, I lost some essential functions, so had to revert back to the default...
What feature were you trying to keep? :?
The CSS code wont help to get rid of the old menu navigation. Anyone else got this problem too? What can I do? Please help! :)
Same here
me to
@@jayeshdubey8361 CODE CSS work?
Great Job! Let’s do lunch!
Cheers,
Kai
Template isn't downloading
trying to make woocommerce look good with gutenberg is like rubbing two steaming turds together and expecting gold appear by alchemy
Well aren't you a positive person to be around!
I have regretted following your video tutorial for me to practice, at the end of the video you stopped to continue the tutorial, and instead told me to use your template, I also didn't find how to download your template that you provided 😭
After seeing the power of new block plugin, I am thinking to quit using Elementor :D
blocks from wordpress editor no please..., lol
You can design that with whatever tool you want as long as it has visibility options.
broke: the my account page in woocommerce is ugly
woke: everything in woocommerce is ugly