Ajouter du texte avant le prix dans WooCommerce

Régulièrement, les utilisateurs de WooCommerce demandent : “Comment ajouter du texte avant le prix dans ma boutique“. Un peu comme pour ajouter du contenu après le bouton ajouter au panier, il suffit de greffer un hook à votre fichier functions.php pour y arriver.

Comment ajouter du contenu avant les prix sur une page produit ?

Qu’il s’agisse du prix de vente TTC, HTVA, ou le prix en promo, c’est relativement simple de pouvoir afficher du contenu avant celui-ci. Cela peut même se faire simplement en CSS, cependant, dans ce cas, ce contenu ne sera pas lu par Google. Voyons donc ensemble comment faire pour afficher un texte avant le prix sur une boutique WooCommerce.

Ajouter un texte avant le prix de vente normal et/ou le prix de vente promotionnel avec du code

Comme indiqué, c’est assez simple, la première question à se poser, c’est : voulez-vous ajouter ce texte devant TOUS les tarifs ? Ou seulement devant les tarifs promotionnels par exemple ?

Ajouter le texte avant le prix normal et le prix promo

function wpnuls_text_before_price( $prix, $produit ) {
  if ( $product->is_on_sale() ) :
    $has_sale_text = array(
      '<del>' => '<del>TEXTE TARIF NORMAL : ',
      '<ins>' => '<br>TEXTE TARIF PROMO : <ins>'
    );
    $return_string = str_replace(array_keys( $has_sale_text ), array_values( $has_sale_text ), $price);
  else :
    $retun_string = 'TEXTE TARIF NORMAL : ' . $price;
  endif;

  return $return_string;
}
add_filter( 'woocommerce_get_price_html', 'wpnuls_text_before_price', 100, 2 );

Ajouter le texte avant le prix normal uniquement

function wpnuls_text_before_price( $prix, $produit ) {
  $retun_string = 'TEXTE TARIF NORMAL : ' . $prix;
  return $return_string;
}
add_filter( 'woocommerce_get_price_html', 'wpnuls_text_before_price', 100, 2 );

Ajouter le texte avant le prix promotionnel uniquement

function wpnuls_text_before_price( $prix, $produit ) {
  if ( $produit->is_on_sale() ) :
    $return_string = str_replace( '<ins>', '<ins><br>TEXTE PRIX PROMO: ', $prix);
    return $return_string;
  else :
    return $prix;
  endif;
}
add_filter( 'woocommerce_get_price_html', 'wpnuls_text_before_price', 100, 2 );

Utilisez le CSS pour ajouter du texte avant le prix

Les codes CSS suivant ont étés réalisés sur les thèmes de base de WordPress et de WooCommerce, il est possible que votre créateur de thème ait fait des changements dans le code qui feraient que ceux-ci ne fonctionnerait pas. En étudiant votre code html, vous trouverez facilement comment adapter le code CSS que nous allons vous communiquer 😉

En revanche, je répète, le texte que vous afficher en CSS, ne sera pas lu par Google, si vous cherchez donc à travailler votre SEO avec cela, privilégiez l’option “code”.

Ajouter du texte avant le prix sur un produit qui n’est pas en promo

.amount::before {
  content: 'TEXTE TARIF NORMAL :';
  margin-right: 5px;
}

Ajouter du texte avant le prix de vente promo (ins) et avant le prix normal (del)

del .amount::before,
ins .amount::before {
  margin-right: 5px;
}

del .amount::before {
  content: 'TEXTE TARIF NORMAL :';
}

ins .amount::before {
  content: 'TEXTE TARIF PROMO :';
}