Wordpress: Customizing the WooCommerce My Account Page with Tabs using CSS & HTML

WooCommerce has made creating and managing a WordPress e-commerce store relatively easy. One of the things I like best is the relative ease by which you can customize it to work for your particular needs.

Over the past few months, I’ve found myself increasingly jealous of the My Account page on WooThemes, whereas the My Account page using the theme, Storefront, was pretty lame by comparison.

So I spent a couple hours and added some simple tabs to the My Account page at The Youth Cartel and wanted to pass along how I did it.

Level of difficulty: Low/Medium

Time Needed: 15 minutes, more to perfect the CSS for your site.

Tools Needed: FTP client, HTML editor

Step Zero

Back up your theme.

Step One

The first thing we’re going to do is make sure that these changes are revision proof by storing this customization inside the right place. That way, the next time WooCommerce releases and update you don’t have anything to worry about. 

1. Copy my-account.php from /wp-contents/plugins/woocommerce/templates/myaccount/my-account.php locally.
2. Create the following folders in your theme folder: yourtheme/woocommerce/myaccount/

(Learn more about overriding the WooCommerce templates)

Note: You shouldn’t be caching this page anyway. But if it’s cached, you might need to clear the cache to see the changes you make above. Actually, save yourself some time and make sure that page isn’t cached…

Step Two

Now that you’ve got a local back-up and a properly configured way to revision proof these customizations, we’ll make the change.

1. We’re going to replace most of the content of the original my-account.php with HTML that’ll become our tabs. Here’s my code.
2. After that, we’re going to add the CSS for the tabs into your child theme’s style.css file. (Alternately, you could add this to the custom CSS section within theme options. (I prefer the child theme option, but either way works.) Here’s my CSS.

	<?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>

view rawmy-account.php hosted with  by GitHub

	/*---- 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;
	}

view rawstyle.css hosted with  by GitHub

Step Three

Head back to your My Account page and see the changes on your site. Lastly, customize the tabs for your own purposes, add/delete tabs, customize the CSS, etc.

Questions, Problems, or Improvements?

Leave me a comment below and I’ll do my best to help you get it set-up.