Créer une boutique WooCommerce avec Avada

Si votre page Panier ressemble à un empilement de shortcodes mal stylés dès que vous activez Avada, le problème ne vient pas de WooCommerce : c’est presque toujours un mélange de réglages, de templates et de hooks placés au mauvais endroit. Une fois le socle propre, Fusion Builder devient un vrai accélérateur pour une boutique pro.

Ce qu'on va réaliser

Vous allez mettre en place une boutique WooCommerce stable et “propre” avec Avada (Fusion Builder), sans vous battre contre les templates WooCommerce.

Concrètement, à la fin vous aurez :

• des pages Boutique / Produit / Panier / Commande cohérentes avec Avada,
• une page produit enrichie (badge, réassurance, texte dynamique),
• un checkout simplifié (moins de friction, meilleurs libellés, champs maîtrisés),
• un petit “mini-plugin” (code prêt à copier-coller) qui survit aux mises à jour du thème.

C’est destiné aux boutiques classiques (produits physiques, formations, digital downloads) et aux blogueurs qui veulent vendre sans transformer leur site en chantier permanent.

Résumé rapide

• Vous utilisez Avada + Fusion Builder pour la mise en page, et WooCommerce garde la logique e-commerce.
• Vous évitez de modifier WooCommerce “à la main” : vous passez par des hooks (actions/filtres) et quelques overrides ciblés.
• Vous créez un mini-plugin (ou mu-plugin) pour vos personnalisations, pas dans le thème parent.
• Vous optimisez la page produit (réassurance + badge + texte conditionnel) via hooks WooCommerce.
• Vous simplifiez le checkout via le filtre woocommerce_checkout_fields et des actions de placement.
• Vous chargez CSS/JS proprement avec wp_enqueue_scripts (et pas via “Custom CSS” dispersé).

Quand utiliser cette solution

• Vous utilisez Avada (thème) et Fusion Builder (ou Fusion Builder Elements) et vous voulez une boutique cohérente visuellement.
• Vous débutez et vous voulez une méthode qui tient dans le temps (mises à jour WordPress 6.9.4+, WooCommerce récent, PHP 8.1+).
• Vous avez besoin de personnaliser panier/checkout sans installer 12 plugins de champs.
• Vous voulez pouvoir revenir en arrière facilement (désactiver le mini-plugin = retour au comportement standard).

Quand ne PAS utiliser cette solution

• Vous comptez refondre complètement l’expérience produit avec un headless ou un checkout externe : mieux vaut partir sur une architecture dédiée.
• Vous êtes sur un site très custom (CPT produits non-WooCommerce, tunnel sur mesure) : les hooks WooCommerce ne suffiront pas.
• Vous ne pouvez pas toucher au code du tout (aucun accès FTP / gestionnaire de fichiers) : utilisez une alternative “plugin-only” (voir la section Variante).

Avant de commencer (prérequis)

Versions et environnement (avril 2026)

• WordPress : 6.9.4 (votre contexte).
• PHP : 8.1 minimum recommandé (8.2/8.3 souvent plus confortable en prod si votre hébergeur suit).
• WooCommerce : installez la dernière version stable disponible depuis wordpress.org/plugins/woocommerce.
• Avada : thème + Fusion Builder à jour (via Avada > Maintenance / Updates).

Sauvegarde et site de test

Ne testez pas ces changements directement en production. J’ai souvent vu un simple “;” manquant casser tout le front avec une erreur fatale.

• Faites une sauvegarde fichiers + base de données (ou un snapshot hébergeur).
• Si possible, clonez le site sur un staging.

Où coller le code (choisissez 1 méthode)

Pour Avada, la tentation est forte de coller du code dans Avada > Options ou dans le thème enfant. Ça marche… jusqu’au jour où un snippet se mélange à un autre. Voici ce que je recommande.

Méthode A (recommandée) : mu-plugin

Un mu-plugin (Must-Use Plugin) se charge automatiquement et ne peut pas être désactivé par erreur dans l’admin. Parfait pour des personnalisations “socle”.

• Créez le dossier /wp-content/mu-plugins/ s’il n’existe pas.
• Créez un fichier /wp-content/mu-plugins/avada-woocommerce-pro.php.

Méthode B : plugin custom

Créez un plugin dans /wp-content/plugins/. Avantage : vous pouvez l’activer/désactiver facilement.

Méthode C : functions.php du thème enfant (acceptable, mais moins propre)

Uniquement si vous avez déjà un thème enfant Avada et que vous centralisez tout dedans. Ne modifiez jamais le thème parent.

Accéder aux réglages WooCommerce concernés

