Tips & tricks : produit variable WooCommerce “À partir de”

Si vous vendez des produits variables avec WooCommerce, comprenant des variations avec des prix différents, vous retrouverez ces prix affichés avec la fourchette basse/haute ce qui n’est pas toujours heureux. Voici un code snippet PHP pour passer à un « À partir de » plus incitatif.

Un affichage de prix variable WooCommerce simplifié et plus incitatif

Les prix affichés en fourchette basse/haute sont moins facile à lire, prennent plus de place dans certains cas. Pour n’afficher que le prix de base avec l’indication « À partir de » voici le code à placer dans le fichier functions.php de votre thème enfant ou à embarquer sur votre site via l’extension Code Snippets :

// AFFICHER "À PARTIR DE" POUR LES PRODUITS VARIABLES
add_filter( 'woocommerce_variable_sale_price_html', 'wpm_variation_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wpm_variation_price_format', 10, 2 );

function wpm_variation_price_format( $price, $product ) {
	//On récupère le prix min et max du produit variable
	$min_price = $product->get_variation_price( 'min', true );
	$max_price = $product->get_variation_price( 'max', true );

	// Si les prix sont différents on affiche "À partir de ..."
	if ($min_price != $max_price){
		$price = sprintf( __( 'À partir de %1$s', 'woocommerce' ), wc_price( $min_price ) );
		return $price;
	// Sinon on affiche juste le prix
	} else {
		$price = sprintf( __( '%1$s', 'woocommerce' ), wc_price( $min_price ) );
		return $price;
	}
}

Quelques CSS pour affiner l’affichage des prix variables dans WooCommerce

Pour compléter le snippet PHP et éviter de laisser le texte « À partir de » soit aussi grand que le prix, voici 2 règles CSS que vous pouvez utiliser (gans le fichier des styles de votre thème enfant où dans Apparence -> Personnaliser -> CSS additionnel.

ul.products li.product .price {
	font-size: 14px !important;
}
ul.products li.product .price .amount, .summary.entry-summary .amount {
	font-size: 125% !important;
}

Vous définirez le corps du texte dans la première règle et la taille du prix agrandie à x% du corps du texte, elle comprend aussi la classe liée au prix affiché dans la page produit unique.

Bonne utilisation.

Sources : Code Snippets, WP Marmite.