jQuery / Javascript - Detect if WooCommerce store notice html is visible

Question

I am looking for a way to determine with JavaScript / jQuery if the WooCommerce store notice is displayed. The HTML for the store notice looks like this...

<p class="woocommerce-store-notice demo_store" style="display: block;">
    This is a store notice
</p>

I have tried to do this using the following...

jQuery(document).ready(function(){
    if ( jQuery('.woocommerce-store-notice').css('display') == 'none') {
        console.log('Store Notice Hidden');
    } else {
        console.log('Store Notice Visible');
    }
});

But this is telling me that the notice is hidden everytime, even when it is visible.

Could this be something to do with how the store notice get's displayed? Maybe it get's set after the dom has loaded?

well, when or in which case does this notification get shown ? — Mihai T, Aug 14 '18 at 12:04
I tried it on [jsfiddle](https://jsfiddle.net/nm26hrek/8/) and it works fine. Maybe the problem is where the jquery script is located in the code. — Thanasis1101, Aug 14 '18 at 12:05
The notification is displayed on page load, but it's display value seems to be set inline using Javascript. Going to try and work out where it gets set now — fightstarr20, Aug 14 '18 at 12:06
that's the key. to find out when it is shown and you can use that event. But you could try to use `window.on('load')` instead of `ready` — Mihai T, Aug 14 '18 at 12:07

score 2 · Accepted Answer · answered Aug 14 '18 at 13:18

2

The element is removed when the store notice is disabled. The CSS display property is not available hence undefined. Try the below code

jQuery(document).ready(function(){
    if ( jQuery('.woocommerce-store-notice').css('display') == undefined) {
        console.log('Store Notice Hidden');
    } else {
        console.log('Store Notice Visible');
    }
});

answered Aug 14 '18 at 13:18

hemnath mouli

2,617
2
17
35

Welcome back hemnath :) – LoicTheAztec Aug 14 '18 at 16:40
@LoicTheAztec That's insane that you still remember me :) BTW you're grindin on woocommerce topics – hemnath mouli Aug 15 '18 at 06:08

score 0 · Answer 2 · answered Aug 14 '18 at 13:21

0

Check with

if(jQuery('.woocommerce-store-notice').is(':visible')){

}

else{

}

answered Aug 14 '18 at 13:21

pixellab

588
3
12

score 0 · Answer 3 · answered Aug 14 '18 at 13:23

0

you can find what you are looking for here:

http://api.jquery.com/visible-selector/

Btw => JQuery: if div is visible

answered Aug 14 '18 at 13:23

Zysce

1,200
1
10
35

jQuery / Javascript - Detect if WooCommerce store notice html is visible

3 Answers3

Linked