How To Build A Custom WooCommerce My Account Dashboard

[@WPTuts]

Full tutorial and updated code snippets now available: learnbricksbuilder.com/build-a-custom-woocommerce-my-account-dashboard/

[@mcostales84]

You can send the support tab to a custom end point, and use conditions to show the form

[@mmb811]

Absolutely FANTASTIC video tutorial. Been wanting to do this for some of my larger clients, but never had the time to research all and actually get it done. Your video just made it 1000% easier to do, THANK YOU, and keep up the great videos! ps: Always do it with Bricks, I just bought life time, before the special ended, so kind of committed to Bricks😄

[@WPTuts]

You're very welcome!

[@ocbroadband]

Just an easier option for hiding the myaccount-navigation vs. putting it in the theme file, at least for Bricks, is to put it in the direct CSS section for hte account-page element itself. Does the same thing and its directly attached to that element so if you remove it, it'll go away with that element and not reside still within the Child Theme potentially causing issues if you try a different method to display that information.

[@MiDoUx91]

Amazing tutorial, thank you! can we get a similar tutorial for Products cards please ? can't find the hooks for that part anywhere :(

[@Pimp_Shrimp]

Looks very nice compared to the default. I am mainly curious how it looks on mobile though. Perhaps it would be nice to see that in future videos. :)

[@mahmudzar]

This was actually my concern, but all I've done is use Bricks off-canvas to input the account navigation

[@BusinessDevelopment-kw2zq]

I have the same question lol

[@whitneylee33]

Great video, thanks! Is it possible to customize the look of each end point (orders, downloads, addresses etc...)? If I remember correctly, all those Woo pages just have a shortcode on them so it's not possible to "edit with Elementor" or "edit with Bricks". I'm sure theres a way but I don't know how without rewriting Woo's css.

[@JeanBaptisteChabi]

Why do I feel like bricksbuilder offer better developer experience with those syntaxes than elementor?

[@smnurulislam]

Awesome, I really love your creativity.💌💌💌💌💌

[@md.jabedkhan1791]

I was facing a problem with my account page but after reaching your video I understand that it's so good and just a tricky part. Thank you so much 💜.

[@mariazakariya8604]

i have the same problem how to fix this

[@thefutbollfanatic]

Amazing Tutorial but there's so many things you've done in bricks that we can't do in elementor. I would have loved this video in elementor pro but youve got amazing skill Sir

[@shadowgamernl]

When I'm applying the CSS code to the "My Account" tab, there's a significant gap on the left side, as if the space where the navigation used to be still remains. I'm using Elementor Pro with the Blocksy Theme. I hope someone can assist with this issue. Thanks!

[@abobsing]

add this to the other css .woocommerce-account .woocommerce-MyAccount-content { float: left; }

[@mariazakariya8604]

same for me how to fix that

[@Mr9ballin]

@@mariazakariya8604 I have no idea how to fix it but by chance are you using elementor to do this?

[@x_yuri_x]

the following worked for me : .woocommerce-MyAccount-navigation { display: none; /* Removes the menu completely */ } .woocommerce-MyAccount-content { margin-left: 0 !important; /* Ensures no space is left on the left */ padding-left: 0 !important; /* Removes inner padding */ width: 100% !important; /* Expands the content to the full width */ }

[@khandakershahi]

Nice tutorial! Thank you!

[@enatoehimen]

Great video. It really helped me out. But with Elementor My Account Widget, when I used the CSS code it removed the nav menu the content did fill the space. If there is anyone in the same boat, you can simply change the Navy orientation from Vertical to Horizontal then reduce the typography and spacing of the tabs. Good luck

[@Hassan_Nader]

Wonderful as ever, Wonderful forever.... Amazing & helpful tutorial like always... Thank you Sir

[@FIDRacing]

I am wondering how you enabled the user photo feature at the left bottom corner. Did you use any plugin?

[@napatrlaokhae4373]

You are awesome! 😭😭 Thank you so much for this tutorial

