Hide Specific DIV Class if Other Class is Present

Question

I am working with wordpress. I am trying to hide the add to cart button on the product page until the customer answers all the questions. The plugin I use provides options for the custom to select. Step 1 Step 2 Step 3 etc. When they get to the last step the "Continue" button deactivates/disables and the class changes to .owl-next button disabled

So I am trying to use that class as a trigger to show the add to cart button at the time and hide it until that class is active. So Far I am able to hide the add to cart button but I cant get the add to cart to show then. Here are the codes I tried so far in the header.

<script>
var aVisible = $('.owl-next.button').css('display');
if (aVisible == 'none') {
}
</script>


<script>

if($('.owl-next.button').length){
   $('.single_add_to_cart_button.button.alt').hide();
}`enter code here`
</script>

<div class="owl-nav"><a class="owl-prev button">Back</a><a class="owl-next button disabled">Continue</a></div>
<button type="submit" name="add-to-cart" value="267" class="single_add_to_cart_button button alt">Add to cart</button>

Changes on last step:

<div class="owl-nav"><a class="owl-prev button">Back</a><a class="owl-next button disabled">Continue</a></div>
<button type="submit" name="add-to-cart" value="267" class="single_add_to_cart_button button alt">Add to cart</button>

maybe best is to use the session or database , so once answers are given it is recorded for next page/time ... javascript var set on the fly, dies once page is closed or refreshed.... — G-Cyrillus, Oct 11 '17 at 20:19
That would be nice but its a step process with the plugin I am using. That customization is beyond my skills — user3610219, Oct 12 '17 at 02:56

William-H-M · Answer 1 · 2017-10-13T12:55:45.863

Add a listener to that button and check if has the class disabled and then show your button something like:

$(document).ready(function(){
   $(document).on('click', '.owl-next.button', function() {
     let aVisible = $(this).hasClass('disabled');
      if (aVisible) {
       $('.single_add_to_cart_button.button.alt').show();
       }
    });
});

.hasClass() is checking at the moment you do a click on the button and will return a bool and then when is true will show again your button.

EDIT: As per the error of php syntax you must:

If you include the script in the php file then you will be get the error you could either replace the <?php with <script> and ?> with </script> syntax error, unexpected '(', expecting variable (T_VARIABLE) or '$'

Or use the syntax like:

jQuery(document).ready(function(){
   jQuery(document).on('click', '.owl-next.button', function() {
     let aVisible = jQuery(this).hasClass('disabled');
      if (aVisible) {
       jQuery('.single_add_to_cart_button.button.alt').show();
       }
    });
});

This will avoid conflicts with php files.

if i wrap in and place in header i get in console firs two lines in script TypeError: $ is not a function

Remember always to include first JQuery library at the head of script, that way you will not get error.

In case still errors appear, wrap it with this:

jQuery(document).ready(function($){
   $(document).on('click', '.owl-next.button', function() {
     let aVisible = $(this).hasClass('disabled');
      if (aVisible) {
       $('.single_add_to_cart_button.button.alt').show();
       }
    });
});

This way should work, source jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function

EDIT 2: From wordpress stackexchange, it seems like it's better to wrap the document.ready of other way:

(function($) {
    $('.owl-next.button').click(function() {
         let aVisible = $(this).hasClass('disabled');
          if (aVisible) {
           $('.single_add_to_cart_button.button.alt').show();
          }
    });
})(jQuery);

Hello. I tried adding that to functions.php and to the header no go. Page cannot be displayed with this code. Maybe something I am doing wrong? — user3610219, Oct 12 '17 at 02:10
That is weird could I'd wrap it with ready function but should give no error, maybe does an error appear on your console, if does can you paste what it say here. — William-H-M, Oct 12 '17 at 03:37
Parse error: syntax error, unexpected '(', expecting variable (T_VARIABLE) or '{' or '$' in — user3610219, Oct 12 '17 at 11:10
for some reason none of them work on my wordpress site. It has no affect. — user3610219, Oct 13 '17 at 03:29
@user3610219 see edit 2 maybe this time will work, this article could help too https://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/ — William-H-M, Oct 13 '17 at 13:12

Hide Specific DIV Class if Other Class is Present

1 Answers1