Création de site e-commerce avec Gutenberg

Il est tout à fait possible de créer un site e-commerce professionnel avec Gutenberg, l’éditeur natif de WordPress. Grâce à son système de blocs, vous pouvez concevoir des pages modernes, responsive et personnalisées, sans avoir besoin de compétences en code.

En plus de ça, Gutenberg s’intègre parfaitement (comme on le verra plus bas) avec WooCommerce, le plugin e-commerce le plus utilisé sur WordPress, ce qui vous permet de gérer vos produits, votre panier, vos commandes et vos paiements vraiment très simplement.

Avec les bons plugins (comme CoBlocks, Kadence Blocks ou Spectra) et un thème compatible, vous pouvez créer une boutique en ligne professionnelle, rapide et bien optimisée pour le référencement. C’est une excellente solution si vous souhaitez garder un site léger, évolutif et facile à prendre en main.

Gutenberg est l’éditeur de blocs intégré à WordPress. Il permet de construire vos pages et vos articles en assemblant différents types de contenus comme des titres, des images, des vidéos, des boutons ou encore des colonnes.

C’est une approche plus visuelle et plus flexible que l’ancien éditeur classique, idéale pour créer des mises en page modernes sans coder. Et pour un site e-commerce, c'est super pratique !

Il est tout à fait possible de créer une boutique en ligne avec Gutenberg, en utilisant WooCommerce. De nombreux blocs sont disponibles pour afficher vos produits, votre panier, les avis ou encore les catégories.

Vous pouvez construire l’interface de votre boutique bloc par bloc. Nos experts WordPress peuvent vous aider à créer votre site de vente en ligne avec Gutenberg et WooCommerce.

Gutenberg est parfaitement compatible avec WooCommerce. Il propose des blocs dédiés pour afficher les produits, les catégories, le panier, le formulaire de commande, les avis, etc. De plus en plus de thèmes FSE sont conçus pour tirer pleinement parti de cette intégration.

WooCommerce fonctionne de mieux en mieux avec les block themes compatibles Full Site Editing. Les blocs WooCommerce sont de plus en plus nombreux et intégrés nativement à l’éditeur, ce qui permet de personnaliser l’affichage de votre boutique sans toucher au code. Il faut simplement choisir un thème prévu pour le FSE et compatible avec WooCommerce.

Le plugin de WordPress propose une collection de blocs dédiés que vous pouvez utiliser pour construire vos templates de produit, vos pages panier ou commande, tout en gardant la logique d’édition par blocs. C’est une solution moderne pour concevoir un site e-commerce à la fois rapide et personnalisable.

Avec Gutenberg, vous pouvez concevoir chaque page de votre site e-commerce : page d’accueil, page boutique, fiche produit, panier, tunnel de commande… Vous assemblez les blocs en fonction de vos besoins, ce qui vous laisse une grande liberté dans la présentation de vos contenus. C’est une alternative légère et efficace aux constructeurs de pages traditionnels.

Si vous voulez un site e-commerce WordPress rapide, Gutenberg est une excellente solution parce que ce sera plus facile d'optimiser la vitesse du site qu'avec Elementor ou Divi notamment.

Tout dépend de vos priorités. Gutenberg est plus léger et plus rapide, ce qui est idéal pour la performance. Elementor et Divi offrent plus d’options visuelles et d’effets, mais ils peuvent alourdir le site si vous n’optimisez pas bien les éléments.

Si vous misez sur la rapidité, le SEO et la simplicité, Gutenberg est une excellente option. Pour un design très poussé avec des animations, Elementor ou Divi peuvent être intéressants.

Gutenberg est souvent le plus performant des trois (entre Gutenberg, Elementor et Divi), car il est intégré directement dans WordPress et génère un code propre et léger. Moins de scripts, moins de dépendances, et donc un temps de chargement plus rapide.

Pour un site e-commerce, où le temps de chargement est très important pour l'ergonomie mais aussi pour le classement Google, Gutenberg est une super solution.

Vous avez aujourd’hui la possibilité de personnaliser votre boutique WooCommerce directement depuis le Site Editor si vous utilisez un thème basé sur le Full Site Editing. Vous pouvez modifier l’apparence de la boutique, ajuster les titres, déplacer les blocs, gérer les colonnes… Tout se fait visuellement, sans avoir à passer par le code.

