WooCommerce Storefront Theme – Move My Account Navigation Tabs From Right To Left Side

WooCommerce moving the my account navigation tabs from right side to left with CSS


There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution into the Additional CSS box under Appearance > Customise > Additional CSS

About this Solution

If the My Account navigation tabs are showing on the right-hand side of the screen, it’s probably because you’ve changed the page template from “Default” to “Full Width”. This is default behaviour to ensure the navigational tabs don’t conflict with the sidebar. Some users, not all, will experience issues where the navigation tabs will stay on the right-hand side despite changing the page template back to default. To get the My Account navigation tabs back to the left-hand side, simply add the following CSS code and Bob’s your uncle.

 * Snippet Name:	WooCommerce Storefront Theme - move My Account Navigation Tabs From Right To Left Side Of Dashboard
 * Snippet Author:	ecommercehints.com

@media (min-width:768px) {
    .page-template-template-fullwidth-php .woocommerce-MyAccount-navigation {
        float: left;
        margin-right: 4.347826087%;

    .page-template-template-fullwidth-php .woocommerce-MyAccount-content {
        float: right;
        margin-right: 0;

Snippet Benefits

  • Move the My Account navigation tabs form the right-hand side of the dashboard to the left-hand side of the dashboard.
WooCommerce Conversion Rate Optimisation (CRO) eBook
100 WooCommerce Conversion Rate Optimisation Tips

Leave a Reply

If you are going to write code in the comments, please wrap it between code tags.

Your email address will not be published. Required fields are marked *

Other Recent Guides

Subscribe To Emails

Get exclusive WooCommerce tips that I only share with email subscribers

Join hundreds of other subscribers