Create more than you consume

I’m now writing over at my brand new site. Check it out and follow along.

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.


Comments

29 responses to “Making Woo Commerce My Account Page Look Like WooThemes”

  1. Chris Avatar
    Chris

    Hi it looks great but it would be nice to know how you did it

    1. Mike Avatar
      Mike

      Thanks Chris,

      I’ll post up a detailed update in a blog post later this year.

  2. Ugene Avatar
    Ugene

    Please tell us how you did it. I’m trying to improve the My Account page at the moment but can’t find a way to do it. Thank you

    1. Hi,

      I ended up moving to the Storefront theme which has a nicer account page than WooPress did. What theme are you using? To be honest it’s all slightly different depending on how much the theme you’re using has modified the /woocommerce/ files.

      Drop me an email and I’ll share the edits I did (mike@epicplugins.com)

  3. Do you mind to share how you did it? I need this!

  4. Chris Avatar
    Chris

    Hi , could you share how you did it.

    1. Sure thing ๐Ÿ™‚ I’ll be putting a post up about it in the next few days on the blog ๐Ÿ™‚

  5. is there a way to alter the dashboard to show specific data elements esp. on the orders page….

    1. Hi, what elements do you mean?

  6. jasonstuff Avatar
    jasonstuff

    Do I have to do custom code to modify my-account page or is there a plugin that will do this for me? I can’t believe Woo doesn’t handle this all… thanks

    1. Hi Jason,

      You need to edit the template files provided by WooCommerce. I was expecting the account page to be like WooCommerce’s actual one, especially if using their Storefront theme. Unfortunately it’s not and you need to edit the files to have it different.

      Mike

      1. I’m actually looking for a plugin that can do this for me but too bad I have to go to the trouble of editing files. Woo really need to see to this

        1. Hi Femi

          I could make a plugin which has it’s own page template, then what you’d need to do is select the new page template instead of the ‘out of the box’ one on the page where you have the shortcode for the account

          Let me know if that’s something you’d spend money on (i.e. a premium plugin)

          Mike

          1. If the layout looks clean and I can easily change the colors I would buy it.

          2. Yes, I would gladly pay for this, I need a my account page template that looks good with my website. I need this soon, can you make it in a week?

          3. I’ll do my best ๐Ÿ™‚ it’s coming along quite nicely

          1. wow nice, will purchase soon, also i have a killer idea for another wordpress plugin that I’d buy as well

          2. I’ve sent you an email. ๐Ÿ™‚

  7. Jan Boomsma Avatar
    Jan Boomsma

    how can i use this template with a multilingual plugin like WPML?

    1. It’s translation ready, the plugin gives you a new page template for your account, WPML should respect your underlying templates and just provide translations of the text.

  8. Thanks Mike, this is really helpful.

  9. Christopher Avatar
    Christopher

    I’ve installed the My Account and Helper plugins. How do you activate it to get it to work?

    1. Apologies for the delay, please contact support@epicplugins.com if you haven’t already

  10. Aaron Avatar
    Aaron

    Hi could would you be able to send me the files to this please?

    Thanks
    Aaron

    1. Mike Stott Avatar
      Mike Stott

      Hi Aaron,

      We’ve released the WooCommerce My Account plugin if you want to download a plugin version.

      We do not send files manually

  11. This is awesome, EXACTLY what I was looking for after seeing the woocommerce.com My Account page!

    Thanks
    Daniele

Leave a Reply to Mike Cancel reply

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