WooCommerce 2.6 styling new My Account page

MAKBIZ
15 Posts
MAKBIZ posted this 15 June 2016

So with WooCommerce 2.6 out and changes to the My Account page...has anyone managed to make it look nice and is willing to share how to do it?
Or do we (have to) wait for a new Themler update that can handle the new page and subpages?

Thanks
Mark

So with WooCommerce 2.6 out and changes to the My Account page...has anyone managed to make it look nice and is willing to share how to do it? Or do we (have to) wait for a new Themler update that can handle the new page and subpages? Thanks Mark
Vote to pay developers attention to this features or issue.
5 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 17 June 2016

Hi,

As I can see this page looks the same with 2016 WP theme.
Currently we have no plans to implement custom styles or create new controls for this page. But you can create custom page template and set unique bullet list style for this template.

Thank you,
Olivia

Hi, As I can see this page looks the same with 2016 WP theme. Currently we have no plans to implement custom styles or create new controls for this page. But you can create custom page template and set unique bullet list style for this template. Thank you, Olivia
MAKBIZ
15 Posts
MAKBIZ posted this 17 June 2016

Hi Olivia

Have a look at https://woocommerce.wordpress.com/2016/04/21/tabbed-my-account-pages-in-2-6/
The top video shows pretty much how your style looks and there is an example of WooCommerce's Storefront theme of how nice it can look.
It's too bad you don't want to put anything like that in as a starter.

Mark

Hi Olivia Have a look at https://woocommerce.wordpress.com/2016/04/21/tabbed-my-account-pages-in-2-6/ The top video shows pretty much how your style looks and there is an example of WooCommerce's Storefront theme of how nice it can look. It's too bad you don't want to put anything like that in as a starter. Mark
Support Team
Support Team posted this 21 June 2016

Hello Mark,
thank you for your comments, we appreciate them.
I'll pass your suggestion about styling and video to our team.

Regards,
Aileen

Hello Mark, thank you for your comments, we appreciate them. I'll pass your suggestion about styling and video to our team. Regards, Aileen
Brad
20 Posts
Brad posted this 22 June 2016

I'd like to voice my concern for this issue as well. The new My Account page looks horrible in Themler. The menu is just an un-styled bullet list in the left column. At the very least, you should make it render as tabs, like the Storefront theme. Ideally, there should be a style panel where the user can customize the menu appearance, the same way we can customize the other navigation menus.

I'd like to voice my concern for this issue as well. The new My Account page looks horrible in Themler. The menu is just an un-styled bullet list in the left column. At the very least, you should make it render as tabs, like the Storefront theme. Ideally, there should be a style panel where the user can customize the menu appearance, the same way we can customize the other navigation menus.
MAKBIZ
15 Posts
MAKBIZ posted this 23 June 2016

I did some Googling and after finding https://evolutionsigns.co.uk/beaver-builder-woocommerce-2-6/ I came up with the following as a basic way to make it prettier for now for us.
I added the "display: block" and "text-decoration: none;" to the a element to make the whole bar clickable and not have the underline on hover and the last line disables the bullets Themler adds (at least in our theme):

.woocommerce-MyAccount-navigation-link {border-radius: 4px; padding:6px 12px; margin:5px; background-color:#9fd5a7; color:#ffffff!important; } /* Div containing tab /
.woocommerce-MyAccount-navigation-link a {display: block; color:#fff; text-decoration: none;} /
Tab Link /
.woocommerce-MyAccount-navigation-link.is-active {background-color:#4cae5b;} /
Active Tab /
.woocommerce-MyAccount-navigation-link:before {display: none!important;} /
Disable Themlers bullet */

..of course change colours and other settings for your theme

Mark

I did some Googling and after finding https://evolutionsigns.co.uk/beaver-builder-woocommerce-2-6/ I came up with the following as a basic way to make it prettier for now for us. I added the "display: block" and "text-decoration: none;" to the a element to make the whole bar clickable and not have the underline on hover and the last line disables the bullets Themler adds (at least in our theme): .woocommerce-MyAccount-navigation-link {border-radius: 4px; padding:6px 12px; margin:5px; background-color:#9fd5a7; color:#ffffff!important; } /* Div containing tab */ .woocommerce-MyAccount-navigation-link a {display: block; color:#fff; text-decoration: none;} /* Tab Link */ .woocommerce-MyAccount-navigation-link.is-active {background-color:#4cae5b;} /* Active Tab */ .woocommerce-MyAccount-navigation-link:before {display: none!important;} /* Disable Themlers bullet */ ..of course change colours and other settings for your theme Mark
You must log in or register to leave comments