Pour ajouter un texte, une image ou un bloc complet dans la page panier de WooCommerce, on utilise les hooks : des emplacements prévus par WooCommerce où l’on accroche son propre contenu avec quelques lignes de PHP. Combinés à un modèle Elementor, ils permettent d’insérer une vraie mise en page, à l’endroit exact voulu. Une condition : utiliser le panier classique.
En bref
- Un hook est un emplacement nommé où l’on peut ajouter du contenu sans modifier WooCommerce.
- La page panier en compte une vingtaine : au-dessus du tableau, sous les totaux, près du bouton de commande…
- Un code court passe par
do_shortcode()pour afficher un modèle Elementor. - Les hooks fonctionnent avec le panier classique ; le bloc Panier, par défaut sur les boutiques récentes, ne les utilise pas.
Qu’est-ce qu’un hook ?
Un hook est un point d’accroche prévu par le développeur d’une extension, ici WooCommerce. Il permet d’ajouter du contenu ou de modifier un comportement à un moment précis, sans toucher aux fichiers de l’extension. Votre code survit donc aux mises à jour.
Panier classique ou bloc Panier ?
Depuis WooCommerce 8.3, les nouvelles boutiques utilisent par défaut le bloc Panier. Il ne déclenche pas ces hooks : on le personnalise dans l’éditeur de blocs. Les hooks s’appliquent au panier classique, celui du code court [woocommerce_cart], toujours maintenu par WooCommerce. Si votre page panier contient le bloc, remplacez-le par un bloc Code court contenant [woocommerce_cart].
Les hooks de la page panier
Dans l’ordre d’affichage :
woocommerce_before_cartwoocommerce_before_cart_tablewoocommerce_before_cart_contentswoocommerce_cart_contentswoocommerce_cart_couponwoocommerce_after_cart_contentswoocommerce_after_cart_tablewoocommerce_cart_collateralswoocommerce_before_cart_totalswoocommerce_cart_totals_before_shippingwoocommerce_before_shipping_calculatorwoocommerce_after_shipping_calculatorwoocommerce_cart_totals_after_shippingwoocommerce_cart_totals_before_order_totalwoocommerce_cart_totals_after_order_totalwoocommerce_proceed_to_checkoutwoocommerce_after_cart_totalswoocommerce_after_cart
Exemple 1 : ajouter un simple texte
Pour afficher un texte au-dessus du total du panier, on utilise woocommerce_before_cart_totals. Ajoutez ce code dans le fichier functions.php de votre thème enfant (sinon il sera écrasé à la prochaine mise à jour du thème), ou dans l’extension Code Snippets :
add_action( 'woocommerce_before_cart_totals', 'wycan_texte_avant_total_panier' );
function wycan_texte_avant_total_panier() {
echo '<p>Livraison offerte dès 60 € d\'achat.</p>';
}La première ligne indique le hook ; le texte entre guillemets est celui qui s’affiche. Résultat :
Exemple 2 : insérer un modèle Elementor
Un texte, c’est bien. Deux colonnes avec une image et un bouton, c’est mieux. Avec Elementor Pro, chaque modèle de votre bibliothèque a un code court de la forme .
1. Créer le modèle
Dans Modèles, puis Ajouter, créez un modèle de type Section (ou Conteneur), composez le contenu voulu et publiez-le. Sur la liste des modèles, copiez son code court, dans la colonne de droite.
2. L’insérer avec un hook
Pour placer le modèle entre le tableau des produits et le total, on utilise woocommerce_after_cart_table. Un code court ne s’interprète pas tout seul dans du PHP : il faut le passer à do_shortcode().
add_action( 'woocommerce_after_cart_table', 'wycan_modele_apres_tableau_panier' );
function wycan_modele_apres_tableau_panier() {
echo do_shortcode( '[elementor-template id="701"]' );
}Remplacez 701 par l’identifiant de votre modèle, enregistrez, puis rechargez la page panier.
Sans Elementor Pro
Le principe reste le même avec n’importe quel code court : celui d’un formulaire, d’un bloc réutilisable ou de la bibliothèque de votre thème. Le thème OceanWP, par exemple, fournit un code court pour chaque élément de sa bibliothèque.
Plusieurs ajouts sur la même page
Vous pouvez accrocher autant de contenus que vous voulez, sur des hooks différents ou sur le même. Une seule règle : chaque fonction doit avoir un nom unique. Deux fonctions du même nom provoquent une erreur fatale et rendent le site inaccessible. Préfixez-les, comme ici avec wycan_.
Vous voulez un panier qui pousse à l’achat : livraison offerte, produits complémentaires, réassurance ? On conçoit des boutiques WooCommerce sur mesure, ou parlons de votre boutique.
