Woocommerce Rabatt-Anzeige in Prozent mit Sales Badges

Diverse Themes arbeiten mit Woocommerce und enthalten bereits sogenannte Sales Badgets. Diese Badets kennzeichnen Artikel, die aktuell im Angebot oder Sale sind. In vielen der moderneren und optimiert shops finden wir gerade zu Black Friday oder auch Weihnachten direkt an Artikeln die Kennzeichnung „Spare X%“ oder Jetzt X% günstiger“.

In diesem Beitrag zeigen wir Ihnen, wie Sie ein solches Sales-Badget mit der Angabe des prozentualen Nachlasses erzeugen und innerhalb der Produktübersicht anzeigen lassen können. Den zugehörigen CSS Code stellen wir Ihnen auch gerne zur Verfügung.

Um die Änderungen in Ihrem Woocommerce Store durchzuführen, können Sie einfach den folgenden Code in die functions.php oder einem Plugin wie Codesnippet einfügen. Bitte denken Sie dran, im Falle von der functions.php die Anpassungen in einem Child Theme vorzunehmen, da andernfalls bei einem Update die Anpassungen wieder verschwunden sind.

add_action( 'woocommerce_before_shop_loop_item_title', 'custom_sale_badge', 25 ); 

function custom_sale_badge() { 
	// Globale Variable mit dem Produkt
	global $product;
 
	// Prüfen, ob es Sale Artikel ist
	if ( ! $product->is_on_sale() ) {
		return;
	}
 
	// kein Variables Produkt
    if ( $product->is_type( 'simple' ) ) {  
		// Rabattprozentansatz berechnen
		$rabatt_prozentsatz = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
 
	} elseif ( $product->is_type( 'variable' ) ) { // Variables Produkt  
		$rabatt_prozentsatz = 0;
 
		// Schleife für jedes Produkt
		foreach ( $product->get_children() as $variations_id ) {
            $variation = wc_get_product( $variations_id );
 
			// Schleife, wenn Artikel nicht rabattiert ist
			if( ! $variation->is_on_sale() ) {
				continue;
			}
 
			// Preis ohne Rabatt
			$regulärer_preis = $variation->get_regular_price();
			// Sale Preis
			$sale_preis = $variation->get_sale_price();
			// Rabattprozentsatz
			$variation_rabatt_prozentsatz = ( $regulärer_preis - $sale_preis ) / $regulärer_preis * 100;
 
			if ( $variation_rabatt_prozentsatz > $rabatt_prozentsatz ) {
				$rabatt_prozentsatz = $variation_rabatt_prozentsatz;
			}
		}
	}
 
	if ( $rabatt_prozentsatz > 0 ) {
		echo '<div class="custom-sale-badge">' . round( $rabatt_prozentsatz ) . '%</div>';
	}
}

Um es jetzt noch so aussehen zu lassen, wie bei uns im Beispiel oben, können Sie den folgenden CSS Code verwenden.

.custom-sale-badge {
    background: rgba(177, 54, 135, 0.75);
    display: inline-block;
    padding: 2px 5px;
    font-size: 16px;
    font-weight:600;
    color: #a4c137;
    border-radius: 4px;
    margin: 0 0 10px 0;
    position:absolute;
    top:10%;
}
.custom-sale-badge:after {
  content:" Reduziert";
}

Bezüglich des Codes:

• Wir bestimmen den Produkttyp mit der Methode $product->is_type()
• Bei variablen Produkten verwenden wir den höchsten Rabatt aus allen Varianten
• Wir runden den Prozentwert mit der PHP-Funktion round() auf eine ganze Zahl, anstatt 24,4925 anzuzeigen
• Für das Discount-Badge verwenden wir den CSS-Code, wie er im Screenshot oben dargestellt wird.