Question 9999 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Jquery tick box to hide out of stock products – Woocommerce

I would like to alter this code so there is another tickbox for if a product is ‘out of stock’. So if the box is checked, it shows out of stock products. If unchecked, it hides them. How do I do this?

<script>
$(function() {
  var status = localStorage.getItem('chkStatus');
  if(status == 'true'){
    $("span.price").css("display", "none");
    $("p.price").css("display", "none");
    $(".tradePriceToggle").attr('checked', true)
  }
  else{
    $("span.price").css("display", "block");
    $("p.price").css("display", "block");
    $(".tradePriceToggle").attr('checked', false)
  }
  $(".tradePriceToggle").click(function() {
    if (this.checked) {
      $("span.price").hide();
      $("p.price").hide();
    }
    else {
      $("span.price").show();
      $("p.price").show();
    }
    localStorage.setItem("chkStatus", this.checked);
  });
});
</script>

Below is similar to what I’m trying to achieve:

.available-on-backorder:has(.product_card) {
    display:none;
}

But this CSS only applies when the box is ticked.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The code needed for this was:

    
<style>
p.hidetradeprice {color: #fff;float: left;margin: 0px 0px -10px 0px;width:250px;font-size: 1em;}
p.hideoutofstock {color: #fff;width:250px;padding:0px;font-size: 1em;}
.tickboxes {margin: 10px 0px 0px 20px;float:left;}
</style>

<script>
$(function() {
  var status = localStorage.getItem('chkOutOfStock');
  if(status == 'true'){
        $("label.stock.available-on-backorder").parents(".product_card").css("display", "none");
        $("label.stock.out-of-stock").parents(".product_card").css("display", "none");
        $(".stockToggle").attr('checked', true)
      } else {
        $("label.stock.available-on-backorder").parents(".product_card").css("display", "block");
        $("label.stock.out-of-stock").parents(".product_card").css("display", "block");
        $(".stockToggle").attr('checked', false)
    }     
  $(".stockToggle").click(function() {
    if (this.checked) {
      $("label.stock.available-on-backorder").parents(".product_card").hide();
      $("label.stock.out-of-stock").parents(".product_card").hide();
    }
    else {
      $("label.stock.available-on-backorder").parents(".product_card").show();
      $("label.stock.out-of-stock").parents(".product_card").hide();
    }
    localStorage.setItem("chkOutOfStock", this.checked);
  });
});
  
</script>

<div class="tickboxes">
       
       <p class="hidetradeprice"><input type="checkbox" class="tradePriceToggle"> Hide Trade Price</p>
       <p class="hideoutofstock"><input type="checkbox" class="stockToggle"> Hide Out Of Stock</p>
       
       </div>

    The code searches for the out-of-stock elements on the page, traces the parent 'box' elements and hides all elements on page corresponding with the rule. Then uses the tick box so that the status stays the seem on page refresh/move until unticked.


  2. 0

    1. in database mark product as OUT of stock OR available.

    2. $(function() {

        //method 1
  $(".tradePriceToggle").click(function() {  //check box click
      if (this.checked) {
          //fetch out of stock product from database and show in div
      }
      else
      {
          // fetch only available stock product from database and show in div
      }   

  }); 



  // method 2 --- fetch all out of and available both product at once, when fetch add class as  .available  and .outofproduct


  $(".tradePriceToggle").click(function() {  //check box click
      if (this.checked) {
          $('.all').hide();  //all product hide
          $('.outofproduct').show();  //show only out of product
      }
      else
      {
          $('.all').hide();  //all product hide
          $('.available').show();  //show only available product
      }
  });

      });

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search