Adds Tabs to WooCommerce "My Account" page. Instructions: add my-account.php to your /woocommerce/myaccount/ folder. Next, add the CSS to your child theme's style.css file. 11/25/2015 - Added tab6 for Event Espresso WP User Integration. Next challenge is to include Sensei My Courses & Pippin's AffiliateWP on these tabs.

my-account.php

<?php
/**
 * My Account page
 *
 * @author 		WooThemes
 * @edited by   McLane Creative
 * @package 	WooCommerce/Templates
 * @version     3.1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

wc_print_notices(); ?>
<div class="container">
	<div class="wc-account-tab">
	        	<ul class="tabs">
			        <li>
			          <input type="radio" checked name="tabs" id="tab1">
			          <label for="tab1">Dashboard</label>
			          <div id="tab-content1" class="tab-content animated fadeIn">
                     
			            <p class="myaccount_user">
	<?php
	
	printf(
		__( 'Hello <strong>%1$s</strong> (not %1$s? <a href="%2$s">Sign out</a>).', 'woocommerce' ) . ' ',
		$current_user->display_name,
		wp_logout_url( get_permalink( wc_get_page_id( 'myaccount' ) ) )
	);

	printf( __( 'From your account dashboard you can view your recent orders, manage your shipping and billing addresses and <a href="%s">edit your password and account details</a>.', 'woocommerce' ),
		wc_customer_edit_account_url()
	);
	?>
</p>

<p><em>Do you have orders that aren't appearing here? </em>Contact us with your order number and we'll get them added to your account.</p>

<p><strong>Need Help? </strong><a href="http://help.theyouthcartel.staging.wpengine.com/hc/en-us/requests/new">Submit a Help Center ticket</a></p>
			          </div>
			        </li>
			        <li>
			          <input type="radio" name="tabs" id="tab2">
			          <label for="tab2">Downloads</label>
			          <div id="tab-content2" class="tab-content animated fadeIn">
			           <?php wc_get_template( 'myaccount/my-downloads.php' ); ?>
			          </div>
			        </li>
			        <li>
			          <input type="radio" name="tabs" id="tab3">
			          <label for="tab3">Previous Orders</label>
			          <div id="tab-content3" class="tab-content animated fadeIn">
			           <?php wc_get_template( 'myaccount/my-orders.php', array( 'order_count' => $order_count ) ); ?>
			          </div>
			        </li>
                      <li>
			          <input type="radio" name="tabs" id="tab4">
			          <label for="tab4">Free Stuff</label>
			          <div id="tab-content4" class="tab-content animated fadeIn">
			             <p><a href="https://theyouthcartel.com/youth-ministry-jobs/">Job Board</a></p>
                        <p><a href="https://theyouthcartel.com/newsletter/youtube-you-can-use-archives/">YouTube You Can Use archives</a></p>  </div>
			        </li>
                     <li>
			          <input type="radio" name="tabs" id="tab5">
			          <label for="tab5">Courses</label>
			          <div id="tab-content5" class="tab-content animated fadeIn">
			          <p><em>Cool stuff coming soon</em></p>
                        
			          </div>
			        </li>
                     <li>
			          <input type="radio" name="tabs" id="tab6">
			          <label for="tab6">Event Registrations</label>
			          <div id="tab-content6" class="tab-content animated fadeIn">
			             <?php echo do_shortcode('[ESPRESSO_MY_EVENTS]');?>
			          </div>
			        </li>
                     <li>
			          <input type="radio" name="tabs" id="tab7">
			          <label for="tab7">Affiliates</label>
			          <div id="tab-content7" class="tab-content animated fadeIn">
	
<p><h3>Refer people to us and make money!</h3></p>

<p>You can earn a 10% commission for every referral at The Youth Cartel online store. This includes physical products like books, digital downloads like curriculum or event media. It's super easy. Whenever you recommend a product of ours in an email or on social media, include your affiliate link. When someone clicks on that link and makes a purchase, you get paid!</p>

<p>Have questions or an idea you want to run by us? Email Adam McLane at adam@theyouthcartel.com</p>

<hr>
<a href="/store/affiliates/">Go to your affiliate page</a>


			          </div>
			        </li>
                      <li>
			          <input type="radio" name="tabs" id="tab8">
			          <label for="tab8">Edit Details</label>
			          <div id="tab-content8" class="tab-content animated fadeIn">
                  <?php
	
	printf(
		__( 'Hello <strong>%1$s</strong> (not %1$s? <a href="%2$s">Sign out</a>).', 'woocommerce' ) . ' ',
		$current_user->display_name,
		wp_logout_url( get_permalink( wc_get_page_id( 'myaccount' ) ) )
	);

	printf( __( 'From your account dashboard you can view your recent orders, manage your shipping and billing addresses and <a href="%s">edit your password and account details</a>.', 'woocommerce' ),
		wc_customer_edit_account_url()
	);
	?>
   <br /><br /> <hr><br />
			          <?php wc_get_template( 'myaccount/my-address.php' ); ?>
			          </div>
			        </li>
			    </ul>
	      	</div></div>

style.css

/*---- My Account Tabs ----------*/
	      .tabs {
	        width: 100%;
	        float: none;
	        list-style: none;
	        position: relative;
	        padding: 0;
			margin-bottom: 5em;
	      }
	      .tabs li{
	        float: left;
	      }
	      .tabs label {
	          display: block;
	          padding: 10px 20px;
	          border-radius: 2px 2px 0 0;
	          color: #c60000;
	          font-size: 18px;
	          font-weight: normal;
	          background: rgba(255,255,255,0.2);
	          cursor: pointer;
	          position: relative;
	          top: 3px;
	          -webkit-transition: all 0.2s ease-in-out;
	          -moz-transition: all 0.2s ease-in-out;
	          -o-transition: all 0.2s ease-in-out;
	          transition: all 0.2s ease-in-out;
	      }
	      .tabs label:hover {
	        background: #e6b2b2;
	        top: 0;
	      }
	      
	      [id^=tab]:checked + label {
	        background: #c60000;
	        color: white;
	        top: 0;
	      }
	      
	      [id^=tab]:checked ~ [id^=tab-content] {
	          display: block;
	      }
	      .tab-content{
	        z-index: 2;
	        display: none;
	        text-align: left;
	        width: 100%;
	        line-height: 140%;
	        padding-top: 10px;
	        padding: 15px;
	        position: absolute;
	        left: 0;
	        box-sizing: border-box;
	        -webkit-animation-duration: 0.5s;
	        -o-animation-duration: 0.5s;
	        -moz-animation-duration: 0.5s;
	        animation-duration: 0.5s;
	      }

