Last active
March 27, 2023 23:12
-
-
Save mclanecreative/0531fae62910a5a9343f to your computer and use it in GitHub Desktop.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*---- 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; | |
} |
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/
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!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@abhilaksh1 any customizations should go in your child theme CSS. Cool?