In deze post heb ik laten zien hoe je het valutateken van prijzen in WooCommerce aanpast of verwijdert met kans een betere conversie te kunnen behalen. Nu laat ik je met een aantal code snippets zien hoe je de decimalen van productprijzen verwijdert of aanpast naar bijvoorbeeld ,- wanneer de decimalen gelijk zijn aan ,00 (‘Nul-decimalen).

‘Nul-decimalen’ verwijderen via de WooCommerce instellingen

In WooCommerce is er een optie bij de instellingen waarmee je het aantal decimalen kan instellen voor je hele shop. Dus op archiefpagina’s, productpagina’s, de winkelmand en de checkout pagina. Die instellingen vind je onder WooCommerce > Instellingen > Algemeen.

Decimalen van prijzen aanpassen in WooCommerce via de instellingen

‘Nul-decimalen’ verwijderen of aanpassen met een code snippet

Wil je echter wat meer vrijheid in op welke pagina’s je wel of geen decimalen toont, dan kan je hiervoor het best een code snippet gebruiken. Ook laat ik je zien hoe je de decimalen verandert naar bijvoorbeeld ,- wanneer de decimalen ,00 zijn.

Onderstaande code kan je plaatsen in het functions.php bestand van je thema, of in een site-specifieke plugin.

‘Nul-decimalen’ verwijderen in de gehele shop

Met onderstaande code snippet verwijder je de decimalen van de prijs wanneer de decimalen ,00 zijn. Bijvoorbeeld: €20,00 wordt €20. Wanneer een prijs eindigt op andere decimalen, bijvoorbeeld €20,95, dan blijven die decimalen wel gewoon staan.

/**
 * Remove 'zero decimals' from WooCommerce product prices.
 */
function wpsimpel_remove_zero_decimals( $formatted_price, $price, $decimal_places, $decimal_separator, $thousand_separator ) {
	
	if ( $price - intval( $price ) == 0 ) {
		// Format units, including thousands separator if necessary.
		return $unit = number_format( intval( $price ), 0, $decimal_separator, $thousand_separator );
	}
	else {
		return $formatted_price;
	}
}

add_filter( 'formatted_woocommerce_price', 'wpsimpel_remove_zero_decimals', 10, 5 );

‘Nul-decimalen’ verwijderen op specifieke pagina’s

Bovenstaande code snippet verwijdert de decimalen op alle shop-pagina’s van je website. Net als de standaard instelling van WooCommerce. Wil je bijvoorbeeld de decimalen wel op de productpagina’s tonen, maar niet op de shop- en archiefpagina’s, pas dan je code snippet aan naar onderstaand voorbeeld.

/**
 * Remove 'zero decimals' from WooCommerce product prices
 * but leave them on single product pages.
 */
function wpsimpel_remove_zero_decimals( $formatted_price, $price, $decimal_places, $decimal_separator, $thousand_separator ) {

	// Leave decimals in on single product page.
	if ( is_product() ) {
		return $formatted_price;
	}
	
	if ( $price - intval( $price ) == 0 ) {
		// Format units, including thousands separator if necessary.
		return $unit = number_format( intval( $price ), 0, $decimal_separator, $thousand_separator );
	}
	else {
		return $formatted_price;
	}
}

add_filter( 'formatted_woocommerce_price', 'wpsimpel_remove_zero_decimals', 10, 5 );

In deze code snippet kan je zo veel ‘conditional statements’ toevoegen als je zelf wil. Je kan er bijvoorbeeld ook voor kiezen om de nul-decimalen weg te halen op specifieke productcategorieën of producten.

‘Nul-decimalen’ aanpassen

De ‘nul-decimalen vervangen door bijvoorbeeld ,-, iets wat je terugziet bij bijvoorbeeld Coolblue, is met deze code snippet ook mogelijk.

Coolblue toont geen euroteken bij zijn prijzen
Coolblue

Om dit voor elkaar te krijgen pak ik de eerste code snippet waarmee de decimalen worden verwijderd, en plaats ik er ,- achter.

/**
 * Replace 'zero decimals' with ',-' on WooCommerce
 * product prices.
 */
function wpsimpel_remove_zero_decimals( $formatted_price, $price, $decimal_places, $decimal_separator, $thousand_separator ) {
	
	if ( $price - intval( $price ) == 0 ) {
		// Format units, including thousands separator if necessary.
		return $unit = number_format( intval( $price ), 0, $decimal_separator, $thousand_separator ) . ',-';
	}
	else {
		return $formatted_price;
	}
}

add_filter( 'formatted_woocommerce_price', 'wpsimpel_remove_zero_decimals', 10, 5 );

Beoordeel deze post:

Gemiddeld: 0 / 5. Aantal beoordelingen: 0

Nog geen beoordelingen

Whoops! 😔

Zou je ons willen laten weten hoe we (deze post) kunnen verbeteren?