• WooCommerce > Réglages > Produits (affichage boutique, images, inventaire).
• WooCommerce > Réglages > Avancé (pages Panier / Commande / Mon compte).
• Apparence > Personnaliser (si vous utilisez des options de thème liées à WooCommerce).

Petit vocabulaire (utile avant le code)

• Hook : point d’accroche dans le code. WooCommerce et WordPress “appellent” des hooks à des moments précis.
• Action : hook qui exécute du code (ex. afficher un bloc HTML).
• Filtre : hook qui modifie une valeur (ex. changer les champs du checkout).
• Override de template : copie d’un fichier de template WooCommerce dans votre thème enfant pour le modifier. À utiliser avec parcimonie.

Les hooks WooCommerce utilisés

WooCommerce s’appuie sur des hooks WordPress (do_action, apply_filters) mais propose ses propres points d’accroche, très orientés e-commerce. La différence pratique : les hooks WooCommerce sont placés dans les templates WooCommerce (panier, checkout, produit) et vous permettent d’injecter du contenu sans réécrire tout le template.

• woocommerce_before_single_product_summary : avant le résumé produit (zone image/galerie).
• woocommerce_single_product_summary : zone titre, prix, extrait, bouton ajouter au panier.
• woocommerce_after_add_to_cart_button : juste après le bouton “Ajouter au panier”.
• woocommerce_before_cart / woocommerce_after_cart : avant/après le panier.
• woocommerce_before_checkout_form : avant le formulaire de commande.
• woocommerce_checkout_fields (filtre) : modifier les champs du checkout.
• woocommerce_checkout_process : valider côté serveur (sécurité + cohérence).

Docs officielles utiles : developer.woocommerce.com/docs et le guide des hooks (selon version) via github.com/woocommerce/woocommerce (templates).

Étape 1 : Préparer Avada + WooCommerce pour un rendu propre

Avant de “builder” quoi que ce soit, assurez-vous que WooCommerce pointe vers les bonnes pages et qu’Avada ne vous force pas une mise en page inattendue.

1) Vérifier les pages WooCommerce

1. Allez dans WooCommerce > Réglages > Avancé.
2. Vérifiez les pages : Panier, Commande, Mon compte.
3. Ouvrez chaque page dans l’éditeur : elle doit contenir le shortcode WooCommerce correspondant (ou un bloc WooCommerce si vous utilisez l’éditeur de blocs).

Règle simple : sur Panier/Commande/Mon compte, évitez d’ajouter 15 sections Fusion Builder autour du shortcode. Mettez plutôt une structure légère (titre + conteneur) et laissez WooCommerce gérer le cœur.

2) Régénérer les permaliens si vous avez des 404 produits

Si vos pages produit renvoient 404 après activation d’Avada ou changement de structure :

1. Allez dans Réglages > Permaliens.
2. Ne changez rien, cliquez Enregistrer les modifications.

Ça force WordPress à régénérer les règles de réécriture. C’est un classique.

3) Définir une base “layout” Avada cohérente

Dans Avada, vous pouvez gérer des layouts globaux (headers/footers/sidebars) qui s’appliquent aussi à WooCommerce. L’objectif : éviter que la page produit ait une sidebar à gauche alors que le checkout est full-width.

• Choisissez un template global “full width” pour Panier/Commande (souvent plus lisible).
• Gardez la sidebar uniquement sur la page Boutique si votre catalogue est long (filtres, catégories).

Dans mon expérience, la majorité des “bugs” Avada + WooCommerce sont des incohérences de layout : un conteneur trop étroit, une sidebar injectée par défaut, ou un titre de page dupliqué (Avada + WooCommerce).

Étape 2 : Construire les pages boutique avec Fusion Builder (sans casser WooCommerce)

Fusion Builder est excellent pour créer des pages marketing. Pour WooCommerce, la bonne stratégie est hybride : vous utilisez Fusion Builder pour l’encadrement (hero, sections, réassurance, FAQ), et vous laissez WooCommerce afficher le catalogue via shortcodes/blocs.

Option 1 (simple) : page Boutique “catalogue” avec shortcode

Créez une page “Boutique” (ou éditez celle existante), puis ajoutez un bloc Code/Shortcode dans Fusion Builder avec un shortcode WooCommerce.

Exemples utiles :

• • 

    BPC Auto Blogger – Starter (Annuel)

    $90.00
  • 

    BPC Auto Blogger – Pro (Annuel)

    $170.00
  • 

    BPC Auto Blogger – Premium (Annuel)

    $351.00
  • 

    BPC Auto Blogger – Starter

    $10.00
  • 

    BPC Auto Blogger – Pro

    $19.00
  • 

    BPC Auto Blogger – Premium

    $39.00
