Comment déplacer la description des variations de produits WooCommerce.

Sur un projet WooCommerce, nous avons eu besoin de déplacer la description des variations de produit ainsi que les informations de disponibilité de stock. En effet le design devait présenter le prix de la variation et le bouton ajouter au panier côte à côte dans un même bloc de couleur.

La description de la variation est généralement affichée dans la zone de résumé du produit de la page de produit unique. Cette description n’est pas visible tout de suite mais s’affiche une fois qu’un client choisit les options de produit appropriées (taille, couleur, etc).

La structure du code ne permet pas une modification facile et rapide puisque WooCommerce utilise pour cette partie un template javascript géré par un objet.

Nous sommes donc passé par du code JQuery pour copier la description de la variante active et l’ajouter dynamiquement à l’endroit souhaité. L’événement found_variation nous permet

$(document).on( 'found_variation', function() {
	var desc = $( '.woocommerce-variation.single_variation' ).find( '.woocommerce-variation-description' ).html();

	var $new_desc = $( '#new_product_desc' );
	var $already_added_new_desc = $new_desc.find( '.woocommerce-variation-description' );

	if ( $wc_var_desc.length == 0 ) {
			$new_desc.append( '<div class="woocommerce-variation-description"></div>' );
	}

	$new_desc.find( '.woocommerce-variation-description' ).html( desc );
});

Commencer un projet ?

Exposez nous aujourd'hui vos nouvelles idées

Contactez-nous!