questions

How could I hide an tag if the tag is empty

Rate this post

I want to hide the second phone <i> tag if the <a> tag is empty. The phone numbers are going to be pulled in from a Google Sheet using SheetDB and displayed with PODS short codes.

Here is the code:

    <p>Get my free no-obligation quote today: <span><i class="fa fa-phone" aria-hidden="true"></i><a href="tel:<?php echo do_shortcode('[pods name="wpwc_replace_fields" slug="51" field="phone_number"]'); ?>"> <?php echo do_shortcode('[pods name="wpwc_replace_fields" slug="51" field="phone_number"]'); ?></a></span><br />
    <span><i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:<?php echo do_shortcode('[pods name="wpwc_replace_fields" slug="142" field="phone_number_2"]'); ?>"><?php echo do_shortcode('[pods name="wpwc_replace_fields" slug="142" field="phone_number_2"]'); ?></a></span></p>

I don’t know if this can be done simply with CSS, or more likely javascript, but any advice would be very much appreciated!

 

✔️Solution:

In WordPress, this is usually done with php.

Try replacing your code with:

    <?php
        $first_phone_number = do_shortcode('[pods name="wpwc_replace_fields" slug="51" field="phone_number"]');
        $second_phone_number = do_shortcode('[pods name="wpwc_replace_fields" slug="142" field="phone_number_2"]');
    ?>
    
    <p>Get my free no-obligation quote today: <span><i class="fa fa-phone" aria-hidden="true"></i><a href="tel:<?php echo $first_phone_number; ?>"> <?php echo $first_phone_number; ?></a></span><br />

    <?php if ($second_phone_number): ?>
        <span><i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:<?php echo $second_phone_number; ?>"><?php echo $second_phone_number; ?></a></span>
    <?php endif; ?>
    </p>

Using variables you will also save server resources by not calling do_shortcode() twice for each phone number 🙂

Leave a Reply

Your email address will not be published.

Back to top button