• • 

    Créer Un Blog (4)

  • 

    Uncategorized (2)

Ces shortcodes sont maintenus par WooCommerce. Pour éviter les surprises, gardez-les simples et testez sur mobile.

Option 2 (propre) : page d’accueil boutique avec sections Fusion Builder

Structure que j’utilise souvent :

• Section 1 : Hero (Fusion Builder) + CTA vers une catégorie.
• Section 2 : 3 bénéfices (livraison, retours, support).
• Section 3 : produits mis en avant (shortcode WooCommerce).
• Section 4 : témoignages (Fusion Builder).
• Section 5 : catégories (shortcode).

Vous obtenez une page “marketing” sans réinventer la logique catalogue.

Point de vigilance : ne construisez pas le checkout “en morceaux”

Le checkout WooCommerce est un formulaire complexe. Si vous essayez de le reconstruire avec Fusion Builder (colonnes, sections, etc.), vous risquez :

• des champs qui ne se valident plus,
• des moyens de paiement qui ne s’affichent plus (JS cassé),
• des erreurs de nonce (sécurité) si vous encapsulez mal le formulaire.

Pour le checkout, restez sur la page WooCommerce standard et personnalisez-la via hooks (étape 4).

Étape 3 : Personnaliser la page produit (badges, réassurance, texte dynamique)

On va ajouter trois éléments concrets, sans override de template :

• un badge “Expédié sous 24h” pour les produits en stock,
• un bloc réassurance sous le bouton “Ajouter au panier”,
• un texte dynamique “Téléchargement immédiat” pour les produits virtuels/téléchargeables.

Créer un mini-plugin (exemple mu-plugin)

Dans /wp-content/mu-plugins/avada-woocommerce-pro.php, collez ce squelette. Même si vous choisissez un plugin classique, le code interne sera identique.

<?php
/**
 * Plugin Name: Avada + WooCommerce (personnalisations boutique)
 * Description: Badges produit, réassurance, checkout simplifié. Compatible WordPress 6.9.4+ / PHP 8.1+.
 * Author: Votre Nom
 * Version: 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Badge stock : affiche un badge si le produit est en stock.
 */
add_action( 'woocommerce_before_single_product_summary', function () {
	if ( ! is_product() ) {
		return;
	}

	global $product;

	if ( ! $product || ! $product->is_in_stock() ) {
		return;
	}

	echo '<div class="bpcab-badge-stock" aria-label="Information expédition">';
	echo esc_html__( 'Expédié sous 24h (jours ouvrés)', 'textdomain' );
	echo '</div>';
}, 8 );

/**
 * Réassurance : affiche un bloc sous le bouton "Ajouter au panier".
 */
add_action( 'woocommerce_after_add_to_cart_button', function () {
	if ( ! is_product() ) {
		return;
	}

	echo '<div class="bpcab-reassurance" role="note">';
	echo '<ul>';
	echo '<li>' . esc_html__( 'Paiement sécurisé', 'textdomain' ) . '</li>';
	echo '<li>' . esc_html__( 'Support sous 24h', 'textdomain' ) . '</li>';
	echo '<li>' . esc_html__( 'Retours sous 14 jours (selon conditions)', 'textdomain' ) . '</li>';
	echo '</ul>';
	echo '</div>';
}, 20 );

/**
 * Texte dynamique : indique "Téléchargement immédiat" pour les produits téléchargeables.
 */
add_action( 'woocommerce_single_product_summary', function () {
	if ( ! is_product() ) {
		return;
	}

	global $product;

	if ( ! $product ) {
		return;
	}

	if ( $product->is_downloadable() || $product->is_virtual() ) {
		echo '<p class="bpcab-digital-note">' . esc_html__( 'Téléchargement immédiat après paiement.', 'textdomain' ) . '</p>';
	}
}, 35 );

Résultat attendu (front-end)

• Un badge visible au-dessus de la galerie produit (si en stock).
• Un mini-bloc “réassurance” sous le bouton d’achat.
• Une note visible sous les éléments clés (titre/prix/extrait) pour les produits digitaux.

Si vous ne voyez rien : vérifiez que vous êtes bien sur une page produit WooCommerce (URL type /produit/...) et que votre code se charge (mu-plugin au bon endroit).

Étape 4 : Optimiser panier et checkout (champs, messages, confiance)

Le checkout est l’endroit où une boutique perd des ventes. Ici, on va faire trois choses simples et efficaces :

