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-->
            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(); ?>

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, 2016 at 19:40
  • Edited into my question
    – crossbeats
    Sep 8, 2016 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
    – Ismail
    Sep 8, 2016 at 20:50
  • #product-menu li a
    – crossbeats
    Sep 8, 2016 at 20:54

3 Answers 3


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.


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.


use the jquery method.

    if ($('your_div').is(":empty")){
    } });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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