Il est tout à fait possible de créer un template personnalisé de fiche produit en utilisant Gutenberg avec un block theme. Vous ajoutez les blocs WooCommerce nécessaires (titre, prix, image, bouton ajouter au panier, avis...) et organisez la mise en page comme vous le souhaitez. Cela permet d’avoir une présentation 100% sur mesure pour vos produits.

La page de checkout WooCommerce est encore en cours d’évolution côté blocs, mais certaines parties peuvent déjà être personnalisées avec des blocs FSE ou des plugins spécifiques. Pour une personnalisation avancée, il est parfois nécessaire de combiner l’éditeur de site avec quelques ajustements via code ou extensions dédiées.

Avec un thème FSE, vous pouvez créer des modèles conditionnels pour certaines catégories ou certains types de produits. Cela vous permet d’adapter l’apparence de vos pages selon la typologie des articles, ce qui est très utile si vous avez un catalogue varié ou plusieurs univers graphiques dans votre boutique.

Ça peut rendre votre site beaucoup plus beau et dynamique. Imaginons que vous vendiez des jouets pour enfants sur votre site e-commerce. Vous pouvez mettre des couleurs et des icônes en fonction de la catégorie. Par exemple, vert pâle pour la catégorie "Nature" ou marron pour les jouets en bois par exemple.

WooCommerce propose aujourd’hui une large collection de blocs dédiés pour le FSE : bloc titre produit, image, prix, bouton ajouter au panier, note, description courte, avis clients, produits associés… Ces blocs vous permettent de construire vos fiches produit et autres pages e-commerce directement dans l’éditeur, de façon totalement personnalisée.

Les hooks et filtres classiques de WooCommerce continuent de fonctionner avec les thèmes FSE, mais leur utilisation dépend du degré de personnalisation que vous souhaitez. Pour certaines actions précises, il faudra toujours passer par le code, surtout si vous voulez ajouter des logiques spécifiques qui ne sont pas gérables avec les blocs.

Les shortcodes WooCommerce restent parfaitement utilisables dans les blocs de type “code” ou “shortcode”. Cela peut être pratique pour afficher rapidement des produits, un panier, ou une catégorie dans un endroit précis de votre page. C’est une bonne option si vous avez l’habitude de les utiliser et que vous voulez les intégrer dans une logique FSE.

Il est possible d’ajouter des champs personnalisés sur vos fiches produits, même avec un thème FSE. Pour cela, vous pouvez utiliser des plugins comme ACF (Advanced Custom Fields), qui vous permettent de créer des champs supplémentaires et de les intégrer dans vos templates via des blocs ou des blocs ACF personnalisés.

Nos experts WordPress sont disponibles ci-dessus pour vous aider à mettre en place ACF sur votre site e-commerce Gutenberg.

Les block themes sont généralement plus rapides que les thèmes classiques, car ils utilisent une structure plus légère et sont mieux optimisés pour les performances. Si vous utilisez un thème FSE bien conçu, avec un bon hébergement et des images optimisées, vous pouvez obtenir un excellent temps de chargement pour votre boutique WooCommerce.

Gutenberg est totalement gratuit, même pour une boutique en ligne. Il est intégré par défaut à WordPress, sans surcoût. Vous pouvez construire votre boutique avec WooCommerce et personnaliser les pages avec Gutenberg sans avoir à investir dans un constructeur de pages payant.

La migration vers un thème FSE demande un peu de préparation, surtout si votre boutique utilise un thème très personnalisé. Vous devrez reconstruire certaines parties de votre site avec les nouveaux blocs, mais vos produits, commandes et clients restent inchangés. Si vous êtes à l’aise avec Gutenberg, la transition peut se faire progressivement, page par page.

Mais si vous n'aimez pas la technique, nos développeurs WordPress sont disponibles ci-dessus pour créer votre site e-commerce Gutenberg ou migrer votre site actuel vers l'éditeur de WordPress.

Pour trouver un freelance expert Gutenberg, vous pouvez vous rendre sur la plateforme BeFreelancr (vous êtes sur la bonne page). Vous trouverez ci-dessus des spécialistes WordPress qui maîtrisent la création de boutiques en ligne avec WooCommerce et l’éditeur de blocs, capables de vous accompagner dans un projet 100% personnalisé.