• afficher un message de confiance avant le checkout,
• simplifier des champs (ex. retirer “Adresse ligne 2” si inutile),
• ajouter une validation serveur (si champ requis).

1) Message avant le formulaire de commande

/**
 * Message de confiance avant le checkout.
 */
add_action( 'woocommerce_before_checkout_form', function () {
	if ( ! is_checkout() ) {
		return;
	}

	echo '<div class="bpcab-checkout-trust" role="note">';
	echo '<strong>' . esc_html__( 'Commande sécurisée', 'textdomain' ) . '</strong><br>';
	echo esc_html__( 'Vos informations sont chiffrées. Vous recevrez un e-mail de confirmation immédiatement.', 'textdomain' );
	echo '</div>';
}, 12 );

2) Simplifier les champs checkout avec un filtre

Filtre = vous recevez un tableau de champs, vous le modifiez, vous le retournez. Si vous oubliez le return, vous cassez le checkout.

/**
 * Simplifie certains champs du checkout.
 * - Retire "Adresse ligne 2" (souvent inutile)
 * - Rend le téléphone obligatoire (exemple)
 * - Renomme quelques libellés
 */
add_filter( 'woocommerce_checkout_fields', function ( $fields ) {

	// Facturation (billing)
	if ( isset( $fields['billing']['billing_address_2'] ) ) {
		unset( $fields['billing']['billing_address_2'] );
	}

	if ( isset( $fields['billing']['billing_phone'] ) ) {
		$fields['billing']['billing_phone']['required'] = true;
		$fields['billing']['billing_phone']['label']    = __( 'Téléphone (pour la livraison)', 'textdomain' );
		$fields['billing']['billing_phone']['priority'] = 65;
	}

	if ( isset( $fields['billing']['billing_company'] ) ) {
		$fields['billing']['billing_company']['label'] = __( 'Entreprise (optionnel)', 'textdomain' );
	}

	// Livraison (shipping) : exemple, vous pouvez aussi retirer des champs ici
	// if ( isset( $fields['shipping']['shipping_company'] ) ) {
	//     unset( $fields['shipping']['shipping_company'] );
	// }

	return $fields;
}, 20 );

3) Validation serveur (éviter les données incohérentes)

Si vous rendez un champ obligatoire, ajoutez une validation côté serveur. Sinon, certains navigateurs/flux peuvent passer à travers (ou des plugins peuvent modifier le formulaire).

/**
 * Validation serveur : vérifie que le téléphone est bien rempli si requis.
 */
add_action( 'woocommerce_checkout_process', function () {
	// On lit la donnée envoyée (POST). WooCommerce nettoie beaucoup de champs,
	// mais ici on reste prudent.
	$phone = isset( $_POST['billing_phone'] ) ? wc_clean( wp_unslash( $_POST['billing_phone'] ) ) : '';

	if ( empty( $phone ) ) {
		wc_add_notice( __( 'Merci de renseigner un numéro de téléphone pour la livraison.', 'textdomain' ), 'error' );
	}
} );

Vous venez d’améliorer le checkout sans override de template. C’est exactement ce qui résiste le mieux aux mises à jour.

Étape 5 : Ajouter un CSS/JS propre (enqueue) pour Avada + WooCommerce

Le CSS “à la volée” dans Avada Options finit souvent en doublons, ou n’est pas versionné. La bonne méthode WordPress : enqueue (charger des fichiers via l’API).

1) Créer un fichier CSS

Créez un fichier : /wp-content/mu-plugins/assets/avada-woocommerce-pro.css (si mu-plugin) ou dans votre plugin custom. Si vous êtes en thème enfant, placez-le dans le thème enfant.

.bpcab-badge-stock{
	display:inline-block;
	margin: 0 0 12px 0;
	padding: 6px 10px;
	border-radius: 6px;
	background: #0b5;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
}

.bpcab-reassurance{
	margin-top: 12px;
	padding: 12px;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 10px;
	background: rgba(0,0,0,.02);
}

.bpcab-reassurance ul{
	margin: 0;
	padding-left: 18px;
}

.bpcab-digital-note{
	margin-top: 10px;
	opacity: .9;
}

.bpcab-checkout-trust{
	margin: 0 0 16px 0;
	padding: 12px 14px;
	border-left: 4px solid #2271b1;
	background: rgba(34,113,177,.08);
}

2) Charger le CSS uniquement quand WooCommerce en a besoin

/**
 * Charge le CSS uniquement sur les pages WooCommerce utiles.
 */