[@somadinafanz6568]

WPTuts, this is a fantastic tutorial. Thanks for the tailored details

[@SkoolOfBangers]

nice thaks I also got the woocommerce subscription plugin, paid but worth it

[@BusinessTano]

Please do the menu in phone 😢

[@benjaminkarlog8551]

Great video, I am still leaning more about brucks and core framework, great to see how others are using it. Why not place the css in that blocks CSS in stead? I like to keep the CSS close to where it should have effect. For templates I think this is the only no code solution. I would do it by child theme and code personally, but I understand why some would like to avoid that. And as you say, this is not much code, so I will not have any noticeable penalty to performance.

[@WPTuts]

There are multiple ways to approach the design aspect. For example BEM naming for the design, CSS attached to the relevant root element, etc. Tbh, the video was less about focusing on the design aspect and more about integrating Woo into whatever design or builder you prefer. 👍

[@YasienSarlie]

Thanks PC. You should sell these template files 🙂

[@MatthewSlaza]

Hi! Anyone having trouble hiding the My Account Nav Menu with the My Account widget in Elementor? As a shortcode I can hide it but the account details are flushed right. I was able to hide it with the My Account widget once but I can't get it to work anymore.

[@Aidataba]

you're the best !

[@NiPSpawN]

Hi, how you enabled right panel inside bricks thats allow you to easy insert sections,coloumns,blocks etc?

[@WPTuts]

It's part of Advanced Themer and not a native function in Bricks.

[@fiqihalfarizy4843]

Yeahh finally!

[@RobCooper]

You could put the css for hiding into that page specific css section in blocks no?

[@spindreams]

Make that side nav a section template and embed it in both pages using the template widget so you don't have to replicate it on other pages OR design your client areas "chrome" as part of a "single" bricks template that is assigned to load on those individual pages used for the client area and then those individual pages content are just the WC shortcode and the support page content. shown inside the the theme template holding the navigation for both.

[@WPTuts]

Sure, you could certainly go down that route. For me, 2 pages didn't really warrant going into the templates side of things. But if you had a bunch of pages, templates would definitely be the way to go.

[@spindreams]

​@@WPTuts if you build it like that from the get go it's really no extra work (in fact less work as you're only building out 1 theme template not two pages) and saves extra work later when you don't have to update duplicated navigation on different pages. Probably a bit harder to show in the tutorial though

[@WPTuts]

@@spindreams oh, I agree that templates are 100% the way to go. But, for several reasons I didn’t in this video as it’s not meant to be Bricks specific.

[@benjaminpau]

I would like to ask if creating the account pages templates via bricks templates also gives the same result? Is there a reason that we are creating pages instead of templates?

[@lucianpascu8445]

Something is very confusing. You said nothing about editing the My Account generated WooCommerce page or a template in the video. However, in the description at step #1 you say that we should add a section to the page but at #5 you state that we will clone the template?!! So you've worked on the My Account page or you've created a My Account template of type WooCommerce Dashboard?

[@mahbubjubayer9453]

How does it look in mobile ?

[@WPTuts]

However you want it to. :) The video was more about the WooCommerce side of things than the methods or tools used to create the dashboard. Get creative with the design and go to town on desktop and mobile versions. :)

[@DabraunsDev]

Do you know of any plugins I can use to add custom info to an account? For example, if I were to sell sponsorships, I'd like for my users to be able to upload and manage a logo from their my account page. So not only would it need to show on the back, but also have a form field on the front

[@Mr9ballin]

I may be way off but on what you're trying to achieve but I think it would be possible using something like a product designer for web 2 print. I use one on my website and customers design their product, save the file front and back and it goes to a custom page which is linked to their my account page. Its actually a nice plugin but I have heavily modified mine and it still works great.

[@CMSAssociation]

Space age love song

[@yehudaramadika371]

Thank you for the useful video, but I'm having problems with end points such as : payment methods, address, account details. I have actually copied from the advance settings in Woo but still can't, when clicked the page can't be found. please help me.