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 [email protected]</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;
	      }

@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!