Thanks! This is terrific! Makes my account page much more efficient. Just wondering how to add space between the tabs and the content. I have tried adding padding and margins, but I don't seem to be adding to the right line in css. Any suggestions?

Oh! Adding a paragraph did the trick!
But now I have another question....how do I add information to the tab? Do I have to add another field to the registration page? I want to add a unique page link for each user.

thoses pages are now endpoints in woocommerce since 2.1

When clicking on edit address link from the edit details section it refreshes to my-account/edit-address/billing/ and displays the orders on top of the edit address section. Is there a way to stop this happening or better yet have the edit address endpoint load in the tabs? Thanks for your help.

@d1ch0t0my - For me, when I click "edit" address it takes me to /store/account/edit-address/billing/ or /store/account/edit-address/shipping/

I think this might be something in your WC settings, you would define those pages there.

General note to those who have used this snippet. Just updated it based on feedback from others. You no longer put this in your child theme, you can edit the files in the plugin folder, woocommerce>templates>myaccount>my-account.php

Also, the CSS can go right in your child theme CSS.

My account page shows the 5 tabs (with a radio button above it still) and that is it. Nothing happens when I click on the different items. There is also no text above or below the tabs, literally just the tabs with the radio button and text show. Any ideas?

@Levy4u - I made a slight modification above in the instructions regarding the template structure. You might want to poke around here to make sure you're understanding how to override the templates - http://docs.woothemes.com/document/template-structure/

Hi, I got the same problem as Levy4u http://prntscr.com/7omm2r

@mclanecreative - Hi there, great code this worked like a charm. I have one question though. Because of the use of tabs the height on the tab pages is set to a fixed height. This way when the content in these tabs expand, they go over the footer.
Is there a way to set the height of the tab pages to scale with the contents within?

In reply to "You no longer put this in your child theme, you can edit the files in the plugin folder..."

From:
http://docs.woothemes.com/document/template-structure/
"Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customizations will be lost."

Here's a bootstrap version - https://gist.github.com/ryanbeymer/d0c5e8711343f4d6761b

Small typo on the Instructions on top of this Gist:
"add my-account.php to your /woocommerce/myaccounts/"
"add my-account.php to your /woocommerce/myaccount/"

I had the same problem as @Levy4u,just the tabs,overlapping and without any content under them. However,I manged to use the Bootstrap version provided here-https://gist.github.com/ryanbeymer/d0c5e8711343f4d6761b ,which is working alright. Thanks @ryanbeymer for the saving. You can see it at work here http://xsupa.co.ke/my-account/

Fantastic! Thanks for sharing

Would be good to add 'edit your password and account details.' page from /my-account/edit-account/ to this as well.. If I do it I'll paste an update'

EDITED:

Thanks for the code!

Modification to get rid of the radio buttons:

Code was removed in my previous comment

input type="radio" checked name="tabs" id="tab1" style="display:none;"

Big question; how can I make this responsive? I have six tabs and everything seems to be on top of each other on mobile devices.

Hi everyone, I used this fantastic code to create tabs in “my Account” page on my site, but when I go to select the addresses tab and try to click the button change address, this last is not working. The link button is present but seem disabled.
link: http://www.otticamirage.com/mio-account/

Wow... I'm not getting comment notifications so I didn't see any of this conversation from my last comment. I'm working on an updated version of this right now... stay tuned. (And thanks for the comments, really want to figure out something for responsive... makes total sense and I'm assuming a simple CSS fix.)

I'm looking specifically to add Expression Engine events tab, affiliates tab, and some other modifications.

@Miq3l Thank you, made that fix just now.

@samiotis It should actually be responsive. But if you eliminated the tabs, you'll need to create % widths to whatever it is you replaced it with. If you look at the CSS above you'll see it here: (among other places)

.tabs {width: 100%;

Share what you're doing... I'd love to see it!

hi @mclanecreative. first thank you for this customization code. However after following all your steps the result was i was not able to see tabs on my page but all radio buttons, any idea why?

In which style.css i had to add css code ??

@abhilaksh1 any customizations should go in your child theme CSS. Cool?

Can we still use this code for making tabs in the current version of WooCommerce? I understand that this should be a template override. I just tried it and wow, this doesn't look good at all =(

Guess that's the end of that for me...
The new WooCommerce is going to have tabbed my account page:
https://woocommerce.wordpress.com/2016/04/21/tabbed-my-account-pages-in-2-6/

https://github.com/woocommerce/woocommerce/wiki/2.6-Tabbed-My-Account-page

Just FYI... I basically stopped updating this for my own site and we're now using the default Storefront look at it. If someone else wants to run with this, please do!