Making Woo Commerce My Account Page Look Like WooThemes

WooThemes “My Account” page is a great layout and a great way to promote your products to your customers. However the WooCommerce “my-account” templates out the box do not look great.

I mean, look, this is how your account page looked before I set off on a refine and styling mission

Pretty bad or what? Well, I wanted to make this page central to your user experience and make it easy to find everything in one place. Where did I end up? If you’ve purchased anything from WooThemes and use their account page the below may look familiar.

Tabbed content with a decent looking dashboard (promoting your content with a cool banner), through to edit your account all loaded into view with nice transitions

It’s a fantastic addition to our website and from start to finish has taken about 3 hours to fix it all up. Check out how it all looks in the gallery below

So, how do you do it?

UPDATE: I’ve now built this into a super easy plugin 🙂

Ready to TRANSFORM your WooCommerce “My Account” page?

This has been a popular post since I first published it back in December 2015 with people asking me exactly how to do it and the code used. So what I’m going to do is take you through it step by step and provide the code used.

First up… find the template

The Theme I was using at the time was the WooPress theme. Which had its own WooCommerce templates. However these weren’t great. So I first downloaded the /wocommerce/ folder and found the template to edit (hint, it’s in /wocommerce/myaccount/my-account.php)

Next, Modify the template with extra HTML

This was in a number of places, I’ve added the my-account.php here which I was using if you want to jump straight to downloading it. Warning though – I’ve put all the code inline and there’s no guarantee that this’ll work on your theme so you’re likely to need to follow through anyway.

Add a wrapper…

I added a wrapper to the top of the file

<div id='wrapper-account'>
<h1><?php _e('My Account','woo'); ?></h1>
<h4><?php _e("Welcome to your user dashboard",'woo'); ?></h4>
  <div id='header-right'>
    <div class='account-user-info user-header'>
      <div class='epic-80'>
        <div class='name'><a href='/my-account/'><?php echo $current_user->user_firstname . ' ' . $current_user->user_lastname; ?></a></div>
        <div class='row1'><i class="fa fa-download"></i><a href='#' id='header-down'> <?php _e('download your products','woo'); ?></a></div>
        <div class='row2'><i class="fa fa-power-off"></i> <a href='<?php echo wp_logout_url(); ?> '><?php _e('logout','woo'); ?></a>  <span class='woo-change-pw'><a href='#' class='woo-cp'><i class="fa fa-key"></i> <?php _e('change password','woo'); ?></a></span></div>
      </div>
      <div class='epic-20'>
        <?php echo get_avatar( $uid , 62 ); ?>
      </div>
    </div>
  </div>

</div>

Let’s look at what this is doing. It’s creating the area to the top right with the users logo and the logout link (the off button). For this to work you’ll need to be including font-awesome somewhere in your files.

Add a navigation block

This is what controlled the tabs in the layout for the account.

  <nav class="page-header--navigation">
  <ul>
    <li class="page-header--navigation--tab m-active" id = 'dash'>
      <a href="#"><strong><?php echo $cu; ?></strong> Dashboard</a>
    </li>
      <li class="page-header--navigation--tab" id = 'down'>
        <a href="#"><strong><?php echo $cs; ?></strong> Downloads</a>
      </li>
      <li class="page-header--navigation--tab" id = 'orders'>
        <a href="#"><strong><?php echo $cl; ?></strong> Orders</a>
      </li>
    <li class="page-header--navigation--tab" id = 'license'>
      <a href="#"><strong><?php echo $cfr; ?></strong> My Licenses</a>
    </li>
    <li class="page-header--navigation--tab" id = 'coupons'>
      <a href="#"><strong><?php echo $cfd; ?></strong> Coupons</a>
    </li>
     <li class="page-header--navigation--tab" id = 'edit'>
      <a href="#"><strong><?php echo $cfd; ?></strong> Edit Details</a>
    </li>
  </ul>
</nav>

