Customize The WooCommerce My Account Page In 30 Minutes - No code!
Vložit
- čas přidán 8. 01. 2023
- Cornerstone Builder (Pro Theme) Affiliate Link: affiliates.theme.co/idevaffil...
In this tutorial we'll take a look at how to level-up the WooCommerce Account page easily and effectively using nothing more than Themeco's Cornerstone Builder & a sprinkle of modern design.
The one line of CSS can be found below as well as chapter jumpers.
Video Part 1: My Account Page
1. Conditional logic for login/logout states | 3:54
2. Hide the default nav using CSS | 5:22
3. Styling your account area | 6:47
4. Creating and assigning WordPress menus | 8:38
5. Adding graphics to your WordPress menu | 9:13
Video Part 2: My Account Portal
1. Multi-region headers | 14:00
2. Style the account like a platform / portal / tool | 14:42
3. Dropdown element for personalized info | 17:49
4. Conditional header logic and priorities | 19:21
Custom CSS
/*Hide WooCommerce Default Navigation*/
.woocommerce-MyAccount-navigation {
display: none;
}
/*Optional Login Form CSS Cleanup*/
input[type=radio], input[type=checkbox] {
margin: 0.425em 0.5em 0.425em 0em;
line-height: normal;
cursor: pointer;
}
button.woocommerce-button.button.woocommerce-form-login__submit {
width: 100%;
height: 3em;
margin-top: 2em;
}
This is pure gold. You’re the only person doing tutorials on Pro/Cornerstone and this kind of content is brilliant. Thanks for taking the time!
Another awesome tutorial, Josh. You're really making me look good with my clients. 😁
@slypanda - Hey! That's my goal.
More woocommerce customization tutorials
Woah! You already watched this? I didn't even now it was done uploading. Thanks! 🎉
Great video @buildingonwordpress (Josh) I've typically done this the old fashioned way with copying the WC template files over and creating new endpoints in the functions file. Great to see X/Pro maturing to the point that we can start doing this type of customization with the builder.
i like(d) cornerstone when it works, but unfortunately they broke custom elements a couple years back and still haven't introduced a fix
and unfortunately, unlike many other page builders, you can't use gutenberg blocks within cornerstone (this wouldn't be ideal either, but at least it could be a work around)
the fact themeco hasn't updated their documentation in over two years to reflect the fact that custom elements don't work is a real big red flag
had to cut them loose
Super curious what you mean by breaking custom elements? I’ve never run into this. Example?
@@buildingonwordpress I wrote the longest reply in the history of replies and it keeps getting filtered. Just follow themeco's own docs for their "element api primer". They have a sample plugin there. Pull in the element onto a page using cornerstone and you will see it doesn't work. I just checked it myself on the latest version of Pro, and it's still broken, in fact it's more broken than ever. The content used to show up, but the styles didn't work. Now the content doesn't even show up and throws an error on the front end (assuming you have errors turned on). I have a feeling the content part is a simple fix, which goes to the underlying problem: Themeco's QA is garbage.
You may wonder why I need such a seldom used feature. I explained that in the last reply I tried to post, and I simply can't be bothered to do it again. Basically, I could use some workarounds, but I rather just use a different page builder where this functionality works (preferably the built in gutenberg and block theme editor, but with Divi and Beaver Builder creating custom 'elements' (stupid name to begin with) actually works).
This has been broken for over two years, you can dig into their forums and see people posting about it from 2020 iirc. I could wait around for them to fix it, but I can't be arsed.
@NummNumm Yumm Appreciate your experience and perspective!
Admittedly, I don't have much experience with Themeco's Element API - though I would argue their QA is pretty typically strong within the context of the primary product / features.
Element API (which is a quite advanced, minimally-touted, developer-focused feature) does appear to have taken a backseat to their primary initiative of the native elements in the Cornerstone Builder and custom elements via the new Components feature (not the same, I get that).
That said, it sounds like (based on my reading on the forum) they plan to button up some loose ends from Element API.
Definitely still curious about your use case! Sorry to hear your original comment was being filtered out for some reason :-/
@@buildingonwordpress A couple things to get out of the way:
1. My biggest gripe is that they have not updated their documentation and if you attempt to follow them you're going to be led astray *mostly*. It's been like that for years.
2. You can get custom elements working if you can reverse engineer their V2 elements (until they update their docs you're on your own). I have done this successfully, but one caveat is that (at least as far as I was able to get working), the custom element needs to have a determined amount of nodes (html tags). My below use case needs to support nth nodes, so it's important to keep that in mind. With that said I know there's native elements that support nth amount of nodes (the accordion, slider, and others). Maybe it's something I would need to go back and look at, but as of right now it's not really worth my while (although, now that I'm thinking about it, I'm getting curious and may take a look).
For my use case (just an example, I have several). I have a lot of clients in the same industries, in his case restaurants. 95% or so of my restaurant clients have some kind of menu service they use (toast tab, slice, single platform, etc). They're able to log in and update their menus willy nilly. I wanted their changes to be reflected on their website while being able to use Cornerstone to style the different nodes to match their overall site design vs using an iFrame which several of these services have as an option. An iFrame also doesn't help SEO, so beyond matching the design, there's that, too (there's an argument to be made that the SEO gain isn't much, but it certainly doesn't hurt).
I have been able to accomplish the above using the looper with a series of providers and consumers. This is great and works well. But me being the lazy/stubborn/DRY dev that I am, I didn't want to have to repeat this on each client's site individually and I didn't want to have to update them individually if the API changed. I have dozens of restaurant clients and depending on how their menus are set up, it could either be all on one page or split up into separate pages (one for dinner, one for lunch, etc). All total, just a guesstimate I'm looking at ~100 menu pages, probably less by not by much.
This is where custom elements come into play. I wanted to create my own plugin(s) with a suite of custom CS elements that would solve various needs, in this case, menus. And if an API changed I wanted to be able to make changes to the plugin and update it on my clients' sites as needed. This would go for other changes as well, like maybe I overlooked an accessibility issue or I wanted to add a feature, like a modal for each of the items or whatever.
I created a custom element and registered it successfully. Right off the bat styles weren't working, but I kept working on functionality and was going to work on styles later. The element operates as such: you pull it onto a page and there's a text field for your API key, it hits the API and populates a drop down with the different menus, you can select a menu individually (dinner, lunch, etc), or by default it just displays all the menus with a navigation that hides/show the menu that's been selected by the user.
For the styles I came up with a work around. When you change element settings in CS (think margin, padding, whatever), a php object gets updated on the back end that contains the styles (and all sorts of other data as well, like the API key). I parsed out his object and set the styles inline (you can use a style block, too). That solved the style issue.
I'm still using he above on some sites. And it works. I'm quite happy with it actually, but going forward I've decided to stay with an agnostic approach using Gutenberg blocks which can be used with most modern page builders and themes, unfortunately Cornerstone is an exception. Between the documentation being out of date and CS not supporting Gutenberg blocks, I've just decided to move away from Pro. I still use it on a daily basis for a few clients. I like it when it works.
Also, I saw someone recently posted (about 14 hours ago as of this reply) on the forums about custom elements being broken. They gave the same typical response they've been giving for the past two years. You'll have to forgive me if I don't have much faith it will actually get fixed anytime soon. I really hope it does though.
Apologies for the verbose reply.
Nice work as usual. I like to think I'm responsible for this explosion of subscribers. 🤣
Hi Josh,
This is a gold free tutorial.
One more thing:
Is there a template or tutorial for building custom thank-you (order-received) pages using dynamic content?
Thank you 🙏
Fantastic skills. But have you ever considered a bricks builder? I am sure it's better than the counterstone because bricks I focused on clean code output.
Is it also possible to make changes like this to the checkout page? Mainly to the form itself and payment options for example.
Yes and no. With Cornerstone you can make changes to the checkout container (like I did for the account containers) but to style the checkout form you’ll need a decent amount of css. I’ve done it and it isn’t crazy. But more of an intermediate level.
Great video, amazing content! thanks a lot!
Thanks #Researching.Israel!
Really nice video 😊 I don’t get it… Do you actually get a ACF Pro license with Cornerstone?
Thanks Eric. That is correct. Comes bundled with ACF Pro
The Cornestone builder seems extremely powerful, how does it compare to Breeze, Breakdance etc?
I'm fully aware of my bias here, but Cornerstone is one of the most professional builders for WP.
I tend to liken it to more of a Webflow for WP. It's a platform more than it is just a page builder.
Super powerful. Well built. And nearly everything takes place directly within Cornerstone (page creation, editing, dynamic content, conditional logic, looper providers, looper consumers, layout builders for archives, etc).
The best part is, it comes prepackaged with the Pro Theme (affiliate link: affiliates.theme.co/idevaffiliate.php?id=2477&url=38) for phenomenal compatibility. No more worrying about themes as you can build nearly anything.
Keep in mind, this is definitely a professional product - like a Photoshop or a Final Cut, there will likely be a learning curve - but it's totally worth it.
@@buildingonwordpress Is there anything that you cannot build? I work mainly with woocommerce stores, so having a builder that integrates with woo is essential, breakdance as an example.
@BLC I'm no expert on Breakdance so my comparison is likely a bit naive but Cornerstone is insanely powerful.
Cornerstone easily handles custom building for:
• Headers / Footers / Pages
• Post Archives / CPT Archives
• Single Post Type (and CPT) Layouts
• Search Results
• 404 Pages
• Taxonomy Archives
• WooCommerce Archive (Shop)
• WooCommerce Single (Product)
• Full ACF integration
• Ability to edit the cart and checkout pages. Forms themselves require a bit of CSS.
Cart and checkout form inherit some core styling so design requires a bit of CSS but they do have global field styles (potentially) on the roadmap. I would say this rivals (and in my opinion beats) anything out there.
Is there something specific you do with Breakdance that you think is unique or essential?
@@buildingonwordpress Something specific? I don't think so, I'm just looking for a tool that can do the most. I think I'll try it for a month. I'll use your affiliate link if I do, won't forget. Thanks man
@@blc3320 This is an older version of Cornerstone so you'll notice some UI differences from my latest videos but this might give you a nice baseline for WC editing: czcams.com/video/5VBIC01rUs4/video.html