Woocommerce - 如何在缩略图上实现灰色叠加效果？

Question

我正在使用产品构建一个 Wordpress/Woocommerce 主题。当产品缺货时，我使用以下代码编写了一个 p 标签，在产品缩略图下方显示“缺货”：

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 在 img 之前添加了一个新的 <div class='img-overlay'></div>，因为旧版浏览器不完全支持 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
}