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
– Mihai T, Commented Aug 14, 2018 at 12:04
I tried it on jsfiddle and it works fine. Maybe the problem is where the jquery script is located in the code. — Thanasis1101
– Thanasis1101, Commented Aug 14, 2018 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
– fightstarr20, Commented Aug 14, 2018 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
– Mihai T, Commented Aug 14, 2018 at 12:07

hemnath mouli · Accepted Answer · 2018-08-14 13:18:13Z

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, 2018 at 13:18

hemnath mouli

2,7652 gold badges21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LoicTheAztec Over a year ago

Welcome back hemnath :)

hemnath mouli Over a year ago

@LoicTheAztec That's insane that you still remember me :) BTW you're grindin on woocommerce topics

pixellab · Accepted Answer · 2018-08-14 13:21:52Z

0

Check with

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

}

else{

}

answered Aug 14, 2018 at 13:21

pixellab

6084 silver badges14 bronze badges

Comments

Zysce · Accepted Answer · 2018-08-14 13:23:46Z

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, 2018 at 13:23

Zysce

1,2401 gold badge13 silver badges35 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related