De standaard sale badge van WooCommerce toont alleen de tekst ‘sale’ bijvoorbeeld.

Met deze snippet in je functions.php van je WordPress thema of in de Code Snippets plugin kun je hier een tekst aan toevoegen als ‘bespaar’ of ‘korting’ en een percentage bij tonen. Dan is het voor bezoekers van jouw webshop direct duidelijk hoeveel procent korting zij ontvangen.

Sale badge WooCommerce

Kortingspercentage tonen in sale badge WooCommerce

/** show saved % in sale badge */
add_filter( 'woocommerce_sale_flash', 'add_percentage_to_sale_badge', 20, 3 );
function add_percentage_to_sale_badge( $html, $post, $product ) {
if( $product->is_type('variable')){
$percentages = array();

// Get all variation prices
$prices = $product->get_variation_prices();

// Loop through variation prices
foreach( $prices['price'] as $key => $price ){
// Only on sale variations
if( $prices['regular_price'][$key] !== $price ){
// Calculate and set in the array the percentage for each variation on sale
$percentages[] = round(100 - ($prices['sale_price'][$key] / $prices['regular_price'][$key] * 100));
}
}
// We keep the highest value
$percentage = max($percentages) . '%';
} else {
$regular_price = (float) $product->get_regular_price();
$sale_price = (float) $product->get_sale_price();

$percentage = round(100 - ($sale_price / $regular_price * 100)) . '%';
}
return '<span class="onsale">' . $percentage . '' . esc_html__( ' KORTING', 'woocommerce' ) . '</span>';
}

Conversie WooCommerce verhogen

De bovenstaande tip kan bijdragen aan het verhogen van het algehele conversiepercentage in je WooCommerce webshop. Als je meer tips wilt verwijzen we je graag naar deze conversie optimalisatie tips sectie in onze kennisbank.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.