This section controls which tabs are being shown (including my custom one for Coupons). There’s some things that you must take care of here

• The li classes must be the same (since we get to these with jQuery later)
• The id’s must correspond with the tab areas (in the next code block)

I added tabbed content

The next block is what the navigation above controls

<div class='woo-tabbed' id ='down-tab'>
<?php 
//wc_get_template( 'myaccount/my-downloads.php' ); 
    wc_get_template( 'my-api-downloads.php', array( 'user_id' => $uid ), '', $api_plugin_path);
?>
</div>

This corresponds to the id’s above for example you’ll see the tab content above has id=’down-tab’ which is reached by clicking the nav link with id=’down’.

You can add as many of these tabs as you like. The rest is handled with some JQuery and some CSS.

Control the tabs with jQuery

I’ve written this inline in the file you can download (just fill the form in at the bottom of this post and I’ll send it you). The control the behaviour of the tabs (show / hide them based on click). It needs some jQuery code. Here’s what I used

jQuery(document).ready(function($){
    jQuery(".page-header--navigation--tab").bind("click",function(e){
        e.preventDefault();
        jQuery(".page-header--navigation--tab").removeClass('m-active');
        jQuery(this).addClass('m-active');
        var id = jQuery(this).attr('id');
        jQuery('.woo-tabbed').hide();
        jQuery('#' + id + '-tab').fadeIn(3000);
    });

    jQuery("#header-down, .woo-down").bind("click",function(e){
        e.preventDefault();
        jQuery(".page-header--navigation--tab").removeClass('m-active');
        jQuery("#down").addClass('m-active');
        var id = 'down';
        jQuery('.woo-tabbed').hide();
        jQuery('#' + id + '-tab').fadeIn(3000);
    });

    jQuery(".woo-cp").bind("click",function(e){
        e.preventDefault();
        jQuery(".page-header--navigation--tab").removeClass('m-active');
        var id = 'change';
        jQuery('.woo-tabbed').hide();
        jQuery('#' + id + '-tab').fadeIn(3000);
    });

     jQuery(".woo-keys").bind("click",function(e){
        e.preventDefault();
        jQuery(".page-header--navigation--tab").removeClass('m-active');
        var id = 'license';
        jQuery('.woo-tabbed').hide();
        jQuery('#' + id + '-tab').fadeIn(3000);
    });
});

I’m not claiming this is the best way to do this but what it does do is:

• On click, removes the active class on the tabbed content (hiding them)
• Fades in the content for the id of the tab that’s been clicked.

Finally, some CSS

There’s quite a bit of CSS here, and it may need some refining further still based on your theme. Here’s what I added

