Woocommerce - Как я могу добиться эффекта серого наложения на миниатюры?

Question

У меня есть тема Wordpress/Woocommerce. Я создаю продукты с продуктами. И когда продукты на складе, я закодированы ар тег, который отображает «Нет на складе» под миниатюрой продукта, используя следующий код:

function envy_stock_catalog() { 
    global $product; 
    if ($product->is_in_stock()) { 
      return; 
     } else { 
     echo '<div class="out-of-stock" >' . __('out of stock', 'envy') . '</div>'; 
       add_action('init','remove_loop_button'); 
    } 
} 
add_action('woocommerce_after_shop_loop_item_title', 'envy_stock_catalog'); 

Я также хочу миниатюру продукта, чтобы иметь эффект неактивны тотальную , Где изображение продукта все еще видно, но есть прозрачный оверлей с серым оттенком. Кто-нибудь знает, как я могу это достичь? Все предложения приветствуются и благодарим вас за это заранее!

Answer 1

я предположил, что ваш код будет выглядеть примерно так:

<div class="product"> 
    <img src="http://academy.bindtuning.com/wp-content/uploads/2014/04/wplogoblue-notext-rgb.png" height="300" width="300" /> 
    <p class="out-of-stock">Out of Stock</p> 
</div> 

Примечание: Я использовал JQuery для добавьте новый <div class='img-overlay'></div> до img, поскольку псевдоселектора CSS не полностью поддерживаются старыми браузерами

$(document).ready(function(e){ 
 
    
 
// Adding a new <div> img-overlay before img present inside product 
 
    
 
$("<div class='img-overlay'></div>").insertBefore(".product img"); 
 
});

.product{ 
 
    position:relative; 
 
    width:300px; /* Setting this property is mandatory since .img-overlay inherits width from here */ 
 
    height:300px; /* Setting this property is mandatory since .img-overlay inherits height from here */ 
 
} 
 

 
.out-of-stock{ 
 
    width:100%; 
 
    text-align:center; 
 
    background:#fff; 
 
    color:#373737; 
 
    padding:5px; 
 
    font-size:13px; 
 
    text-transform:uppercase; 
 
    position:absolute; 
 
    z-index:100; /* Used it to push .out-of-stock above .img-overlay*/ 
 
} 
 

 
.product .img-overlay{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    background:rgba(90,90,90,0.5); /* Play with 0.5 to set the transparency of overlay div*/ 
 
    height:100%; 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="product"> 
 
<img src="http://academy.bindtuning.com/wp-content/uploads/2014/04/wplogoblue-notext-rgb.png" height="300" width="300" /> 
 
<p class="out-of-stock"> 
 
Out of Stock 
 
</p> 
 
</div>

Надеется, что это помогает

Answer 2

Пожалуйста, добавьте следующий CSS в файл custom.css вашей темы

.woocommerce span.soldout, .woocommerce-page span.soldout { 
    //Add overlay image url or effect 
}