How To Build A Custom WooCommerce My Account Dashboard
HTML-код
- Опубликовано: 13 июн 2024
- Full tutorial and updated code snippets now available: learnbricksbuilder.com/build-...
Discover how to enhance your WooCommerce store with a custom WooCommerce My Account dashboard! In this tutorial, I'll guide you through the process of creating a personalized and branded dashboard for your customers.
Video Sponsored by Hostinger: jo.my/92dmbb
Don't settle for the default WooCommerce setup when you can provide a more professional and streamlined experience for your users. With my step-by-step instructions, you'll learn to build a Custom WooCommerce My Account Dashboard that matches your brand and improves user navigation.
🔹 Key Features:
- Branded Navigation
- User Information Display
- Order History and Details
- Downloadable Products Access
- Editable Billing and Shipping Addresses
- Support Section with FAQs and Contact Form
- Full Customization with Various Page Builders
🔹 What You'll Learn:
- Setting up the basic layout for the dashboard
- Customizing the navigation menu and user profile section
- Integrating WooCommerce endpoints for seamless navigation
- Adding a support section with helpful resources for customers
- Ensuring the dashboard is fully responsive and matches your brand's look and feel
Whether you're using Bricks, Elementor, Gutenberg, or any other page builder, this tutorial is adaptable to your preferred tools. By the end of this video, you'll have a Custom WooCommerce My Account Dashboard that not only looks great but also enhances the shopping experience for your customers.
🔹 Tools Used:
- Bricks Builder (or your choice of page builder)
- WooCommerce Plugin
- Additional CSS for customization
🔹 Important Links:
- WooCommerce Endpoints Documentation: developer.woo.com/docs/woocom...
- Bricks Builder: jo.my/bricks
- WooCommerce Plugin: woo.com/
Don't forget to like, comment, and subscribe for more tutorials on customizing WooCommerce and creating a better eCommerce experience. If you have any questions or suggestions, drop them in the comments below!
🔹 Timestamps:
00:00 - 01 - Custom My Account Demo
01:29 - 02 - The Tools We’ll Be Using
03:38 - 03 - Building The Main Navigation
06:49 - 00 - Sponsorship Message
07:30 - 04 - Adding the Sub Navigation Block
12:32 - 05 - Main My Account Panel
13:40 - 06 - Hiding the Left Column
17:09 - 07 - My Account End Points
20:13 - 08 - Configure WooCommerce
22:03 - 09 - How To Build The Support Page
#CutomWooCommerceMyAccountDashboard #WooCommerceTutorial #EcommerceCustomization #BricksBuilder #OnlineStoreDesign #UserExperience #WPTutson #WebDesignTips #WooCommerceDashboard
Take your WordPress website and skills to the next level!
► The Essential Web Designer's Documents Pack
Looking to take your web design business to the next level? The Essential Web Designers Documents collection has got you covered! With handcrafted, professionally designed documents that have generated tens of thousands in revenue, you'll have everything you need to impress clients, streamline your workflow, and boost your bottom line.
► Buy the Essential Web Designer's Documents Pack Now: links.wptuts.co.uk/ewdd
► 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 WPTUTS20 for 20% off)
✅ Project Huddle: jo.my/etafyp (WPTUTS for 20% off - Exclusive)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ Hostinger: jo.my/92dmbb
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Bricks Builder: jo.my/bricks
✅ Brizy Pro: bit.ly/2Ji97r8
✅ GenerateBlocks: jo.my/xotgcy
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ Blocksy: jo.my/y67ten
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ InstaWP: jo.my/0jdh2j
✅ 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 
Хобби
![Create a Custom My Account Page using Elementor [Elementor WooCommerce Shop]](/img/1.gif)
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!
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 💜.
Wonderful as ever, Wonderful forever....
Amazing & helpful tutorial like always... Thank you Sir
Nice tutorial! Thank you!
Awesome, I really love your creativity.💌💌💌💌💌
WPTuts, this is a fantastic tutorial. Thanks for the tailored details
You are awesome! 😭😭 Thank you so much for this tutorial
Amazing tutorial, thank you! can we get a similar tutorial for Products cards please ? can't find the hooks for that part anywhere :(
Thanks paul! Great tutorial 😀
Glad it was helpful!
you're the best !
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.
nice thaks I also got the woocommerce subscription plugin, paid but worth it
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
Yeahh finally!
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
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.
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.
You could put the css for hiding into that page specific css section in blocks no?
Thanks PC. You should sell these template files 🙂
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?
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;
}
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
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
Why do I feel like bricksbuilder offer better developer experience with those syntaxes than elementor?
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, 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.
Space age love song
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. :)
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.
Please do the menu in phone 😢
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.