Code for creating tabs on My Account page does not work

[Gizan86]

Hi,

I want to create tabs on my account page just as here:

http://www.mclanecreative.com/customizing-the-woocommerce-my-account-page-with-tabs-using-css-html/

I followed the exact same steps as is described but somehow the code does not seem to be working, as the my-account page is exactly the same with the code installed.

What I’ve done is:
-I copied the my-account.php to my child theme in the folder wp-content/themes/dante-child/woocommerce/templates/myaccount

-I removed the code and replaced it with:

<?php
/**
 * My Account page
 *
 * @author 		WooThemes
 * @edited by     McLane Creative
 * @package 	WooCommerce/Templates
 * @version     2.0.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>
			          </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">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/newsletter/youtube-you-can-use-archives/">YouTube You Can Use</a></p>
                       <p><a href="http://theyouthcartel.com/downloads/">Cartel Product Samples</a></p>
                       
			          </div>
			        </li>
                      <li>
			          <input type="radio" name="tabs" id="tab5">
			          <label for="tab5">Edit Details</label>
			          <div id="tab-content5" class="tab-content animated fadeIn">
			          <?php wc_get_template( 'myaccount/my-address.php' ); ?>
			          </div>
			        </li>
			    </ul>
	      	</div></div>

Any idea what I’m doing wrong?
Thanks

[laranz – SUPPORT]

Hi,

The folder structure for my-account.php is woocommerce/myaccount/my-account.php make sure you create the exact in the child theme too, and also make sure you put the styles they noted in the style.css

Let us know,

Thanks,
laranz.

[Gizan86]

Thanks Laranz,

You were right, my file path was incorrect. After working with it for a long time, I did not mean to get it the way that I need and I noticed the tabs are very messy on mobile devices. In stead, would you be so kind to help me with some code for the following.

I would like to create in the my account page two extra tabs where I can add some custom pages (html). Of which one should be the one that is open by default. I have been playing with the my-account.php and managed to get an extra custom link in the menu but cannot figure out where and how to put my html in there.

Thanks for the help!

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please create your page with php extention and place at myaccount directory. You can link and include this at myaccount.php.

Thanks 🙂
With Best Regards
Mohammad

[Gizan86]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use shortcode like given below example.

<?php echo do_shortcode('your shortcode 1');
      echo do_shortcode('your shortcode 2');
?>

Thanks 🙂
With Best Regards
Mohammad

[Gizan86]

Thanks that works!

What is the recommended way to translate the .php page that I included in the menu? Normally I would create two different pages on the two different url’s of both languages but now that does not seem to work since the account page is just the shortcode [woocommerce_my_account].
I have created the extra tabs and pages in english and wish to translate the self created .php page also in Dutch when the dutch translation is on.

Thanks!

[Gizan86]

Best option would be if I could create two different .php pages (for the tabs (on English and one Dutch)) and refer to them through the account.php file based on the language of the account page..

[laranz – SUPPORT]

Hi,

If you put directly the content there, then you may do something with the ICL_LANGUAGE_CODE and check the language and put it in the same file, for coding help refer this http://wpml.org/documentation/support/wpml-coding-api/ you are using WPML for multilingual right??

Let us know,

Thanks,
laranz.

[Gizan86]

This reply has been marked as private.

[Gizan86]

This reply has been marked as private.

[laranz – SUPPORT]

Hi,

I do wonder why the first didn’t work, but including the files works. I suggest you to contact the WPML support guys about their opinion they are happy to help you to formulate the code.

Let us know,

Thanks,
laranz.

[Gizan86]

This reply has been marked as private.

[laranz – SUPPORT]

Hi,

This is the default style for the accounts tab, you can try that with the correct CSS selector in the new markup.

ul.my-account-nav > li a:before {
    content: "";
    display: block;
    float: right;
    font-family: FontAwesome;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

Its present in style.css in around line #12778

Let us know,

Thanks,
laranz.

[Gizan86]

This reply has been marked as private.