WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[resolved] How to link to a product tab??? (18 posts)

  1. jpanizzoli
    Member
    Posted 8 months ago #

    You'd think it would be easy to link to a product tab from an external link, but I can't figure it out. For example, I'd like to link to the "Reviews" tab so people can jump right to the reviews of a particular product. But when I add a link to #tab-reviews (ie: a href="producturl#tab-reviews") it simply connects to the product page and doesn't jump to the review section.

    Any suggestions???

    http://wordpress.org/plugins/woocommerce/

  2. Roy
    Member
    Posted 8 months ago #

    I believe it does work as in it does "jump" to the section but the tab just doesn't switch is what you mean?

  3. jpanizzoli
    Member
    Posted 8 months ago #

    It doesn't appear to "jump" or switch. To be honest, I'm more concerned about the tab switching so visitors can see the content. If they click the link and show up on the product page, they may get confused since they'll have to click "Reviews" again to actually see the reviews...

    Ideally, someone should click on the link and be taken to the appropriate product page with the reviews tab selected and all content showing...

  4. Roy
    Member
    Posted 8 months ago #

    It doesn't jump because the review tab is not initially shown...It is hidden on page load. So you would probably need JS to help you achieve this.

    Something like this:

    if ( location.href.match(/#tab-reviews/g) !== null ) {
    jQuery( '#tab-reviews' ).show();
    jQuery( 'li.reviews_tab a' ).trigger('click');
    }
  5. jpanizzoli
    Member
    Posted 8 months ago #

    Is there a particular location you suggest I add this? In the header? In a template?

    I'll give it a shot when I know where to put it... thanks!

  6. Roy
    Member
    Posted 8 months ago #

    It depends on your theme...

  7. jpanizzoli
    Member
    Posted 8 months ago #

    OK... I tried adding your javascript in several different locations. In each attempt I placed the code on the product page (via template), so it should have worked if this was a feasible solution.

    Just to be sure I did it correctly, I included the following code in the template:

    <script type="text/javascript">
    
    if ( location.href.match(/#tab-reviews/g) !== null ) {
    jQuery( '#tab-reviews' ).show();
    jQuery( 'li.reviews_tab a' ).trigger('click');
    }
    
    </script>

    Any other suggestions??? I thought this would be simple, but apparently not...

  8. Roy
    Member
    Posted 8 months ago #

    It works, I tested it...If you want help you should really post the URL in question.

  9. jpanizzoli
    Member
    Posted 8 months ago #

    I tried to add the javascript in the header and several template files, but still not working. This is a sample page with the #tab-reviews tab:

    * LINK REMOVED *

    If you scroll down the page you'll see "User Rating" and the star rating next to it. I'm trying to link these stars to #tab-reviews so it opens the tab. Eventually, I'll also include links on other pages and it should land on this page with the tab open...

  10. jpanizzoli
    Member
    Posted 8 months ago #


  11. Roy
    Member
    Posted 8 months ago #

    Ok and where is the area where people are suppose to click to get there?

  12. jpanizzoli
    Member
    Posted 8 months ago #

    Right now, the stars are linking to #tab-reviews (on the page above). The goal is, when someone clicks on the stars it will open the "Reviews" tab so they can read the reviews.

    As mentioned, eventually I'll link from external pages to #tab-reviews and I'd like it to open the "Review" tab upon arriving at the page...

  13. Roy
    Member
    Posted 8 months ago #

    Ok that is why...The stars are on the same page as the product itself. From your description at the beginning, I was assuming you had comments in the sidebar on another page or something and you wanted to redirect to that product page and open up the reviews tab and jump to that section. That is what my script does for you. You can test this by copying the url and paste it back into the browser and it will work. And yes I tested it on your site and it works as expected.

    If you want to jump to it from within the page, you will need some other script to do it.

  14. jpanizzoli
    Member
    Posted 8 months ago #

    OK... to be honest I might be OK with just linking from external pages. I don't necessarily need to link from the same page. The "Reviews" tab will open the reviews on-page. I'll just remove the link from the stars and people will have to be smart enough to click the "Reviews" tab... lol

    Thanks again for your help! This will definitely come in handy on external links ;)

  15. jpanizzoli
    Member
    Posted 8 months ago #

    I finally got a chance to tinker with this script again...

    I noticed in both IE and Mozilla that when you click on the link to /#tab-reviews (from an external page) that it immediately scrolls to the bottom of the page, but the #tab-reviews tab is still not open or active. It simple scrolls to the bottom of the page. I'm assuming since the review info is at the end of the page content, it scrolls to the bottom, but it's still hidden by CSS within the tab...

    Any suggestions? Are you noticing this as well?

    Sample URL: www(dot)cigbuyer.com/reviews/green-smoke/#tab-reviews

  16. jpanizzoli
    Member
    Posted 8 months ago #

    For the record, I did notice when using the "Recent Comments" widget in WordPress, that when you click on a particular comment (ie: /#comment-5) it opens the Reviews tab and scrolls to the specific comment. If I could create a link that always started at the beginning of the comments, it would be perfect! I tried linking to url/#comment (without a specific comment number) but that didn't work either...

  17. jpanizzoli
    Member
    Posted 8 months ago #

    For the record, I found a solution to this problem...

    To link the the "Reviews" tab from any external page, simply add /#comment-1 to the end of your URL. This will open up the "Reviews" tab and display the reviews right from the beginning...

  18. Roy
    Member
    Posted 8 months ago #

    That is awesome find! Good job!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.