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😄
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!
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 */ }
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.
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.
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
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
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.
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. 👍
Hi, thanks for the video. Please how do I set my links to external URL in elementor. I discovered that when I click on any of the menus in the dashboards they open a new page or window entirely - it never opens within the dashboard as aI expect it to.
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?
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.
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.
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.
@@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
@@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.
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
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.
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. :)
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?
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.
Please point me to where I mention free in the video or the description? If you're using Bricks - it's a premium tool. If you're using Elementor, and want to use any templates or dynamic data, you have to use Pro.
Full tutorial and updated code snippets now available: learnbricksbuilder.com/build-a-custom-woocommerce-my-account-dashboard/
You can send the support tab to a custom end point, and use conditions to show the form
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😄
You're very welcome!
Amazing tutorial, thank you! can we get a similar tutorial for Products cards please ? can't find the hooks for that part anywhere :(
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!
add this to the other css
.woocommerce-account .woocommerce-MyAccount-content {
float: left;
}
same for me how to fix that
@@mariazakariya8604 I have no idea how to fix it but by chance are you using elementor to do this?
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 */
}
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 💜.
i have the same problem how to fix this
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.
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. :)
This was actually my concern, but all I've done is use Bricks off-canvas to input the account navigation
I have the same question lol
Wonderful as ever, Wonderful forever....
Amazing & helpful tutorial like always... Thank you Sir
Awesome, I really love your creativity.💌💌💌💌💌
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.
search for SysBasics Customize My Account for WooCommerce plugin
WPTuts, this is a fantastic tutorial. Thanks for the tailored details
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
Nice tutorial! Thank you!
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
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.
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. 👍
Hi, thanks for the video. Please how do I set my links to external URL in elementor. I discovered that when I click on any of the menus in the dashboards they open a new page or window entirely - it never opens within the dashboard as aI expect it to.
I am wondering how you enabled the user photo feature at the left bottom corner. Did you use any plugin?
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?
You are awesome! 😭😭 Thank you so much for this tutorial
You could put the css for hiding into that page specific css section in blocks no?
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.
nice thaks I also got the woocommerce subscription plugin, paid but worth it
Hi, how you enabled right panel inside bricks thats allow you to easy insert sections,coloumns,blocks etc?
It's part of Advanced Themer and not a native function in Bricks.
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.
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.
@@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
@@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.
Thanks PC. You should sell these template files 🙂
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
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.
SysBasics Customize My Account for WooCommerce
How does it look in mobile ?
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. :)
Please do the menu in phone 😢
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?
you're the best !
Why do I feel like bricksbuilder offer better developer experience with those syntaxes than elementor?
Yeahh finally!
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.
Who used bricks ?
Space age love song
a wast of time, you need the permium version to data
Please point me to where I mention free in the video or the description?
If you're using Bricks - it's a premium tool. If you're using Elementor, and want to use any templates or dynamic data, you have to use Pro.