• DSHG
    E-Mail schreiben
    Zurück zum Blog

    Zeigen Sie Rabatte in Prozent! Individuelle Sale Badges für WooCommerce

    Kategorie: Allgemein • E-Commerce • Tutorial

    Woocommerce Sale Badge

    Heute zeigen wir Ihnen, wie man die Prozentzahlen im Discount-Badge ohne Plungins anzeigt. Der Code sorgt dafür, dass nicht nur ein simples %-Zeichen im Artikel-Listing angezeigt wird, wenn ein Rabat für den Artikel vorhanden ist, sondern die genaue Prozentzahl anzeigt.

    Um Discount-Badges mit einem Rabattprozentsatz in Ihrem WooCommerce Shop anzuzeigen, können Sie den untenstehenden Code  in die functions.php Ihres aktuellen Themes kopieren.

    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
		$percentage = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
 
	} elseif ( $product->is_type( 'variable' ) ) { // Variables Produkt  
		$percentage = 0;
 
		// Schleife für jedes Produkt
		foreach ( $product->get_children() as $variation_id ) {
            $variation = wc_get_product( $variation_id );
 
			// Schleife, wenn Artikel nicht rabattiert ist
			if( ! $variation->is_on_sale() ) {
				continue;
			}
 
			// Preis ohne Rabatt
			$regular_price = $variation->get_regular_price();
			// Sale Preis
			$sale_price = $variation->get_sale_price();
			// Rabattprozentsatz
			$variation_percentage = ( $regular_price - $sale_price ) / $regular_price * 100;
 
			if ( $variation_percentage > $percentage ) {
				$percentage = $variation_percentage;
			}
		}
	}
 
	if ( $percentage > 0 ) {
		echo '<div class="custom-sale-badge">' . round( $percentage ) . '%</div>';
	}
}

    Bemerkung zum Code:

    • Der Rabattprozentsatz wird sowohl für normale als auch für variable Produkte angezeigt. Wir überprüfen den Produkttyp mit der Methode $product->is_type()
    • Bei variablen Produkten nehmen wir den maximalen Rabatt aus allen Varianten
    • Die PHP-Funktion round() wird benötigt, um den Prozentwert auf die ganze Zahl aufzurunden, wir wollen den Prozentsatz nicht als 41.11111 anzeigen
    • Unten finden Sie auch den CSS-Code, der das Discount-Badge in die Form bringt, in der er auf dem Screenshot oben zu sehen ist
    .custom-sale-badge {
    background-color: #D9534F;
    display: inline-block;
    padding: 2px 5px;
    font-size: 14px;
    color: #fff;
    border-radius: 4px;
    margin: 0 0 10px 0;
}
    Tags: •