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

How to blur out one of the table lists when WooCommerce Product is out of stock

I have a custom HTML table that represents every product variations in Woocommerce. I want to blur out one of the variations from the table when that product is out of stock. How can I make a condition out of it? Is there any possible ways to make this happen? I made the table using Elementor HTML attribute.
Image of the table

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I managed to do it myself and for future purposes I'll leave the answer here.

    • First I try to get the availability value of the product by using the code below :

      add_filter( 'woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2);
 function wcs_custom_get_availability( $availability, $_product ) {
    $var = "";
    // Change In Stock Text
    if ( $_product->is_in_stock() ) {
        $availability['availability'] = __('In Stock', 'woocommerce');
    }
    // Change Out of Stock Text
    if ( ! $_product->is_in_stock() ) {
        $availability['availability'] = __('Out of Stock', 'woocommerce');
    }
    return $availability;
}

    • Then I created a variable that will store the variation ID of the product

      if ( ! $_product->is_in_stock() ) {
        $var = __($_product->get_id(), 'woocommerce');
    }

    • And lastly make a condition out of it and apply the style for each row. For this example the variation ID is 2049.

    
 if ( ! $_product->is_in_stock() ) {
         $availability['availability'] = __('Out of Stock', 'woocommerce');
        $var = __($_product->get_id(), 'woocommerce');
        // MINI OUT OF STOCK
        if ($var == "2049"){
             echo "<style>.product-matrix #variant-row-1{
                     filter:brightness(0.5);
                     pointer-events:none;
             }</style>";
         }
     }

  2. 0

    You could consider applying a CSS blur() filter function to your appropriate column / cells, which accepts a radius that relates to how severe of a Gaussian blur is applied to the element:

    // The radius accepts a length (e.g. number, px, em, etc.) that indicates how
// severe the blur is (smaller units => more legible)
filter: blur(radius);

    Example

    .blurry {
  filter: blur(4px);
}
    <b>Normal Text:</b> This is an example
<br />
<b>Blurred Text:</b> <span class='blurry'>This is an example</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search