add_action( 'wp_enqueue_scripts', function () {

	if ( function_exists( 'is_woocommerce' ) && ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) ) {

		// Chemin pour un mu-plugin : on ne peut pas utiliser plugins_url() directement
		// si le fichier est dans mu-plugins. On construit une URL depuis WP_CONTENT_URL.
		$css_url = content_url( 'mu-plugins/assets/avada-woocommerce-pro.css' );

		wp_enqueue_style(
			'bpcab-avada-woocommerce-pro',
			$css_url,
			array(),
			'1.0.0'
		);
	}
}, 20 );

Erreur fréquente : vous mettez le fichier CSS ailleurs que l’URL déclarée. Résultat : 404 dans l’onglet Réseau (DevTools). Vérifiez le chemin exact.

Docs officielles sur l’enqueue : developer.wordpress.org/reference/functions/wp_enqueue_style.

Compatibilité Divi 5 / Elementor / Avada

Avada / Fusion Builder (votre cas)

• Utilisez Fusion Builder pour les pages marketing et les “cadres” (hero, sections, FAQ).
• Pour Panier/Commande/Mon compte : gardez la page WooCommerce standard + hooks. C’est le combo le plus stable.
• Si Avada propose un “WooCommerce Builder”/templates (selon version), utilisez-le pour l’en-tête/pied de page et la structure, pas pour réécrire toute la logique du checkout.

Divi 5

• Divi a ses modules WooCommerce (produits, add to cart, etc.). La logique est similaire : utilisez les modules pour la mise en page, et les hooks pour les règles métier (validation, champs, messages).
• Les hooks WooCommerce de cet article restent valables, car ils s’exécutent côté WooCommerce, pas côté builder.

Elementor

• Elementor (Pro) propose un “WooCommerce Builder” (templates produit/archives). Même approche : design dans Elementor, logique via hooks.
• Attention aux templates qui remplacent totalement la page produit : certains hooks peuvent ne plus être appelés si le template ne déclenche pas les actions WooCommerce standard. Dans ce cas, injectez vos blocs via widgets Elementor (HTML) ou réactivez la structure WooCommerce.

Astuce commune (les 3 builders)

Quand un hook “ne marche pas”, le vrai diagnostic est souvent : “le template affiché n’appelle pas ce hook”. Avant d’accuser votre code, vérifiez si votre builder remplace le template WooCommerce.

Le code complet

Ce bloc assemble tout, prêt à coller dans un fichier avada-woocommerce-pro.php (mu-plugin ou plugin). Les sorties HTML sont échappées quand c’est pertinent, et les entrées sont nettoyées côté checkout.

<?php
/**
 * Plugin Name: Avada + WooCommerce (personnalisations boutique)
 * Description: Badges produit, réassurance, checkout simplifié. Compatible WordPress 6.9.4+ / PHP 8.1+.
 * Author: Votre Nom
 * Version: 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Badge stock : affiche un badge si le produit est en stock.
 */
add_action( 'woocommerce_before_single_product_summary', function () {
	if ( ! is_product() ) {
		return;
	}

	global $product;

	if ( ! $product || ! $product->is_in_stock() ) {
		return;
	}

	echo '<div class="bpcab-badge-stock" aria-label="' . esc_attr__( 'Information expédition', 'textdomain' ) . '">';
	echo esc_html__( 'Expédié sous 24h (jours ouvrés)', 'textdomain' );
	echo '</div>';
}, 8 );

/**
 * Réassurance : affiche un bloc sous le bouton "Ajouter au panier".
 */
add_action( 'woocommerce_after_add_to_cart_button', function () {
	if ( ! is_product() ) {
		return;
	}

	echo '<div class="bpcab-reassurance" role="note">';
	echo '<ul>';
	echo '<li>' . esc_html__( 'Paiement sécurisé', 'textdomain' ) . '</li>';
	echo '<li>' . esc_html__( 'Support sous 24h', 'textdomain' ) . '</li>';
	echo '<li>' . esc_html__( 'Retours sous 14 jours (selon conditions)', 'textdomain' ) . '</li>';
	echo '</ul>';
	echo '</div>';
}, 20 );

/**
 * Texte dynamique : indique "Téléchargement immédiat" pour les produits téléchargeables.
 */
add_action( 'woocommerce_single_product_summary', function () {
	if ( ! is_product() ) {
		return;
	}

	global $product;

	if ( ! $product ) {
		return;
	}

	if ( $product->is_downloadable() || $product->is_virtual() ) {
		echo '<p class="bpcab-digital-note">' . esc_html__( 'Téléchargement immédiat après paiement.', 'textdomain' ) . '</p>';
	}
}, 35 );

/**
 * Message de confiance avant le checkout.
 */
