[Resolved] Split: Whatsapp link (Click to chat) shortcode – hide empty elementor widget content

[Author]

Posts

[FelipeP5703]

Minesh, sorry to bother you again. I only need one more help with this. I researched online and found the function

if(!empty($number))

Which will only show if the value is not empty. Great, but the problem is that it leaves unnecessary space. (See image)

I tried adding the CSS code to hide the empty div

div:empty {
   display: none;
}

But it does not remove the space. I believe it will only hide the div and not remove it.

So I tried the Jquery from this link https://stackoverflow.com/questions/33544794/how-to-remove-empty-div-with-any-class-by-php

I add a html elementor widget to the top of the page and added the following code with no success.

<script>
$('.elementor-widget-container').each(function(i, obj) {
    if( $(this).is(':empty') ) { 
          $(this).remove();
    }
});
</script> 

Is there another php function that I can add to remove the "space" or div when the fields are empty?

This is my php function code in function.php child theme

$number = get_post_meta($post->ID,'wpcf-whatsapp',true);
	if(!empty($number)){
$namepost = $post->post_title;
$text = 'Olá, '.$namepost.' vi seu anúncio no site Destack Terapias ( <em><u>hidden link</u></em>)';
  
$link = '<a href="<em><u>hidden link</u></em>'.$number.'&text='.$text.'"><img class="alignleft size-full wp-image-299" src="<em><u>hidden link</u></em>" alt="" width="25" height="25">'.$number.' (Clique para agendar)</a>';
return $link;
	}
}
add_shortcode('show_whatsapp','func_show_whatsapp');

Thank you

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - I checked and the extra space is coming from the Elementor element. I search on google and I found the folloiwng:
=> hidden link

As this issue is from Elementor, would you mind to contact Elementor support and ask to help you out as this is not from Toolset.

[FelipeP5703]

I contacted Elementor and they do not have a way to hide empty fields yet. So I'll have to find a custom javascript or function to do it.

But after Elementor's upgrade, it's now having conflicts with Toolset Views, Forms, and Type plugins. I contacted them and gave them my credentials to check out the site. I cannot do anything right now, I need to wait for them to fix it.

I'll keep you posted!

[Minesh]

Ok fine - thank you for the update. Please keep us updated.

[FelipeP5703]

So they have fixed the issue with the plugins. But I still can't get the white space out.

I tried the following codes with no success. Note: I added an html widget on Elementor's single post to add the script to the page.

<script>
$('div.elementor-widget-shortcode:empty').hide();
</script>

<script>
$(document).ready(function() {
   str = $('div.elementor-widget-shortcode').text();
   if($.trim(str) === "") {
     $('div.elementor-widget-shortcode').remove();
   }
});
</script>

<script>
 $('.elementor-widget-shortcode').each(function() {
        var itembubble = $(this);
        if (itembubble.html() == '') {
            itembubble.addClass('hidden');        
        }
    });
    </script>

<script>
    $(document).ready(function() { $('div:empty').remove(); });
</script>

I'm not sure why any of these aren't working. I'm not a coder so I don't know how to do this. Any help would be appreciated!

[FelipeP5703]

My issue is resolved now. Thank you!