1

I have an anchor link on my product pages to a div further down the page. The div only shows if there is content in it.

Is it possible to write an if statement for the link based on the div ID? If #ID exists?

This is the div:

<div class="upsells products" id="tab-accessories">
            <!--Change related products text-->
            <?php 
            global $post;
            //If Product Page is a Model page, display "Reccomended Accessories"
                if ( has_term( 'Models', 'product_cat', $post->ID ) ) {
        echo '<h2>' . 'Reccomended Accessories' . '</h2>';
                }
            //If Product Page is an Accessories page, display "Customers Also Bought"
                if ( has_term( 'Accessories', 'product_cat', $post->ID ) ) {
        echo '<h2>' . 'Customers Also Bought' . '</h2>';
                }
                ?>
        <?php woocommerce_product_loop_start(); ?>
            <?php while ( $products->have_posts() ) : $products->the_post(); ?>
                <?php wc_get_template_part( 'content', 'product' ); ?>
            <?php endwhile; // end of the loop. ?>
        <?php woocommerce_product_loop_end(); ?>
    </div>

This is the link:

        <li><a href="#tab-accessories">Accessories</a></li>
  • 1
    Client side, yes Server side, depends. Need to see your code for that. – jdm2112 Sep 8 '16 at 19:40
  • Edited into my question – crossbeats Sep 8 '16 at 20:11
  • You should do this with JavaScript. What is the unique selector of those links so as to avoid getting into any conflicts? e.g #some_container li a – Samuel Elh Sep 8 '16 at 20:50
  • #product-menu li a – crossbeats Sep 8 '16 at 20:54
1

This can be done but we need to see the if statement that is around your div. Right now you that code above will still present the div, just not the content IN the div. You need to wrap that link code in the same if statement that your div is in.

example: if your div if statement is:

if ( has_term( 'Accessories', 'product_cat', $post->ID ) ) {
echo '<div class="upsells products" id="tab-accessories">CONTENT OF DIV</div>';
}

wrap your link earlier in the code with the same if statement:

if ( has_term( 'Accessories', 'product_cat', $post->ID ) ) {
echo '<li><a href="#tab-accessories">Accessories</a></li>';
}

whatever happens to one will be the same as the other.

0

You're approach this the wrong way, I think. Even before you are outputting the link and the div in your template you should have a condition that tests whether there is anything to show in the loop. You are now running that test inside the div: $products->have_posts(). Unfortunately, since that loop is specific to WooCommerce I don't know which test to use.

If there is nothing to show, your template should not include link and div. That is better than trying to repair it afterwards with css and/or javascript.

0

use the jquery method.

     
    $(window).load(function(){
    if ($('your_div').is(":empty")){
    $('your_div').hide();
    } });
    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.