[j rParticipant]

Hi,
I added some tabs to woocommerce my-account template to overwrite it via child theme.
I did this by coping over div tabs I already created on a WP page with VC that work fine on desktop / mobile.

Tabs in template work as they should on desktop but on mobile the tab nav doesn’t open the container it only moves the tabs up and down (seems to be missing java output in mobile / responsive)

NOTE: Tabs and accordions work fine across site / mobile when created in WP pages, VC & short codes it seems to be template / raw html / php related issue.

Am I missing a java output globally or in the header?
Any suggestions?

Code below:

<?php
/**
 * My Account page
 *
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.0.0
 */

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

wc_print_notices(); ?>

        
  <div id="x-content-band-1" class="x-content-band vc man" style="background-color: transparent; padding-top: 0px; padding-bottom: 0px;">
<div class="x-column vc whole" style="">
<ul class="x-nav x-nav-tabs four-up none">
<li class="x-nav-tabs-item active">
<a href="#myaccount">MY ACCOUNT</a>
</li>
<li class="x-nav-tabs-item">
<a href="#myorders">MY ORDERS</a>
</li>
<li class="x-nav-tabs-item">
<a href="#mysubscriptions">MY SUBSCRIPTIONS</a>
</li>
<li class="x-nav-tabs-item">
<a href="#paymentmethods">PAYMENT METHODS</a>
</li>
<li class="x-nav-tabs-item">
<a href="#mytickets">MY TICKETS</a>
</li>
<li class="x-nav-tabs-item">
<a href="#trackorder">TRACK ORDER</a>
</li>
<li class="x-nav-tabs-item">
<a href="#update">UPDATE</a>
</li>
<li class="x-nav-tabs-item">
<a href="#search">SEARCH</a>
</li>

</ul>
<div class="x-tab-content">

<div id="myaccount" class="x-tab-pane fade fade active in">
  
    <div class="x-container" style="">

 <p class="myaccount_user">
                        <h2><?php
	printf(
		__( 'Hi %1$s!', 'woocommerce' ) . ' ',
		$current_user->display_name); ?></h2>
          <p class="account"><h3 style="margin-bottom:5px;">It is <?php echo date("l, F j, Y")?> - <?php date_default_timezone_set('EST'); echo date('g:i A T'); ?></h3></p>
                        
	<p class="account"><?php
	printf(
		__( 'Welcome to your dashboard %1$s.', 'woocommerce' ) . ' ',
		$current_user->display_name); ?></p>
    
    
    <p class="account"><?php
	printf( __( 'From here you can access all your account information, as well as access your subscriptions, view order information and update your account details. If you need technical support please submit a ticket in the "My Tickets" tab.', 'woocommerce' ),
		wc_customer_edit_account_url()
	);
	?></p>
   
   
    
    <div class="x-container" style="margin-top:20px;margin-bottom:20px;padding:3px 10px 15px;border:1px solid #dddddd;"><p class="account"><?php wc_get_template( 'myaccount/social-profiles.php' ); ?></p></div>
    

    <div class="x-container" style="margin-top:20px;margin-bottom:20px;padding:3px 10px 15px;border:1px solid #dddddd;"><p class="account"><?php wc_get_template( 'myaccount/form-edit-address.php' ); ?></p></div>
    
    <div class="x-container" style="margin-top:20px;margin-bottom:20px;padding:3px 10px 15px;border:1px solid #dddddd;"><p class="account"> <p class="account"><h2>SPECIAL OFFERS</h2>
	<?php
	printf( __( 'Did you know, as a Media1Shop client, you have access to client only special offers and promotions? Each special offer we have arranged will be listed in this section.', 'woocommerce' ),
		wc_customer_edit_account_url()
	);
	?></p></div>
    
    
   <div class="x-container" style="margin-top:20px;margin-bottom:20px;padding:3px 10px 15px;border:1px solid #dddddd;"><p class="account"><?php wc_get_template( 'myaccount/form-edit-account.php' ); ?></p></div>
   
   
 

</p>

 </div>
</div>

