Customize Ugly WooCommerce My Account Dashboard To Look Like Amazon

Подписаться 249 тыс.

Просмотров 45 тыс.

50% 1

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.

Хобби

Опубликовано:

28 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 105

@AmyBowserRollins 2 года назад

You have a generous heart, Adam. Nice instruction and downloadable content to boot!

@johnravi3887 2 года назад

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.

@oluboladetimothy9260 Год назад

Thanks Lord Varys... Super helpful!

@onnekaskissa4531 6 месяцев назад

Very helpful tutorials. Thanks a lot!!!

@user-fo9ce3hr5h 2 года назад

amazing stuff. so happy to see ur channel.

@cgiovani 2 года назад

Thanks Adam for this tutorial! 💪😁👍

@karthost 2 года назад

Thanks, Adam, nice job.

@DaveStevens192 2 года назад

very nice and simple, thank you

@vishalmehta1419 2 года назад

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

@therarepaper5824 2 года назад

very very helpful thankyou for this

@bethw7 2 года назад

This would be a good place to use the 1 row/3 pseudo columns trick you shared a couple of weeks ago.

@kristianadolfsson 2 года назад

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.

@nodiranimojumder5942 2 года назад

Awesome 👍👍👍

@jay-leandrouchiha3369 2 года назад

Only Adam could get me to switch to another page builder. Nuggets of Gold, Adam!

@WPCrafter 2 года назад

Oh that wasn't the intention here, but you are always welcome to switch to blocks :-)

@jamesFBrown15 Год назад

Great video

@anasbrouk7153 2 года назад

i love ,all video you make :)

@IdeaSwellwithahintofMayo 2 года назад

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!

@thomast5033 2 года назад

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 ?

@studio427audio 2 года назад

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?

@YouDefineWellness 2 года назад

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!

@absperfume9633 2 года назад

GREAT But im having a question how did you changed the look of that login form.

@webxpresstech 2 года назад

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?

@CineFan911 2 года назад

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.

@merilynj2597 2 года назад

Would love a tutorial for setting up a Woocommerce website start (using Cloudways) to finish using the Kadence Theme.

@ravinderramini 2 года назад

Great sir, how to do with Divi in visibility option, can you help how to do in Divi builder?

@rakesh.dsouza 2 года назад

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

@m.sami035 Год назад

Thanks from Bangladesh.

@FWWeitzel Год назад

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.

@Adnihana 2 года назад

hi adam, what a great tutorial however those css code was not available, 404 page not found on droplr

@CDeskSolutions 9 месяцев назад

Thank you for the Video. Coudn't find the template. Please help

@JamesWelbes 2 года назад

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?

@WallowLeaf 2 года назад

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.

@meraikwd1179 Год назад

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.)?

@taygettes5682 2 года назад

Hi. thank so much for sharing. where can I get your free template? please

@lambertfourie5524 2 года назад

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?

@adied7725 2 года назад

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?

@WPCrafter 2 года назад

I'll work on that one. I have some ideas in mind.

@jenniferjlin 2 года назад

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.

@martini-theblueandgoldmaca4638 Год назад

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

@mohammadshafeeq3471 2 года назад

Could you please make a video on how to customize that woocommerce login and registration page

@docutainment1852 2 года назад

Does the Gutenberg code you offer on your website work with other themes than Kadence? I see Kadence in the CSS classes.

@WPCrafter 2 года назад

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.

@inzamamism 2 месяца назад

Great Man

@RobertoTheWise 2 года назад

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.

@aquaproductionstv 2 года назад

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"

@RobertoTheWise 2 года назад

@@aquaproductionstv Hello, and thank for your answer. What another option do you recomend to build my website?

@clairesnewgardenadventures 2 года назад

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!!!!

@khal153 Год назад

Hi! I can't find the code you used at the end of the video Can you please upload it again ? Thanks

@KentHutchins 2 года назад

Hey Adam, top effort. Thanks man.

@hautran5752 2 года назад

How can I edit text in [woocommerce_my_account] short code? It's bold and underline like yours?

@rishabhraj8717 2 года назад

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!

@hamzanajam1811 2 года назад

does elementor pro have visibility option or not?

@mario312 2 года назад

How come your woocommerce install has the links on the top and mine on the left?

@REOS8O 2 года назад

How do you make something like this with Elementor?

@hazael0123 2 года назад

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.

@mujibahmad6113 2 года назад

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?

@namangupta9777 2 года назад

Hello CSS code for download is not available on the website.

@Monketpod11 2 года назад

at 3:15 in HOW did you get to the classic page?

@WPCrafter 2 года назад

That is the default look. WooCommerce usually sets that up for you on your website at domain.com/my-account

@rohitjagtap9436 2 года назад

Hello sir 😁💞 How to make perfect my account page for mobile layout Like professional app please make a video and guide me ☺️

@lenabalina 2 года назад

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.

@naahj 2 года назад

Hi Adam, the download page redirects to a 404 page. Looks like it has been deleted, can you fix that please.

@matjaro 2 года назад

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 :(

@VisalPereravkp1988 2 года назад

this is i was thinking ...

@anjcastillo7405 2 года назад

Can you do it using wpbakery?

@docutainment1852 2 года назад

What is the advantage that makes you use Kadence or any other external theme instead of WP 2021 or 2020 theme?

@WPCrafter 2 года назад

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.

@PanchoMarconi 2 года назад

The main reason for me is performance and minimal request size

@jimmychandler7606 2 года назад

wow

@mohamedmoussa8565 2 года назад

Does it need Kadence theme to work, or it can work with other themes, like flatsome ?!

@WPCrafter 2 года назад

Nope not at all, will work with any theme.

@prisona3 2 года назад

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 ?

@WPCrafter 2 года назад

Perhaps the WooCommerce shortcode is in there twice?

@soflosuds 10 месяцев назад

This is this still available

@thisissahaj 11 месяцев назад

How to download the code? It's not available on your website

@MSK-rt7zi 2 года назад

I think your template code in your website is missing 404!

@kathrynzdezign9301 2 года назад

Is there a way to copy and paste this code into Elementor?

@WPCrafter 2 года назад

Unfortunately not, but you can recreate the design in Elementor in 10 minutes. It's a basic straightforward design.

@Joopiedemper Год назад

why you delete your template?

@dutchseek3r 2 года назад

Not working anymore for me

@heythisaintebay 2 года назад

Tried this, and even though it looks great, I lost some essential functions, so had to revert back to the default...

@WallowLeaf 2 года назад

What feature were you trying to keep? :?

@nickykos7222 2 года назад

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! :)

@jayeshdubey8361 Год назад

Same here

@AGAMING30 Год назад

me to

@AGAMING30 Год назад

@@jayeshdubey8361 CODE CSS work?

@KaiBuskirk 2 года назад

Great Job! Let’s do lunch! Cheers, Kai

@AlbertEinsteinOfficialYt 2 года назад

Template isn't downloading

@IridiumZero 2 года назад

trying to make woocommerce look good with gutenberg is like rubbing two steaming turds together and expecting gold appear by alchemy

@WPCrafter 2 года назад

Well aren't you a positive person to be around!

@nabila-asma-alia Год назад

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 😭