add_action( 'woocommerce_before_checkout_form', function () {
	if ( ! is_checkout() ) {
		return;
	}

	echo '<div class="bpcab-checkout-trust" role="note">';
	echo '<strong>' . esc_html__( 'Commande sécurisée', 'textdomain' ) . '</strong><br>';
	echo esc_html__( 'Vos informations sont chiffrées. Vous recevrez un e-mail de confirmation immédiatement.', 'textdomain' );
	echo '</div>';
}, 12 );

/**
 * Simplifie certains champs du checkout (filtre).
 */
add_filter( 'woocommerce_checkout_fields', function ( $fields ) {

	// Retire Adresse ligne 2
	if ( isset( $fields['billing']['billing_address_2'] ) ) {
		unset( $fields['billing']['billing_address_2'] );
	}

	// Téléphone requis + libellé plus clair
	if ( isset( $fields['billing']['billing_phone'] ) ) {
		$fields['billing']['billing_phone']['required'] = true;
		$fields['billing']['billing_phone']['label']    = __( 'Téléphone (pour la livraison)', 'textdomain' );
		$fields['billing']['billing_phone']['priority'] = 65;
	}

	// Entreprise optionnelle, libellé explicite
	if ( isset( $fields['billing']['billing_company'] ) ) {
		$fields['billing']['billing_company']['label'] = __( 'Entreprise (optionnel)', 'textdomain' );
	}

	return $fields;
}, 20 );

/**
 * Validation serveur : vérifie que le téléphone est bien rempli.
 */
add_action( 'woocommerce_checkout_process', function () {
	$phone = isset( $_POST['billing_phone'] ) ? wc_clean( wp_unslash( $_POST['billing_phone'] ) ) : '';

	if ( empty( $phone ) ) {
		wc_add_notice( __( 'Merci de renseigner un numéro de téléphone pour la livraison.', 'textdomain' ), 'error' );
	}
} );

/**
 * Charge le CSS uniquement sur les pages WooCommerce utiles.
 * NOTE : si vous utilisez un plugin normal (wp-content/plugins), remplacez content_url()
 * par plugins_url('assets/avada-woocommerce-pro.css', __FILE__).
 */
add_action( 'wp_enqueue_scripts', function () {

	if ( function_exists( 'is_woocommerce' ) && ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) ) {

		$css_url = content_url( 'mu-plugins/assets/avada-woocommerce-pro.css' );

		wp_enqueue_style(
			'bpcab-avada-woocommerce-pro',
			$css_url,
			array(),
			'1.0.0'
		);
	}
}, 20 );

Explication du code

Pourquoi des hooks plutôt que des overrides de templates

Un override de template WooCommerce (copier un fichier dans votre thème enfant) fige votre site sur une version de template. À chaque grosse mise à jour WooCommerce, vous devez vérifier la compatibilité. Avec des hooks, vous ajoutez des éléments sans dupliquer des fichiers entiers.

Le badge stock (woocommerce_before_single_product_summary)

Ce hook est appelé sur la page produit standard, avant le résumé. On le place en priorité 8 pour qu’il arrive tôt, avant certains éléments ajoutés par des plugins.

On vérifie is_product() pour ne pas polluer d’autres pages, puis $product->is_in_stock() pour éviter d’annoncer une expédition rapide sur un produit indisponible.

La réassurance (woocommerce_after_add_to_cart_button)

Ce hook est idéal car il est collé au moment de décision. Avada peut styliser le bouton, mais WooCommerce garde le HTML du formulaire “Add to cart”. Vous ajoutez un bloc simple derrière, sans toucher au formulaire (et donc sans casser la soumission).

Le texte dynamique (woocommerce_single_product_summary)

La zone “summary” est un empilement d’actions. En priorité 35, votre note arrive après les éléments essentiels (titre, prix, etc.) dans la plupart des thèmes.

Checkout : filtre des champs + validation serveur

woocommerce_checkout_fields modifie la structure des champs. Vous retirez billing_address_2, vous marquez billing_phone comme requis, vous ajustez priorité et libellés.

woocommerce_checkout_process s’exécute lors de la soumission. Vous nettoyez la donnée avec wc_clean et wp_unslash, puis vous ajoutez une erreur via wc_add_notice si nécessaire.

CSS : wp_enqueue_scripts et ciblage WooCommerce

Vous chargez le CSS uniquement sur les pages WooCommerce. Ça évite un CSS global sur tout le site (perf + maintenance). Le ciblage utilise is_woocommerce(), is_cart(), is_checkout(), is_account_page().

Vérification finale

