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伪选择器

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

希望有所帮助

Answer 2

请将以下css添加到主题的custom.css文件

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

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

2 个答案: