Comment déplacer l’étiquette de promotion à côté du prix dans la page produit sous WooCommerce ?

Sur un thème par défaut, tel que Storefront, le modèle de la page produit est disposé de telle sorte que le badge « PROMO ! » s’affiche en premier, sur sa propre ligne, puis vient le titre du produit, le prix du produit sur sa propre ligne, la description courte, la disponibilité en stock du produit et le bouton d’ajout au panier.

Comme vous pouvez le voir sur la capture d’écran ci-dessous, il y a beaucoup d’espace blanc sur le côté droit. Je voudrais améliorer la mise en page de la page produit et déplacer le badge « PROMO ! » juste à côté du prix, de sorte que je puisse atteindre deux objectifs : gagner de l’espace, et aussi concentrer l’attention du client sur le prix du produit plutôt que sur le badge.

Voyons donc comment j’ai procédé. Bonne lecture !

Sur le thème Storefront (ainsi que sur d’autres thèmes WooCommerce qui ne modifient pas le modèle de la page produit), le badge « PROMO ! » apparaît au-dessus du titre du produit. Déplaçons-le à côté du prix pour gagner de la place.
// SUPPRIMER LE BADGE DE PROMOTION DE SON EMPLACEMENT ORIGINAL
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
 
// AJOUTER LE BADGE DE PROMOTION À CÔTÉ DU PRIX
add_filter( 'woocommerce_get_price_suffix', 'wootimeo_add_price_suffix_sale', 9999, 4 );
   
function wootimeo_add_price_suffix_sale( $html, $product, $price, $qty ) {
    if ( ! is_admin() && is_object( $product ) && $product->is_on_sale() ) {
      $html .= wc_get_template_html( 'single-product/sale-flash.php' );
    }
    return $html;
}Langage du code : PHP (php)

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *