Développement personnalisé

Niveau: Avancé à Expert | Temps de lecture: 15 minutes

Développez fonctionnalités WooCommerce boutique en ligne sur mesure via hooks, snippets et code custom quand extensions standards insuffisantes.

Dans ce guide :

Avertissement - Le développement personnalisé implique une responsabilité complète en matière de maintenance, sécurité et compatibilité. Un code mal écrit entraîne des failles de sécurité, des bugs et peut casser votre site. Si vous n'avez pas d'expérience en PHP, privilégiez les plugins existants ou faites appel à un développeur professionnel.

Hooks et filters

Les hooks et filters constituent le système d'extensibilité de WordPress et WooCommerce qui permet de modifier le comportement sans toucher au code core.

Actions vs filters

Les Actions exécutent du code à un moment précis (par exemple l'envoi d'un email après une commande, ou l'ajout d'une colonne dans l'admin).

Les Filters modifient des données avant leur affichage ou leur sauvegarde (comme le prix d'un produit, un titre, ou le texte d'un bouton).

La différence fondamentale : les Actions font quelque chose, tandis que les Filters transforment quelque chose.

Hooks WooCommerce courants

Actions produits :

woocommerce_before_single_product - Avant affichage produit
woocommerce_after_single_product_summary - Après description
woocommerce_product_thumbnails - Zone images produit

Actions checkout :

woocommerce_before_checkout_form - Avant formulaire
woocommerce_checkout_order_processed - Post-validation commande
woocommerce_thankyou - Page confirmation

Filters prix :

woocommerce_get_price_html - Affichage prix
woocommerce_cart_item_price - Prix panier
woocommerce_order_amount_total - Total commande

Filters textes :

woocommerce_product_single_add_to_cart_text - Texte bouton "Ajouter au panier"
woocommerce_breadcrumb_defaults - Fil d'Ariane

Chez Condorito, nous vous proposons une documentation complète pour ces hooks WooCommerce et WordPress, regroupés par fonctionnalité et illustrés par un "code snippet".

Exemples pratiques

Modifier texte bouton "Ajouter au panier" :

add_filter('woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text');
function custom_add_to_cart_text($text) {
    return 'Acheter maintenant';
}

Résultat : le bouton affiche "Acheter maintenant" au lieu de "Ajouter au panier".

Ajouter un texte personnalisé après le prix du produit :

add_action('woocommerce_single_product_summary', 'custom_text_after_price', 15);
function custom_text_after_price() {
    echo '<p class="shipping-notice">Livraison gratuite dès 50€</p>';
}

La priorité 15 signifie que ce texte s'affichera après le prix (qui a la priorité 10) et avant le bouton d'ajout au panier (qui a la priorité 30).

Masquer les produits en rupture de stock :

add_filter('woocommerce_product_is_visible', 'hide_out_of_stock_products', 10, 2);
function hide_out_of_stock_products($visible, $product_id) {
    $product = wc_get_product($product_id);
    if (!$product->is_in_stock()) {
        return false;
    }
    return $visible;
}

Avec ce code, les produits dont le stock est égal à zéro n'apparaissent plus dans le catalogue.

Trouver le bon hook

Les DevTools du navigateur permettent d'inspecter un élément, d'identifier sa classe CSS (comme .single_add_to_cart_button), puis de chercher "add to cart button hook" sur Google.

Query Monitor (un plugin) affiche les hooks exécutés sur la page courante ainsi que leur ordre de priorité.

Le code source de WooCommerce se trouve dans /wp-content/plugins/woocommerce/templates/ et contient tous les templates. La commande grep -r "do_action" . liste toutes les actions disponibles.

La documentation officielle sur woocommerce.github.io/code-reference/ fournit une référence complète de tous les hooks et fonctions.

Soyez patient : trouver le bon hook représente 30% de l'effort total. C'est un apprentissage progressif.

Code snippets 🔺

Les snippets sont des morceaux de code PHP personnalisé ajoutés à votre site sans avoir besoin de créer un plugin complet.

Functions.php du thème enfant

Le fichier functions.php de votre thème enfant est l'emplacement standard pour les snippets.

Procédure :

Créez un thème enfant (avec le plugin Child Theme Configurator)
Allez dans Apparence > Éditeur de fichier de thème
Sélectionnez votre thème enfant dans le menu déroulant
Ouvrez le fichier functions.php
Ajoutez votre code à la fin du fichier (avant la balise ?> si elle existe)

Exemple d'ajout d'un snippet pour afficher un texte personnalisé sur la page de checkout :

add_action('woocommerce_before_checkout_form', 'custom_checkout_message');
function custom_checkout_message() {
    echo '<div class="custom-message">Profitez de -10% avec le code BIENVENUE10</div>';
}

Sauvegardez le fichier puis testez votre page de checkout pour vérifier l'affichage.

Avantages :

Solution simple et rapide à mettre en place
Ne nécessite pas l'installation d'un plugin supplémentaire

Inconvénients :

Le fichier devient énorme et illisible avec plus de 100 snippets
Une erreur de syntaxe PHP provoque un écran blanc (fatal error)
Si vous désactivez le thème, vous perdez tous vos snippets

Plugin code snippets

Code Snippets est un plugin gratuit avec plus de 3 millions d'installations. C'est un gestionnaire de snippets avec une interface sécurisée.

Installation :

Allez dans Extensions > Ajouter et cherchez "Code Snippets"
Cliquez sur Activer après l'installation
Accédez au menu Snippets > Ajouter

Pour créer un snippet :

Donnez-lui un nom descriptif, par exemple "Custom Add to Cart Text"
Ajoutez votre code :

add_filter('woocommerce_product_single_add_to_cart_text', function($text) {
    return 'Acheter maintenant';
});

Cochez l'option "Run snippet everywhere"
Cliquez sur Enregistrer et activer

Avantages :

Interface visuelle, pas besoin d'utiliser FTP ou un éditeur de code
Possibilité de désactiver un snippet sans supprimer le code (facilite le debug)
Les erreurs de syntaxe sont détectées, votre site ne casse pas
Export et import de snippets possibles (pour backup ou migration)
Organisation par catégories de vos snippets

Recommandation : Utilisez Code Snippets plutôt que functions.php dans 90% des cas.

Snippets WooCommerce utiles

Minimum commande 30€ :

add_action('woocommerce_checkout_process', 'minimum_order_amount');
function minimum_order_amount() {
    $minimum = 30;
    if (WC()->cart->total < $minimum) {
        wc_add_notice(sprintf('Minimum de commande : %s€', $minimum), 'error');
    }
}

Frais manipulation produits lourds :

add_action('woocommerce_cart_calculate_fees', 'heavy_item_fee');
function heavy_item_fee() {
    if (is_admin() && !defined('DOING_AJAX')) return;

    $heavy_fee = 0;
    foreach (WC()->cart->get_cart() as $item) {
        $product = $item['data'];
        if ($product->get_weight() > 10) { // >10kg
            $heavy_fee += 5;
        }
    }

    if ($heavy_fee > 0) {
        WC()->cart->add_fee('Frais manutention', $heavy_fee);
    }
}

Champ personnalisé produit :

// Ajoute champ admin
add_action('woocommerce_product_options_general_product_data', 'custom_product_field');
function custom_product_field() {
    woocommerce_wp_text_input([
        'id' => '_custom_field',
        'label' => 'Garantie (mois)',
        'type' => 'number'
    ]);
}

// Sauvegarde
add_action('woocommerce_process_product_meta', 'save_custom_product_field');
function save_custom_product_field($post_id) {
    $value = $_POST['_custom_field'];
    if (!empty($value)) {
        update_post_meta($post_id, '_custom_field', esc_attr($value));
    }
}

// Affiche
add_action('woocommerce_single_product_summary', 'display_custom_field', 25);
function display_custom_field() {
    global $product;
    $value = get_post_meta($product->get_id(), '_custom_field', true);
    if ($value) {
        echo '<p>Garantie : ' . $value . ' mois</p>';
    }
}

Repositoires snippets : Notre répertoire Hooks and filters, mais aussi businessbloomer.com, wpsnippets.com, github.com/woocommerce/woocommerce/wiki/snippets.

Modification templates 🔺

Les templates WooCommerce sont des fichiers PHP situés dans le dossier /templates/ qui contrôlent l'affichage des pages (produit, panier, checkout).

Structure des templates

Les templates sont situés dans /wp-content/plugins/woocommerce/templates/ :

single-product.php - Page d'un produit individuel
archive-product.php - Liste des produits (catégorie, boutique)
cart/cart.php - Page du panier
checkout/form-checkout.php - Formulaire de checkout
myaccount/my-account.php - Compte client

Ne modifiez JAMAIS ces fichiers directement - Les mises à jour de WooCommerce les écrasent. Utilisez toujours un override dans votre thème enfant.

Override de template

Pour personnaliser un template, copiez-le vers votre thème enfant puis modifiez la copie.

Procédure :

Identifiez le template à modifier (par exemple cart/cart.php)
Créez le dossier /wp-content/themes/votre-theme-enfant/woocommerce/cart/
Copiez le fichier /wp-content/plugins/woocommerce/templates/cart/cart.php vers le dossier créé
Modifiez cette copie selon vos besoins

WooCommerce utilisera en priorité la version présente dans votre thème.

Exemple - Modifier titre "Panier" :

Fichier /votre-theme-enfant/woocommerce/cart/cart.php :

<h1><?php esc_html_e('Votre sélection', 'woocommerce'); ?></h1>

Au lieu de :

<h1><?php esc_html_e('Cart', 'woocommerce'); ?></h1>

Mises à jour des templates

WooCommerce met à jour ses templates dans les nouvelles versions. Un template overridé qui devient obsolète peut causer des bugs.

WooCommerce System Status - Accédez à WooCommerce > Statut > Système > Onglet Templates

Cette page liste tous vos templates overridés avec leur version. Si vous voyez cart.php version 3.5.0 alors que WooCommerce 8.0 utilise cart.php 4.2.0, vous verrez un warning "Outdated".

Action recommandée : Comparez votre template actuel avec la nouvelle version (utilisez un outil de diff comme WinMerge ou VSCode), puis reportez vos modifications personnalisées dans la nouvelle version.

Effectuez ces vérifications deux fois par an après les mises à jour majeures.

Alternatives sans code

Elementor WooCommerce Builder (version Pro) permet d'éditer les templates visuellement (page produit, archive, panier). Aucun code nécessaire.

Les Customizers de thèmes (Storefront, Astra) offrent des options de personnalisation des templates sans avoir besoin d'override.

Privilégiez ces solutions quand c'est possible : la maintenance est simplifiée.

REST API 🔺

L'API REST de WooCommerce expose les données de votre boutique (produits, commandes, clients) via des endpoints HTTP. Elle permet les intégrations tierces, les applications mobiles et les automatisations.

Authentification

Clés API - WooCommerce > Réglages > Avancé > REST API > Ajouter clé

Permissions :

Read - Lecture seule (analytics externes)
Write - Création/modification (imports)
Read/Write - Complet (dangereuses, limitez)

Conservez Consumer Key et Consumer Secret (affichés une fois).

Endpoints courants

Base URL : https://votresite.com/wp-json/wc/v3/

Produits :

GET /products - Liste tous produits
GET /products/{id} - Détails produit spécifique
POST /products - Créer produit
PUT /products/{id} - Modifier produit
DELETE /products/{id} - Supprimer produit

Commandes :

GET /orders - Liste commandes
GET /orders/{id} - Détails commande
POST /orders - Créer commande (rare, paiements externes)
PUT /orders/{id} - Modifier statut

Clients :

GET /customers - Liste clients
GET /customers/{id} - Détails client

Documentation : woocommerce.github.io/woocommerce-rest-api-docs/

Exemple requête

Récupérer produits (cURL) :

curl https://votresite.com/wp-json/wc/v3/products \
  -u consumer_key:consumer_secret

Créer produit (Python) :

import requests
from requests.auth import HTTPBasicAuth

url = "https://votresite.com/wp-json/wc/v3/products"
auth = HTTPBasicAuth('ck_xxxxx', 'cs_xxxxx')
data = {
    "name": "Nouveau Produit",
    "type": "simple",
    "regular_price": "29.99",
    "description": "Description produit"
}
response = requests.post(url, auth=auth, json=data)
print(response.json())

Modifier statut commande (JavaScript) :

const axios = require('axios');

axios.put('https://votresite.com/wp-json/wc/v3/orders/123', {
    status: 'completed'
}, {
    auth: {
        username: 'ck_xxxxx',
        password: 'cs_xxxxx'
    }
}).then(response => console.log(response.data));

Cas d'usage

Synchronisation ERP - Import quotidien stocks depuis système interne vers WooCommerce.

App mobile custom - Fetch produits, passer commandes via app React Native/Flutter.

Analytics avancés - Export commandes vers BI tools (Tableau, Power BI).

Automatisations Zapier/Make - Webhook commande → CRM, emails personnalisés, gestion expédition.

Marketplace - Plusieurs vendeurs gèrent catalogues via API (multi-vendor).

L'API REST offre une puissance d'intégrations quasi-infinie. Elle requiert cependant des compétences solides en développement back-end.

Quand faire appel à un développeur 🔺

Certains besoins dépassent le cadre des snippets simples.

Signaux indiquant le besoin d'un développeur

Fonctionnalité complexe - Vous avez besoin d'un système d'abonnements récurrents sur mesure, d'un calcul de prix dynamique multi-critères, ou d'une intégration avec un ERP propriétaire.

Aucun plugin existant - Vous avez cherché sur WooCommerce.com, WordPress.org et CodeCanyon, mais rien ne correspond exactement à votre besoin.

Performance critique - Votre catalogue contient plus de 100 000 produits, vous avez des requêtes complexes et vous avez besoin d'optimisations de base de données personnalisées.

Sécurité sensible - Vous devez gérer des paiements non-standards, des données RGPD complexes, ou un système multi-devises avec des conversions crypto.

Budget disponible - Le développement personnalisé coûte entre 1000 et 10 000€ selon la complexité. C'est rentable si c'est au cœur de votre business.

Profil développeur WooCommerce

Compétences requises :

PHP avancé (POO, namespaces, Composer)
WordPress (hooks, CPT, taxonomies, WP_Query)
WooCommerce (CRUD objects, sessions, cart API)
MySQL (optimisation requêtes, indexes)
JavaScript (React pour checkout blocks modernes)
REST API (intégrations tierces)
Git (versioning, déploiement)

Vérifiez le portfolio du développeur avec des projets WooCommerce similaires au vôtre. Demandez des références de clients e-commerce.

Plateformes

Upwork - Freelances internationaux facturant entre 30 et 80$/h selon la localisation et l'expertise.

Codeur.com - Freelances français facturant entre 50 et 120€/h.

Malt - Freelances premium français facturant entre 400 et 800€ par jour.

Agences spécialisées - Projets entre 5 000 et 50 000€ avec des garanties et de la maintenance. Notre agence développe des boutiques personnalisées.

Cahier des charges

Un document précis évite les malentendus et les dépassements de budget.

À inclure obligatoirement :

Objectif business - Par exemple "Augmenter les conversions de 20% via un checkout simplifié"
Fonctionnalités détaillées - Rédigées sous forme de user stories ("En tant que client, je veux...")
Designs et wireframes - Maquettes Figma ou Adobe XD des pages clés
Intégrations requises - APIs tierces (Stripe, Mailchimp, ERP)
Contraintes techniques - Votre hébergeur actuel, la stack technologique existante
Timeline - Deadline réaliste (3 à 6 mois pour les projets moyens)
Budget - Fourchette claire et documentée

Plus votre cahier des charges est précis, plus le devis sera précis. Un cahier des charges vague peut doubler le budget final.

Maintenance post-développement

Le code personnalisé nécessite une maintenance continue.

Mises à jour - WordPress et WooCommerce évoluent constamment, votre code personnalisé nécessitera des ajustements.

Corrections de bugs - Des corrections ponctuelles seront nécessaires.

Évolutions - Vous aurez besoin d'ajouter de nouvelles fonctionnalités métier.

Contrat de maintenance - Comptez entre 500 et 2000€ par mois selon la complexité. Ou un forfait horaire de 80 à 120€/h.

Budgetez environ 20% du coût de développement initial par an pour la maintenance.

Besoin développement WooCommerce custom ? Notre agence spécialisée conçoit fonctionnalités sur mesure. Demandez un devis.

En résumé

Le développement custom WooCommerce repose sur les hooks (actions et filtres) qui permettent de modifier le comportement sans toucher au core. Utilisez les snippets de code via Code Snippets ou functions.php du thème enfant pour les petites modifications. Créez des plugins personnalisés pour les fonctionnalités complexes réutilisables. Consultez la documentation officielle WooCommerce et les forums pour trouver des solutions éprouvées avant de coder from scratch. Testez toujours en staging et commentez votre code pour faciliter la maintenance. Respectez les standards WordPress (PHP_CodeSniffer, WordPress Coding Standards) pour garantir la qualité et la sécurité.

Prochaines étapes 🔺

Extensions Recommandées - Sélection plugins éprouvés
Installation Extensions - Process sécurisé
Personnalisation Thème - Design sans code
Retour Extensions - Vue d'ensemble

Navigation : ← Personnalisation Thème | Code Personnalisé | Suivant : Résolution Problèmes →