• Page produit : le badge s’affiche uniquement si le produit est en stock. Le bloc réassurance est sous le bouton.
• Produit digital : la note “Téléchargement immédiat” apparaît.
• Checkout : “Adresse ligne 2” a disparu. Le champ téléphone est requis.
• Validation : si vous essayez de commander sans téléphone, un message d’erreur apparaît.
• CSS : dans l’inspecteur réseau, le fichier CSS se charge sans 404.

Testez aussi :

• un produit simple,
• un produit variable (tailles/couleurs),
• un produit en rupture de stock,
• un moyen de paiement (carte, PayPal, etc.).

Si ça ne marche pas

Voici un tableau de diagnostic basé sur des cas réels (Avada + cache + snippets).

Symptôme	Cause probable	Vérification	Solution
Rien ne s’affiche sur la page produit	Code collé au mauvais endroit (thème parent, mauvais fichier, plugin non chargé)	Vérifiez l’existence du fichier mu-plugin et son chemin exact	Placez le fichier dans /wp-content/mu-plugins/ ou activez le plugin custom
Erreur fatale (écran blanc)	Point-virgule/parenthèse manquant, ou PHP trop ancien	Consultez les logs PHP (ou le mode debug)	Corrigez la syntaxe, assurez-vous d’être en PHP 8.1+ (php.net/supported-versions.php)
Le CSS ne se charge pas	URL incorrecte (content_url) ou fichier absent	Onglet Réseau > cherchez avada-woocommerce-pro.css	Corrigez le chemin, ou utilisez plugins_url() si plugin classique
Le checkout “tourne” mais ne valide pas	Conflit JS (cache/minification) ou builder qui encapsule le formulaire	Console navigateur + test sans optimisation	Désactivez la minification, revenez à une page checkout WooCommerce standard
Les champs checkout ne changent pas	Un plugin de checkout remplace les champs après votre filtre	Désactivez temporairement les plugins “checkout field editor”	Retirez le plugin, ou ajustez la priorité du filtre (ex. 99)

Docs pour activer le debug WordPress : developer.wordpress.org/advanced-administration/debug/debug-wordpress.

Pièges et erreurs courantes

Erreur	Cause	Solution
Coller le code dans le thème parent Avada	Le thème est mis à jour, vos modifications disparaissent	Utilisez un mu-plugin, un plugin custom, ou le thème enfant
Oublier return $fields; dans woocommerce_checkout_fields	Le filtre renvoie null, checkout cassé	Vérifiez que votre fonction retourne bien le tableau
Confusion action/filtre	Vous utilisez add_action sur un hook qui est un filtre	Utilisez add_filter pour modifier une valeur, add_action pour afficher/exécuter
Hook inadapté (rien ne s’affiche)	Votre template (builder) n’appelle pas les hooks WooCommerce standard	Revenez à un template produit WooCommerce ou injectez via le builder
Tester en production sans sauvegarde	Une faute de syntaxe coupe le site	Staging + sauvegarde + déploiement contrôlé
Cache non vidé	Vous modifiez CSS/JS mais le cache sert l’ancienne version	Videz cache plugin + cache serveur + cache navigateur
CSS/JS non chargé (mauvais enqueue)	Chemin de fichier faux ou condition is_woocommerce() jamais vraie	Testez l’URL directe du fichier et vérifiez les conditions
Copier un snippet d’un ancien tutoriel	Fonctions obsolètes, patterns non compatibles	Vérifiez sur developer.wordpress.org/reference et adaptez à WP 6.9.4+

Variante / alternative

Alternative “sans code” (ou presque) : plugin de champs checkout

Si vous ne voulez vraiment pas toucher au PHP, utilisez un plugin sérieux de personnalisation du checkout (éditeur de champs). Avantage : interface. Inconvénient : dépendance + parfois des conflits avec des thèmes/builders.

Mon approche quand je dois rester “débutant-friendly” : plugin pour la mise en forme des champs, et mini-plugin pour la validation serveur (car la validation “propre” finit souvent par nécessiter du code).

Alternative avancée : override ciblé d’un template WooCommerce

À réserver si vous devez changer la structure HTML profondément (ex. déplacer des blocs que les hooks ne permettent pas). Procédure :

1. Créez un thème enfant Avada.
2. Copiez le template depuis le plugin WooCommerce vers votre-theme-enfant/woocommerce/.
3. Modifiez-le, puis suivez les mises à jour WooCommerce (risque réel).

Pour repérer les templates, parcourez le dossier officiel : github.com/woocommerce/woocommerce/templates.

Conseils sécurité, performance et maintenance

