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'); 

：製品は在庫切れの際に、私は次のコードを使用して、製品のサムネイルの下に「在庫切れ」表示のpタグをコード化されました。製品イメージはまだ表示されていますが、透明オーバーレイがグレー表示されています。 私はこれをどのように達成できるか誰にも分かりますか？すべての提案は大歓迎であり、あらかじめありがとうございます！

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のを使用CSS擬似セレクターが完全に古いブラウザでサポートされていないためimg前に新しい<div class='img-overlay'></div>を追加

$(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

あなたのテーマののcustom.cssファイルに次のCSSを追加してください

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