My Account Classic and My Account Endpoint Content
My Account Classic #
My Account Classic gives you the ability to style the account page Navigation (endpoints) and the look of the tables, forms and notifications which appear in the account content.
IMPORTANT: This module needs to be placed on the page where the WooCommerce My Account page is set to be. Usually it is on yourdomain.com/my-account/ . This is because when switching between the tabs it loads the endpoint url-s under the url of the main account page. For example: /my-account/orders/ , /my-account/new-endpoint/ etc.
– Set up the navigation Breakpoint – this allows you to set up the exact point in pixels where your navigation will transform into mobile look
– Endpoint preview – this allows you to set up which endpoint to load/view on the visual builder. You can switch between the endpoints to see how they look on the front-end when you style them.
– Background – you can set up a background for the whole account module from here. This background will be applied to both the Navigation and Content sections.
– Set up the layout of the Navigation and content – You can set up a gap between the Navigation and Content Sections and you can Equalize or not the height of Navigation and Content Sections
– Style each individual Navigation item and its Active and Hover states – items gap, icons size, padding, font, border and box shadow
My Account Endpoint Content #
This is a module which loads one particular endpoint content of your choice. You can use this module multiple times on one page loading different endpoint contents. For example you can create a Dashboard where you can both the “Hello text” and “Orders” table. This module can be placed anywhere and styled differently each time, which gives you the ability to create whatever custom layout you want.
IMPORTANT: The best way to use it is by following these steps:
1. Create a Section / Row / Layout with this module
2. Style it the way you want
3. Save it to Divi Library (save it as a Global item if you want to be able to edit it from another page different than Divi Library – this might be needed due to the Divi Library occasional loading problems)
4. Go to the admin area to “Divi Account”, choose the endpoint you want to load it on
5. Load your Section / Row / Layout on the “Before” or “After” content of that endpoint
If you need to edit the uploaded layout, you can do it either from the Divi Library (where you have saved the section) or, if you have saved it as a global item, you can edit it from another page as well. You can see the result on the front-end page of the endpoint. The “Before” and “After” content elements cannot be seen in a “visual builder” mode of the “My Account Classic” module. This is made for the purpose of having a lighter and faster visual builder editing experience.
In My Account Endpoint Content module you can do the following:
– Choose which Endpoint to Preview and Display from the “Content” tab of the module
– Set Up a background from the “Content” tab of the module
– From the “Design” tab / Module you can set up a module’s border, box shadow, margin and padding
– From the “Design” tab / Endpoint Content and Endpoint Text – From here you can style the text, padding, background and box shadow of the content section. These are general endpoint content settings.
– From the “Design” tab / Tables and Table Text – You can style the look of the tables from here. Tables can be seen in “Orders” and “Downloads” tabs for example. You have the ability to style the table borders and background, row borders, style individually background and padding for Head and data sections of the tables, and also set them up to show a different background color on every second row. You can also style the button of the tables.
– From the “Design” tab / Notifications – Notifications can be seen where there is no content in the endpoint. For example when there are no orders made yet, or “No downloads available yet” etc. You can style the Notifications border, background, text, padding, box shadow and button.
– From the “Design” tab / Forms – You can find a form in the “Account Info” tab for example. You can style its background, padding, borders, form labels text, form fields text and background, button.
– You also have the Sizing, Transform and Animation options which are standard for Divi Modules.