Produkt Bild ausgrauen - Produkt - Single Page

Zitat von talkuvit

Ich möchte direkt auf der Produktseite das Produktbild komplett der Größe lang „ausgrauen“ mit Schrift „Ausverkauft“ wenn eben der Produktbestand / Lagervestand null ist.

[size=14]grayscale(wert) – Graustufe[/SIZE]
Mit dem grayscale()-Filter kann ein Bild in Graustufen dargestellt werden. Ein Wert von 1 entspricht 100%.

.grayscale {
   -webkit-filter: grayscale(1);
   filter: grayscale(1);
}

Wenn man mit PHP und der gd.lib ein Bild in schwarzweisß konvertieren möchte (zum beispiel, weil man für einen Overlay)

Soll ein Bild in Schwarz/Weiß angezeigt werden, setzte man den Befehl imagefilter($image, IMG_FILTER_GRAYSCALE) ein.
https://www.php.net/manual/de/function.imagefilter.php

Der Rest deiner Frage ist typische Lagerverwaltung für die es vermutlich für Woocommerce passende Plugins gibt.

Die von @r23 vorgeschlagene CSS Klasse könnte man in Abhängigkeit vom Lagerbestand über den Filter 'woocommerce_single_product_image_gallery_classes' hinzufügen.

Ohne Link zur Seite kann man das nicht beurteilen.

Und 'woocommerce_single_product_image_gallery_classes' ist ein Filter Hook, kein Action Hook.

self_hook_woocommerce_single_product_images ist kein offizieller WooCommerce Hook. Wahrscheinlich hast Du dafür einen Template Overload durchgeführt. Helfen kann man dabei nur wenn man alle Informationen hat. Bleibe so weit möglich bei den offiziellen Hooks.

Bilder von Variationen werden per jQuery ausgetauscht. Wird eine Variation ausgewählt, wird der jQuery Trigger 'woocommerce_variation_has_changed' abgefeuert. Hier könntest Du eingreifen.

Das wäre aber nicht notwendig, wenn Du den von mir empfohlenen Hook richtig verwendet und die CSS Regeln von @r23 angepasst hättest:

add_filter( 'woocommerce_single_product_image_gallery_classes', 'mmx_sold_out_image_gray_out' );
function mmx_sold_out_image_gray_out( $classes ) {
    global $product;
    if ( ! $product->is_in_stock() ) {
        $classes[] = 'grayscale';
    }
    return $classes;
}

.grayscale img {
   -webkit-filter: grayscale(1);
   filter: grayscale(1);
}

Bei Variationen funktioniert das aber nur wenn die Lagerverwaltung auf Produktebene stattfindet. Ansonsten muss man einen anderen Ansatz wählen.

Zitat von talkuvit

leider erscheint nur eine Weiße Fläche nun und das Bild wird nicht ausgegraut.

Der CSS Filter ist für Bilder gedacht und nicht für Text.

Beispiel - hier nimmt man 50% der Farbe aus dem Bild
https://www.w3schools.com/cssref/tryit.a…lter_grayscale2

Den Ansatz hatte ich genannt: der jQuery Trigger. Man braucht also eine weitere Funktion:

add_action( 'woocommerce_after_single_product', 'mmx_sold_out_image_gray_out_for_variations' );
function mmx_sold_out_image_gray_out_for_variations() {
   global $product;
   if( $product->is_type( 'variable' ) ){
       add_action( 'wp_footer', function(){
           echo "<script>
               jQuery( 'form.variations_form' ).on( 'show_variation',
                   function( event, variation ){
                       if( false === variation['is_in_stock'] ){
                           jQuery( 'div.woocommerce-product-gallery' ).addClass('grayscale');
                       } else {
                           jQuery( 'div.woocommerce-product-gallery' ).removeClass('grayscale');
                       }
                   }
               );
           </script>";
       });
   }
}

Der Ansatz mit einer anonymen Funktion im WordPress Footer soll die Funktionsweise verdeutlichen. In einer Produktivumgebung sollte man das natürlich so nicht machen! (Hint: Caching Plugins)

Bis jetzt haben wir Deinen Wunsch mit dem Schriftzug 'Ausverkauft' noch nicht berücksichtigt. Das könntest Du mit folgender CSS Regel umsetzen:

.grayscale::after {
   content: 'ausverkauft';
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   text-align: center;
   vertical-align: middle;
   color: red;
   -webkit-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
           transform: rotate(-45deg);
}