Support » Plugin: Custom Product Tabs for WooCommerce » Can’t Click on Tabs

  • Resolved artichoku

    (@artichoku)


    So all the tabs are made, but you can’t actually click on the Tabs.

    WordPress Version: 5.2.1

    Theme: Regina Lite

    Woocommerce Version: 3.6.4

    Custom Product Tabs for WooCommerce Version: 1.6.10

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author yikesitskevin

    (@yikesitskevin)

    Hi @artichoku,

    I am not seeing any custom tabs on the product you linked. Am I missing something? Does this product have custom tabs?

    Let me know.

    Thank you,
    Kevin.

    Hey there, and yes. It’s strange that you can’t see the tabs, as it’s showing me with no problems.

    here’s a screenshot:

    Screen Shot

    Plugin Author yikesitskevin

    (@yikesitskevin)

    Hmm. Maybe it’s cached for non-logged-in users? I only see the description tab.

    interestingly enough, I don’t have any tabs at all on Google Chrome. My screenshot was from Firefox. Does that make any sense??

    • This reply was modified 1 month, 1 week ago by  artichoku.
    Plugin Author yikesitskevin

    (@yikesitskevin)

    That doesn’t make sense haha. Especially because I just went to your site on Firefox and I still don’t see any tabs: https://imgur.com/a/Q8zjTKt.

    Weird!

    hmmmmmm. You may be correct in that it is currently a cache problem for logged out users. If it clears up, I’ll let you know when to take another peek… soooo weird…

    Okay so the cache has been cleared and is now showing the tabs, but they can’t be clicked on.

    Plugin Author yikesitskevin

    (@yikesitskevin)

    I am still not seeing the tabs…

    alright it is now showing me the tabs without being logged in on both chrome and on firefox. Don’t know what was up with that crazy cache not clearing up correctly…

    Plugin Author yikesitskevin

    (@yikesitskevin)

    I see the tabs! And the issue is definitely happening for me. This is weird. I can see the WooCommerce JS file that drives the tab functionality but it is not being activated. It’s not being activated for the default Description tab either.

    I am also seeing an “auto scroll” or “smooth scroll” behavior that is happening. If I force the tab content to be visible (e.g. https://imgur.com/a/5Jay44T), then clicking the tab title will automatically scroll me to that tab.

    This makes me think that whatever is controlling the “smooth/auto” scroll is hijacking WC’s default behavior and is breaking it. Does that make sense? Do you know the scrolling behavior I am talking about? Do you know where that’s coming from?

    it *may” be part of of the theme. Give me a few and i’ll let you know if that is the culprit or not. Glad you can finally see the tabs, lol!

    Ok so it’s definitely a theme conflict. On switching to another theme, the problem resolved itself. I’ll do some digging in the theme’s php files and see if I can locate the conflict. I’ll let you know how it goes… Thanks again for your assistance.

    Plugin Author yikesitskevin

    (@yikesitskevin)

    Hey no problem. Look for JS files! The conflict is almost certainly being driven by a JS file that is hooking into anchor tags (<a>) and is most likely using preventDefault() and/or stopPropagation(). You could try removing your theme’s JS files one by one to isolate the conflicting file.

    ok so i did a search through all of the JS files in the theme and only one file contains either of the codes that you mentioned. It was in fact related to “smooth scrolling” and “waypoints”, but upon removing the code, the tabs still weren’t working. I’ll have to do some further investigation once I’m at home and done with work.

    	/* ---------------------------------------------------------------------- */
    	/*  Back to Top & Waypoint
    	/* ---------------------------------------------------------------------- */
    
    		$( '.back-to-top' ).on( 'click', function( event ) {
    			event.preventDefault();
    			$( 'body,html' ).animate({
    				scrollTop: 0 }, 1000
    			);
    		});
    
    		$( '#footer' ).waypoint(function() {
    			$( '.back-to-top' ).fadeIn( 1000 );
    		}, { offset: '50%' });
    
    		/* ---------------------------------------------------------------------- */
    		/*  Smooth Scrolling
    		/* ---------------------------------------------------------------------- */
    
          $( 'a[href*="#"]:not([href="#"])' ).on( 'click', function() {
              var target;
              if ( location.pathname.replace( /^\//, '' ) === this.pathname.replace( /^\//, '' ) && location.hostname === this.hostname ) {
                  target = $( this.hash );
                  target = target.length ? target : $( '[name=' + this.hash.slice( 1 ) + ']' );
                  if ( target.length ) {
                      $( 'html,body' ).animate({
                          scrollTop: target.offset().top
                      }, 1000 );
                      return false;
                  }
              }
          });

    Again, thank you…

    Plugin Author yikesitskevin

    (@yikesitskevin)

    Hi @artichoku,

    Are you sure the changes weren’t cached still? Have you tested again over the weekend? That snippet looks like the culprit to me.

    Let me know.

    Thank you,
    Kevin.

Viewing 15 replies - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.