Woocommerce - Wie kann ich einen ausgegrauten Overlay-Effekt auf Thumbnails erreichen?

Question

Ich habe ein Wordpress/Woocommerce-Thema, das ich mit Produkten baue. Und wenn die Produkte nicht auf Lager sind, habe ich ap-Tag kodiert, die anzeigt, ‚Ausverkauft‘ unterhalb der Miniaturabbildung mit dem folgenden Code:

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

ich einen ausgegraut Wirkung haben auch die Miniatur wollen . Wo das Produktbild noch sichtbar ist, aber es gibt eine ausgegraute transparente Überlagerung. Weiß jemand wie ich das erreichen kann? Alle Vorschläge sind willkommen und vielen Dank im Voraus!

Answer 1

Ich habe den Code angenommen wird so etwas wie dieses:

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

Hinweis: Ich habe jQuery Fügen Sie eine neue <div class='img-overlay'></div> vor img hinzu, da CSS-Pseudo-Selektoren von älteren Browsern nicht vollständig unterstützt werden

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

Hoffe, es hilft

Answer 2

Bitte fügen Sie den folgenden CSS zu Ihrem Thema der custom.css Datei

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