Découvrez comment personnaliser votre thème WooCommerce sans coder : réglages natifs, éditeur de blocs, constructeurs visuels et limites à connaître pour un site performant.
Personnaliser un thème WooCommerce sans code consiste à modifier l'apparence et la mise en page d'une boutique en ligne via l'éditeur de blocs WordPress, le Customizer, les constructeurs de pages visuels et les réglages natifs, sans écrire une ligne de PHP, CSS ou JavaScript.
Pour personnaliser un thème WooCommerce sans code, utilisez l'éditeur de blocs (Site Editor) pour les thèmes basés sur FSE, le Customizer pour les réglages globaux, et un constructeur de pages comme Elementor ou Beaver Builder pour des mises en page avancées. Les réglages natifs de WooCommerce (pages, couleurs, typographie) offrent une base rapide, mais attention aux limites : certains éléments comme le panier ou le tunnel de commande restent complexes à modifier sans extension. Privilégiez un thème compatible avec l'éditeur de blocs (Storefront, Blocksy, Kadence) pour maximiser les possibilités sans code.
Cas fréquent observé : les propriétaires de boutique passent des heures à chercher le réglage parfait dans le Customizer, puis découvrent que la mise en page du produit ne correspond pas à leurs maquettes. Dans les faits, la personnalisation sans code bute souvent sur les templates de produit et de panier, qui nécessitent des hooks ou des snippets PHP pour être modifiés finement. En accompagnement, on constate que l'absence de code peut conduire à une surcharge de plugins (constructeur + extensions de blocs + traducteur visuel), ce qui alourdit le site et réduit la vitesse de chargement.
WooCommerce intègre plusieurs options de personnalisation accessibles depuis le tableau de bord WordPress, sans aucun code. Ces réglages permettent de modifier l’affichage des produits, des pages de catégorie et du panier. Pour y accéder, rendez-vous dans WooCommerce > Réglages > Produits puis dans l’onglet Affichage. Vous pouvez y définir le nombre de colonnes par page, le nombre de produits par page et l’ordre d’affichage (par défaut, par popularité, par note, par prix).
Dans WooCommerce > Réglages > Avancé, vous associez les pages clés : boutique, panier, commande et mon compte. Ces pages sont créées automatiquement à l’installation, mais vous pouvez les remplacer par des pages personnalisées créées avec l’éditeur de blocs. Attention : si vous modifiez une page de commande, assurez-vous qu’elle contient le bloc [woocommerce_checkout] ou le shortcode équivalent, sinon le tunnel de commande ne s’affichera pas.
Enfin, le Customizer (Apparence > Personnaliser) offre des réglages de couleurs, typographie et mise en page selon le thème actif. Pour un thème comme Storefront, vous pouvez ajuster la largeur du contenu, la couleur des boutons et l’arrière-plan. Ces modifications sont visibles en temps réel et s’appliquent à l’ensemble du site, mais restent limitées aux options proposées par le thème.
Depuis WordPress 5.9, l’éditeur de site complet (Full Site Editing – FSE) permet de personnaliser l’intégralité d’un thème via des blocs. Si votre thème est compatible FSE (comme Twenty Twenty-Four ou un thème basé sur le système de blocs), vous pouvez modifier l’en-tête, le pied de page, les modèles de page et les parties de template sans code.
Pour y accéder, allez dans Apparence > Éditeur. Vous verrez une interface visuelle où chaque élément est un bloc : navigation, titre du site, boucle de produits, bouton Ajouter au panier. Vous pouvez réorganiser les blocs, modifier leurs réglages (couleur, typographie, espacement) et ajouter des blocs WooCommerce spécifiques comme Produits populaires, Catégories de produits ou Prix du produit.
L’éditeur de blocs est particulièrement utile pour créer des mises en page uniques sur la page d’accueil ou les pages de contenu. En revanche, pour les pages de produit et de panier, les blocs WooCommerce sont encore en évolution : certains éléments (comme le champ de coupon ou les options de livraison) ne sont pas modifiables directement. Vous devrez peut-être utiliser un constructeur de pages complémentaire ou un thème avec des templates dédiés.
Les constructeurs de pages (page builders) sont la solution la plus répandue pour personnaliser WooCommerce sans code. Elementor (version gratuite et Pro), Beaver Builder et Divi offrent des interfaces glisser-déposer avec des widgets spécifiques pour WooCommerce : grille de produits, panier, formulaire de commande, onglets produit, etc.
Avec Elementor Pro, vous pouvez créer des templates de produit uniques : modifier la disposition des images, ajouter un compteur de stock, un bouton d’achat direct, ou une section d’avis clients. Le constructeur permet aussi de personnaliser le tunnel de commande (Checkout) en ajoutant des champs personnalisés, des blocs de contenu ou en réorganisant les sections. Attention : la personnalisation du tunnel de commande avec Elementor nécessite souvent l’extension WooCommerce Checkout Manager ou des réglages avancés.
Beaver Builder est plus léger et se marie bien avec les thèmes comme GeneratePress ou Astra. Il propose des modules WooCommerce de base, mais moins de widgets que Elementor. Divi intègre son propre thème et un constructeur visuel complet, mais peut être plus lourd et moins flexible pour des modifications très spécifiques. Dans tous les cas, testez la compatibilité avec votre thème et vérifiez que les mises à jour du constructeur ne cassent pas l’affichage de vos produits.
La page de produit est la page la plus visitée d’une boutique : sa personnalisation impacte directement le taux de conversion. Sans code, vous pouvez modifier la mise en page via les réglages du thème ou un constructeur. Pour un thème classique, le Customizer permet souvent de choisir entre une disposition verticale ou horizontale de la galerie, d’activer le zoom au survol ou d’afficher les produits associés.
Avec l’éditeur de blocs ou un constructeur, vous pouvez ajouter des blocs supplémentaires : un bloc de témoignages clients, un bloc de garantie, un compteur de ventes, ou un bloc de livraison. Elementor Pro propose un widget Produit qui affiche le titre, le prix, la description et le bouton d’achat, que vous pouvez organiser librement. Vous pouvez aussi masquer certains onglets (avis, description, informations complémentaires) via les réglages du thème ou en utilisant un plugin comme WooCommerce Tab Manager.
Limite : la modification du comportement du panier (quantité par défaut, ajout au panier avec redirection) ou l’ajout de champs personnalisés (date, texte) nécessite souvent un snippet ou un plugin. De même, la galerie d’images (zoom, lightbox) dépend du thème : certains thèmes ne permettent pas de changer le comportement sans code.
Le tunnel de commande (checkout) est l’étape critique où l’utilisateur finalise son achat. WooCommerce propose un formulaire par défaut que vous pouvez personnaliser sans code via les réglages : dans WooCommerce > Réglages > Expédition et Paiement, vous activez/désactivez les modes de livraison et de paiement. Vous pouvez aussi modifier les champs du formulaire (obligatoire, optionnel) via WooCommerce > Réglages > Comptes et confidentialité.
Pour une personnalisation visuelle plus poussée, utilisez un constructeur de pages avec un widget Checkout (Elementor Pro) ou un plugin dédié comme Checkout Field Editor (gratuit) ou WooCommerce Checkout Manager. Ces outils permettent d’ajouter des champs (numéro de téléphone obligatoire, date de livraison), de réorganiser les sections et de modifier les textes sans code. Attention : certains plugins de checkout peuvent entrer en conflit avec le thème ou d’autres extensions, testez toujours sur un site de staging.
Le panier peut être personnalisé via les réglages du thème (affichage du panier dans l’en-tête, page panier) ou via un constructeur. Elementor propose un widget Panier qui reprend la table des produits. Vous pouvez y ajouter un bloc de codes promo ou un bloc de livraison estimée. Limite : la logique de calcul des frais de port ou des réductions conditionnelles reste gérée par WooCommerce et ne peut pas être modifiée visuellement sans extension.
Les pages de catégorie (archives produit) listent les produits d’une même famille. Sans code, vous pouvez modifier leur mise en page via le Customizer (nombre de colonnes, affichage des sous-catégories) ou via l’éditeur de blocs si votre thème est FSE. Pour un thème classique, les réglages sont souvent limités : vous pouvez choisir entre une grille ou une liste, mais pas ajouter de contenu personnalisé en haut de page.
Avec Elementor ou Beaver Builder, vous pouvez créer un template de catégorie unique : ajouter une bannière, du texte descriptif, des filtres personnalisés ou des produits en vedette. Elementor Pro permet de définir des conditions d’affichage (par exemple, un template différent pour la catégorie « Vêtements » et pour « Accessoires »). Cette approche est très efficace pour améliorer le référencement naturel et l’expérience utilisateur.
Limite : la modification des filtres de tri (par prix, par popularité) ou l’ajout de filtres par attribut (taille, couleur) sans code nécessite un plugin comme WooCommerce Product Filter ou FacetWP. De plus, l’affichage des produits en grille avec des tailles d’image différentes peut demander du CSS personnalisé si le thème ne le gère pas nativement.
Bien que les outils sans code soient puissants, certaines fonctionnalités restent hors de portée sans intervention technique. Les principales limites concernent :
Pour contourner ces limites sans coder, privilégiez des thèmes riches en options (comme Flatsome ou WoodMart) qui intègrent des constructeurs propriétaires avec des templates prêts à l’emploi. Vous pouvez aussi utiliser un service de personnalisation ponctuelle (un développeur freelance pour un snippet spécifique) plutôt que d’installer un plugin lourd. Enfin, testez toujours la compatibilité des extensions sur un site de staging avant de les appliquer en production.
Le choix du thème est déterminant pour la facilité de personnalisation sans code. Un thème mal conçu vous obligera à coder ou à multiplier les plugins. Voici les critères à évaluer :
Pour une boutique simple, un thème gratuit comme Kadence ou Blocksy offre un bon équilibre entre options de personnalisation et performance. Pour une boutique plus complexe (nombreuses variantes, filtres avancés), un thème premium avec constructeur intégré est souvent plus efficace qu’un thème générique + Elementor Pro.
Pour éviter les problèmes de performance et de maintenance, suivez ces bonnes pratiques :
Enfin, gardez à l’esprit que la personnalisation sans code est idéale pour les ajustements visuels, mais que pour des fonctionnalités métier (calcul de frais de port complexes, abonnements, réservations), un développement sur mesure ou une extension spécialisée reste la meilleure solution.
| Constructeur | Version gratuite | Widgets WooCommerce | Compatibilité thèmes |
|---|---|---|---|
| Elementor | Oui (limité) | Widgets de base (produits, panier) | Tous les thèmes compatibles Elementor |
| Elementor Pro | Non | Widgets avancés (checkout, panier dynamique, templates produit) | Tous les thèmes compatibles Elementor |
| Beaver Builder | Oui (limité) | Modules de base (grille, bouton) | Thèmes légers (GeneratePress, Astra) |
| Divi Builder | Non (inclus avec thème Divi) | Modules WooCommerce (produits, panier, commande) | Thème Divi uniquement |
| Gutenberg (éditeur de blocs) | Oui (intégré à WordPress) | Blocs WooCommerce natifs (produits, catégories, prix) | Thèmes FSE uniquement |
| Type de page | Réglages natifs WooCommerce | Customizer | Constructeur de pages |
|---|---|---|---|
| Page d’accueil | Non applicable | Couleurs, typographie, mise en page | Oui (mise en page complète) |
| Page produit | Nombre de colonnes, ordre, galerie | Disposition galerie, zoom | Oui (template personnalisé) |
| Page catégorie | Nombre de colonnes, affichage sous-catégories | En-tête de catégorie | Oui (template par catégorie) |
| Panier | Page panier par défaut | Affichage du panier dans l’en-tête | Oui (widget panier) |
| Tunnel de commande | Champs obligatoires/optionnels, modes de paiement | Non | Oui (widget checkout Elementor Pro) |
| Limite | Impact | Solution sans code |
|---|---|---|
| Modifier la position du prix sur la page produit | Difficile sans code | Utiliser un thème avec options de mise en page (ex: Flatsome) |
| Ajouter un champ personnalisé dans le checkout | Nécessite un plugin | Installer Checkout Field Editor (gratuit) |
| Personnaliser les e-mails transactionnels | Design limité | Utiliser WooCommerce Email Customizer (plugin) |
| Créer un filtre par attribut (taille, couleur) | Pas de filtre natif | Installer WooCommerce Product Filter (plugin) |
| Modifier le comportement du panier (redirection après ajout) | Réglage limité | Utiliser un plugin comme WooCommerce Cart Redirect |
Thème & design Shopify
On évalue votre thème sur la vitesse mobile, la conversion et la compatibilité apps, puis on vous oriente vers le bon choix.
Oui, partiellement. Les réglages natifs de WooCommerce (affichage des produits, pages de commande) et le Customizer du thème permettent des modifications de base. Pour des mises en page avancées (page d’accueil, templates de produit), vous aurez besoin d’un thème compatible avec l’éditeur de blocs (FSE) ou d’un constructeur de pages. Sans plugin, vous restez limité aux options proposées par le thème.
Elementor Pro est le plus complet avec des widgets dédiés au checkout, au panier et aux templates de produit. Beaver Builder est plus léger et adapté aux thèmes minimalistes. Divi est tout-en-un mais plus lourd. Pour une solution gratuite, l’éditeur de blocs WordPress (Gutenberg) est recommandé si votre thème est compatible FSE.
Utilisez un plugin comme Checkout Field Editor (gratuit) pour ajouter/modifier des champs, ou un constructeur comme Elementor Pro qui propose un widget Checkout. Vous pouvez aussi modifier les réglages WooCommerce (champs obligatoires, modes de paiement) sans plugin. Pour une personnalisation visuelle avancée, un constructeur est nécessaire.
L’éditeur de blocs (Gutenberg) permet de modifier les pages et les templates de base, mais les blocs WooCommerce sont encore limités : vous ne pouvez pas personnaliser finement le panier (tableau des produits, champ de coupon) ni le tunnel de commande. De plus, certains thèmes FSE n’offrent pas de templates de produit modifiables. Pour des besoins avancés, un constructeur de pages reste plus adapté.
Oui, même sans coder, un thème enfant protège vos modifications lors des mises à jour du thème parent. Vous pouvez le créer via un plugin comme Child Theme Configurator. Si vous utilisez un constructeur de pages, les modifications sont stockées dans la base de données et non dans les fichiers du thème, mais un thème enfant reste une bonne pratique pour éviter toute perte.
Optimisez les images (compression, WebP), activez un cache (WP Rocket, W3 Total Cache), minifiez le CSS/JS et utilisez un CDN. Évitez d’empiler trop de plugins de personnalisation : préférez un thème avec des options intégrées. Testez la vitesse avec GTmetrix et réduisez le nombre de requêtes en désactivant les blocs inutilisés.
Oui, avec un plugin comme WooCommerce Email Customizer (gratuit) ou YayMail. Ces outils permettent de modifier le design (couleurs, logo, mise en page) et le contenu des e-mails (confirmation de commande, réinitialisation de mot de passe) sans coder. Les réglages natifs de WooCommerce ne proposent que des options très limitées (texte de l’en-tête, pied de page).
Sources : Shopify Theme Store · Shopify — vitesse · Google — Core Web Vitals.