.bc-type-3{
  display:none;
}
.account-header{
  width:100%;
  color:white;
  height:200px;
  background-color:black;
  position: relative;
}
.account-header h1{
    font-size: 3.052em;
    text-transform: none;
}
.account-header h4{
  font-size: 16px;
    text-transform: none;
}
.epic-20 img{
  border-radius:50%;
}
.content-page, .page-content{
  width:100%;
  margin-top:0px;
}
.woocommerce-account.logged-in .content {
    width: 100% !important;
    padding:0px;
}
.name{
    font-weight: 700;
}
.name a{
  color:white;
}
.account-user-info{
  text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.woo-tabbed{
      padding-top: 30px;
    font-size: 18px;
}
.user-header {
    width: 300px;
    margin-top: -3px;
    padding: .72em .8em;
    font-size: .9em;
    background: rgba(255,255,255,.2);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    line-height: 2;
    padding-bottom: 25px;
    padding-top: 20px;
}
#header-right{
  float:right;
    margin-right: 20px;
    top: 30px;
    position: absolute;
    right: 125px;
}
.epic-80{
  float:left;
  width:200px;
}
#wrapper-account{
      width: 80%;
    margin: auto;
    padding-top: 25px;
}
.page-header--navigation {
    clear: both;
    background: rgba(255,255,255,.2);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    overflow: hidden;
    display: table;
    table-layout: fixed;
    width: 80%;
    margin: auto;
    position: absolute;
    bottom: 0px;
    left: 10%;
}
.woocommerce-account h2{
  display:none;
}
.page-header--navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: table-row;
}
.page-header--navigation--tab {
    display: table-cell;
    text-align:center;
}
a:active, .page-header--navigation--tab.m-active a {
    background: #fff;
    color: black;
}
.page-header--navigation--tab a {
    display: block;
    padding: 6px 0;
    color: #C4BFBD;
    line-height: 30px;
}
.page-header--navigation--tab a:hover{
}
.account-user-info a{
  color:white;
}
.account-user-info a:hover, .account-user-info a:focus{
  color:white;
  text-decoration: none;
}
.account-user-info a:active{
  background:transparent;
}
.woo-tabbed{
  display:none;
}
.active{
  display:block !important;
}
.page-header--navigation--tab a:focus{
  text-decoration:none;
}
.promo-banner {
    background: #da552f;
    display: table;
    overflow: hidden;
    width: 100%;
    min-height: 115px;
    margin: 0 0 3.052em;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    box-shadow: 0 0 0 3px #f3f3f3;
    -webkit-box-shadow: 0 0 0 3px #f3f3f3;
}
.promo-banner, .promo-banner p{
  color:white;
}
.promo-banner .image {
    width: 20%;
    padding: 1.25em 2.441em 0 1.25em;
    float:left;
}
.promo-content{
  width:80% !important;
  float:left;
}
.button-green{
  background: black;
  display: inline-block;
    margin: 0 0 1em;
    padding: .461em 1.563em;
    line-height: 1;
    color: #fff!important;
    cursor: pointer;
    border: none;
    text-shadow: none;
    font-size: .9em;
    font-family: proxima-nova,sans-serif;
    font-weight: 600;
    text-align: center;
    text-decoration: none!important;
    text-transform: uppercase;
    outline: 0!important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
}
.promo-banner .buttons {
    padding: 0 1.758em 0 0;
    text-align: right;
    padding-top:20px;
}
.promo-banner>div {
    display: table-cell;
    vertical-align: middle;
}
.promo-banner .promo-content h3{
    text-transform: uppercase;
}
.promo-banner h3{
    font-weight: 700;
    margin-bottom: 0px;
    line-height: 1.25;
}
.promo-content{
      margin-top: 30px;
}
.shop_table th {
    font-weight: 700;
    background: #fff;
    color: black;
    padding: .8em;
    font-size: .8em;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 2px solid black;
}
table td, table th {
    border: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6 !important;
}
th {
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
}
.api-manager-download{
  text-align:center !important;
}
table tr:nth-child(2n+2) td {
    background: #f7f7f7;
}
.api-manager-version,.api-manager-version-date{
  font-weight:900;
  text-align: center
}
.api-manager-changelog{
  text-align: center;
}
.api-manager-changelog hr{
  margin-top:20px;
  margin-bottom:20px;
}
.api-manager-download hr{
  margin-top:15px;
  margin-bottom:15px;
}
.shop_table tr > td {
    line-height: 0px;
}
.api-manager-download{
  position: relative;
  padding-top:30px;
}
.order td{
  text-align:center !important;
}
#license-tab .shop_table tr > td {
    line-height: 20px;
}
.dropbox-dropin-btn, .dropbox-dropin-btn:link, .dropbox-dropin-btn:hover {
    display: inline-block;
    height: 14px;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 400; 
    color: black;
    text-decoration: none;
    padding: 1px 7px 5px 3px;
    font-size: 15px;
    border: 0px solid #ebebeb; 
    border-radius: 0px;
    border-bottom-color: transparent;
    background: white !important;
}
#welcome-message h3{
  text-transform: capitalize;
}

Phew. Still with me? Good. If you want to follow along with the above then great. I’d love to see your own implementations of this.