My Account

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

Pre-Requisites

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.

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 10% off on your first month with us.

26027
WELCOME OFFER