<div id="myorders" class="x-tab-pane fade"><?php wc_get_template( 'myaccount/my-orders.php', array( 'order_count' => $order_count ) ); ?></div>
<div id="mysubscriptions" class="x-tab-pane fade"><?php WC_Subscriptions::get_my_subscriptions_template(); ?></div>
<div id="mytickets" class="x-tab-pane fade"><?php wc_get_template( 'myaccount/my-tickets.php' ); ?></div>
<div id="paymentmethods" class="x-tab-pane fade"><?php wc_get_template( 'myaccount/saved-cards.php' ); ?></div>
<div id="update" class="x-tab-pane fade"><?php wc_get_template( 'myaccount/my-updates.php' ); ?></div>
<div id="search" class="x-tab-pane fade"><?php wc_get_template( 'myaccount/search.php' ); ?></div>
<div id="trackorder" class="x-tab-pane fade"><?php wc_get_template( 'myaccount/order-tracking.php' ); ?></div>

</div>

</div>
</div>         

Any help would be much appreciated.
Best Regards

[RadModerator]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[j rParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

1. You’re using custom tabs, and this tabs aren’t generated by cornerstone. Please add data-toggle="tab" to your tab links

Eg.

<a href="#myaccount" data-toggle="tab">MY ACCOUNT</a>

2. Yes it’s updated, but :

a. caching plugin is still active
b. cornerstone is not active
c. X shortcode is still active
d. X theme 4.0.3 is installed at your child theme instead at parent/main theme.

Please clear your caching plugin and disable it, then activate your cornerstone, then deactivate your X shortcodes. Then update your main theme and not your child theme. If you have customization at your child theme then I’m afraid that they are already overwritten.

3. You can have once license per client’s project and support coverage should be the same.

4. I’m not sure about that, but you may contact us here http://theme.co/x/contact/

Thanks!

[j rParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

I created the same content from newly installed wordress and X theme and I’m not getting the same problem as yours. Do you have any existing customization related to tabs? Though, I can confirm your problem.

And this issue is actually present from older version of X theme, though I’m not sure why it’s still the same at your end. Since it’s happening on any plugin as you said, then would you mind disabling all plugins first before I could retry testing it? And please remove any custom code related to nivoSlider and keep a backup copy of it. Optimization plugin should be disabled too, I still can see Wp Optimize.

Or if you don’t wish to touch your existing setup, you can setup the same installation on different folder for testing/staging.

Thanks!

[j rParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Looks like there is more, but you should fix the internal server error first.

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Your site becomes slower, and there lot more errors. I can’t really tell what’s the source of those issues since I can’t get any error logs. It’s best if you can get those error logs from your hosting provider.

And another thing, your site is in multi site, have you tried increasing its memory limit? Like from here http://docs.woothemes.com/document/increasing-the-wordpress-memory-limit/

Thanks!

[j rParticipant]

This reply has been marked as private.

[NicoModerator]

Hi There,

Would you mind asking this error to your host. Most of the error shown aboave is caused by an server configuration. Let us know how it goes.

Thanks.

[j rParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

I just noticed that it works on first load on iPad, then stopped working after first click. This is common issue between click event and mobile touch event. Apparently, your plugin uses click event on mobile too that causes this issue, it should use touch event for mobile.

For example,

$('a').on( 'click',  function ( e ) {

//Do stuff upon clicking for desktop link
e.stopPropagation();

} );

$('a').on( 'touchend',  function ( e ) {

//Do stuff upon clicking for mobile link
e.stopPropagation();

} );

Your plugin’s script should be both desktop ad mobile friendly, and should able to detect which is mobile and desktop. If it’s mobile, then it has to unregister the click even registered for desktop.

$('a').off('click');
$('a').on( 'touchend',  function ( e ) {

//Do stuff upon clicking for mobile link
e.stopPropagation();

} );

I can’t really provide a complete fix since they are 3rd party plugin. But they should be mobile friendly.

Thanks!

[j rParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Yes, same finding as mine. And more likely 3rd party conflict since the builtin one works. I’ll continue investigation but I can’t guarantee faster result. And more likely, I’ll just add this on our list (conflicting plugins).

Thanks!

[Author]

Posts