• Ne modifiez jamais le core (WordPress/WooCommerce/Avada). Tout doit passer par plugin, thème enfant, hooks.
• Validation serveur : dès que vous rendez un champ requis, validez avec woocommerce_checkout_process. Sinon, vous aurez des commandes “incomplètes”.
• Échappement : pour afficher du texte, utilisez esc_html__() / esc_attr__(). Pour des URLs, esc_url().
• Performance : chargez CSS/JS uniquement sur les pages WooCommerce. Évitez les scripts globaux.
• Maintenance : mettez une version sur vos assets (CSS/JS). Quand vous changez le CSS, incrémentez 1.0.0 pour forcer le cache à se rafraîchir.
• Logs : activez les logs en staging. Les erreurs PHP en prod sur une boutique coûtent des ventes.

Références officielles utiles :

• developer.wordpress.org/plugins/security
• developer.wordpress.org/reference/functions/esc_html
• developer.wordpress.org/reference/functions/wp_unslash
• core.trac.wordpress.org

Ressources

• Documentation WordPress (référence des fonctions) : developer.wordpress.org/reference
• Debug WordPress (WP_DEBUG, logs) : developer.wordpress.org/advanced-administration/debug/debug-wordpress
• WooCommerce Developer Docs : developer.woocommerce.com/docs
• Templates WooCommerce (source) : github.com/woocommerce/woocommerce/templates
• Plugin WooCommerce sur WordPress.org : wordpress.org/plugins/woocommerce
• Versions PHP supportées : php.net/supported-versions.php

FAQ

Est-ce que Fusion Builder remplace WooCommerce ?

Non. Fusion Builder gère la mise en page. WooCommerce gère le catalogue, le panier, le checkout, la commande, les e-mails. Si vous essayez de “reconstruire” ces mécaniques dans le builder, vous perdez la fiabilité.

Pourquoi un mu-plugin plutôt que functions.php ?

Parce que c’est centralisé, indépendant d’Avada, et chargé automatiquement. Sur des sites maintenus à plusieurs, ça évite qu’un snippet disparaisse au prochain changement de thème enfant.

Je ne vois pas le badge stock, même en stock

Vérifiez que votre page produit utilise bien les templates WooCommerce standard. Certains templates “builder” n’exécutent pas woocommerce_before_single_product_summary. Testez en désactivant temporairement le template produit custom (si vous en avez un).

Le checkout affiche une erreur “Merci de renseigner un numéro de téléphone” alors que le champ est rempli

Ça arrive si un plugin renomme le champ (ex. billing_phone devient autre chose) ou si le checkout est remplacé. Inspectez le HTML du champ et vérifiez l’attribut name="billing_phone".

Puis-je enlever d’autres champs (code postal, région…) ?

Oui, mais attention aux contraintes de livraison/taxes. Retirer le code postal casse souvent les calculs de transport. Faites-le uniquement si vous avez une logique de livraison simple (ou digitale).

Est-ce compatible avec les produits variables ?

Oui. Les hooks utilisés ici n’interfèrent pas avec les variations. Le bloc réassurance se place sous le bouton, quelle que soit la variation sélectionnée.

Comment éviter les conflits avec un plugin de cache/minification ?

Si le checkout se comporte bizarrement (paiements qui disparaissent, spinner infini), désactivez temporairement la minification JS et testez. Excluez ensuite les scripts WooCommerce de la combinaison/minification, puis réactivez progressivement.

Comment savoir si mon thème enfant override déjà des templates WooCommerce ?

Dans votre thème enfant, cherchez un dossier /woocommerce/. S’il existe, vous avez probablement des overrides. Comparez avec la version du template dans le plugin WooCommerce (GitHub).

Est-ce que je dois utiliser un “Checkout Field Editor” plugin si j’ai ce code ?

Pas forcément. Pour 80% des besoins (retirer un champ, changer un libellé, rendre requis), le filtre woocommerce_checkout_fields suffit. Le plugin devient utile si vous avez beaucoup de conditions (B2B/B2C, champs dépendants, etc.).

Que faire si Avada affiche un titre de page et WooCommerce en affiche un autre ?

C’est un doublon de layout. Désactivez l’un des deux (souvent côté Avada Options pour les pages WooCommerce, ou via les options de page). Évitez de “cacher” au CSS si vous pouvez régler la source.

Ce code est-il compatible WordPress 6.9.4 / PHP 8.1 ?

Oui. Il utilise des API standard (hooks, enqueue, fonctions d’échappement) et les helpers WooCommerce courants (wc_clean, wc_add_notice). Si votre hébergeur est en PHP 7.x, mettez à jour : vous éviterez une partie des erreurs difficiles à diagnostiquer.