{"id":75580,"date":"2024-01-23T19:23:29","date_gmt":"2024-01-23T18:23:29","guid":{"rendered":"https:\/\/kinqsta.com\/fr\/?p=75580&#038;preview=true&#038;preview_id=75580"},"modified":"2024-01-24T12:44:33","modified_gmt":"2024-01-24T11:44:33","slug":"blocs-woocommerce","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/","title":{"rendered":"Blocs WooCommerce : Ajoutez des fonctionnalit\u00e9s WooCommerce \u00e0 votre site WordPress"},"content":{"rendered":"<p>Les blocs WooCommerce vous aident \u00e0 cr\u00e9er des pages de boutique personnalis\u00e9es, \u00e0 pr\u00e9senter vos produits et \u00e0 ajouter des fonctionnalit\u00e9s de commerce \u00e9lectronique avanc\u00e9es telles que le filtrage et la recherche, le tout sans \u00e9crire une seule ligne de code.<\/p>\n<p>De nombreux blocs sont livr\u00e9s par d\u00e9faut avec WooCommerce, mais plusieurs nouveaux ne le sont pas. Vous pouvez utiliser ces nouveaux blocs dans votre boutique WooCommerce en installant l&rsquo;<a href=\"https:\/\/wordpress.org\/plugins\/woo-gutenberg-products-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">extension\u00a0WordPress WooCommerce Blocks<\/a>. Cette extension est un terrain d&rsquo;essai pour les offres exp\u00e9rimentales et les ajouts futurs potentiels aux blocs de base de WooCommerce.<\/p>\n<p>L&rsquo;int\u00e9gration des blocs WooCommerce dans WordPress est simple avec Kinsta, o\u00f9 vous pouvez inclure WooCommerce pendant le processus d&rsquo;installation en <a href=\"https:\/\/kinqsta.com\/fr\/docs\/hebergement-wordpress\/premiers-pas-wordpress\/nouveau-site\/#install-woocommerce\">cochant une case<\/a>. Cette int\u00e9gration facilite la cr\u00e9ation rapide et sans effort d&rsquo;une boutique en ligne.<\/p>\n<p>Ce guide pratique vous accompagne dans l&rsquo;ajout de fonctionnalit\u00e9s WooCommerce \u00e0 votre site WordPress \u00e0 l&rsquo;aide des blocs WooCommerce.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Pr\u00e9-requis<\/h2>\n<p>Pour suivre ce guide, assurez-vous d&rsquo;avoir :<\/p>\n<ul>\n<li><a href=\"https:\/\/en-ca.wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener noreferrer\">WooCommerce<\/a> install\u00e9 et activ\u00e9 dans votre tableau de bord WordPress<\/li>\n<li><a href=\"https:\/\/kinqsta.com\/wordpress\/\">Vous \u00eates familier avec WordPress<\/a><\/li>\n<\/ul>\n<p>Si vous n&rsquo;avez pas encore de site WordPress, vous pouvez en <a href=\"https:\/\/kinqsta.com\/fr\/docs\/hebergement-wordpress\/premiers-pas-wordpress\/nouveau-site\/\">cr\u00e9er un \u00e0 partir du tableau de bord de Kinsta<\/a> ou <a href=\"https:\/\/kinqsta.com\/fr\/blog\/construire-site-wordpress-hors-ligne\/\">via DevKinsta localement<\/a>. Une fois que vous avez votre site, importez <a href=\"https:\/\/github.com\/woocommerce\/woocommerce\/blob\/trunk\/plugins\/woocommerce\/sample-data\/sample_products.csv\" target=\"_blank\" rel=\"noopener noreferrer\">ces exemples de produits<\/a> pour votre boutique WooCommerce.<\/p>\n<h2>Explorer les blocs WooCommerce<\/h2>\n<p>L&rsquo;\u00e9diteur de blocs par d\u00e9faut de WordPress, introduit avec la version 5.0, est l&rsquo;<a href=\"https:\/\/kinqsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">\u00e9diteur Gutenberg<\/a>. Il a remplac\u00e9 l&rsquo;\u00e9diteur classique par un syst\u00e8me bas\u00e9 sur des blocs, permettant aux utilisateurs de construire et de personnaliser un contenu visuellement attrayant sans connaissances approfondies en mati\u00e8re de codage frontend.<\/p>\n<p>WooCommerce Blocks s&rsquo;int\u00e8gre de mani\u00e8re transparente \u00e0 l&rsquo;interface intuitive par glisser-d\u00e9poser de l&rsquo;\u00e9diteur Gutenberg, offrant un ensemble de blocs d\u00e9di\u00e9s con\u00e7us pour l&rsquo;affichage des produits, la gestion des paniers, les processus de paiement, et plus encore.<\/p>\n<p>Cette int\u00e9gration vous permet de profiter pleinement de la flexibilit\u00e9 et de la simplicit\u00e9 de l&rsquo;\u00e9diteur de blocs tout en adaptant votre site WordPress pour des performances eCommerce optimales.<\/p>\n<p>Pour utiliser les blocs WooCommerce, commencez par ouvrir ou cr\u00e9er une page ou un article. Cliquez sur le bouton <strong>+<\/strong> dans la barre sup\u00e9rieure pour afficher tous les blocs, puis naviguez jusqu&rsquo;\u00e0 la section <strong>WOOCOMMERCE<\/strong>. Voici un bref aper\u00e7u des diff\u00e9rents blocs :<\/p>\n<ul>\n<li><strong>Recherche de produits<\/strong> &#8211; Ajoute une barre de recherche pour des recherches rapides de produits par les clients.<\/li>\n<li><strong>Tous les produits<\/strong> &#8211; Affiche tous les produits de la boutique dans une grille.<\/li>\n<li><strong>Tous les commentaires<\/strong> &#8211; Liste tous les commentaires sur les produits.<\/li>\n<li><strong>Commande classique<\/strong> &#8211; Affiche le code court de commande classique.<\/li>\n<li><strong>Panier classique<\/strong> &#8211; Affiche le code court du panier classique.<\/li>\n<li><strong>Compte client<\/strong> &#8211; Permet aux clients de se connecter et de se d\u00e9connecter.<\/li>\n<li><strong>Cat\u00e9gorie mise en avant<\/strong> &#8211; Met en avant une cat\u00e9gorie de produits et un appel \u00e0 l&rsquo;action (CTA) pour encourager les r\u00e9ponses rapides.<\/li>\n<li><strong>Produit mis en avant<\/strong> &#8211; Met en avant un produit ou une variante et un CTA.<\/li>\n<li><strong>Filtres actifs<\/strong> &#8211; Affiche les filtres actuellement actifs.<\/li>\n<li><strong>Filtrer par prix<\/strong> &#8211; Affiche une fourchette de prix que les clients peuvent utiliser pour filtrer les produits.<\/li>\n<li><strong>Filtrer par stock<\/strong> &#8211; Permet de filtrer les produits en fonction de leur \u00e9tat d&rsquo;inventaire.<\/li>\n<li><strong>Filtrer par attribut<\/strong> &#8211; Permet de filtrer les produits en fonction d&rsquo;attributs tels que la taille ou la couleur.<\/li>\n<li><strong>Filtrer par \u00e9valuation<\/strong> &#8211; Permet aux clients de filtrer les produits en fonction de leur \u00e9valuation.<\/li>\n<li><strong>Produits tri\u00e9s sur le volet<\/strong> &#8211; Affiche une s\u00e9lection de produits tri\u00e9s sur le volet dans une grille.<\/li>\n<li><strong>Mini-panier<\/strong> &#8211; Permet d&rsquo;afficher un bouton de visualisation rapide du panier.<\/li>\n<li><strong>Avis de la boutique<\/strong> &#8211; Affiche les avis destin\u00e9s aux clients et g\u00e9n\u00e9r\u00e9s par WooCommerce ou d&rsquo;autres extensions.<\/li>\n<li><strong>Produits les plus vendus<\/strong> &#8211; Affiche une grille des produits les plus vendus de votre boutique.<\/li>\n<li><strong>Liste des cat\u00e9gories de produits<\/strong> &#8211; Affiche toutes les cat\u00e9gories de produits sous forme de liste ou de liste d\u00e9roulante.<\/li>\n<li><strong>Produits par cat\u00e9gorie<\/strong> &#8211; Affiche une grille de produits des cat\u00e9gories s\u00e9lectionn\u00e9es.<\/li>\n<li><strong>Collection de produits (Beta)<\/strong> &#8211; Affiche les produits d&rsquo;une collection d\u00e9sign\u00e9e.<\/li>\n<li><strong>Produits les plus r\u00e9cents<\/strong> &#8211; Affiche les produits les plus r\u00e9cents dans une grille.<\/li>\n<li><strong>Produits en promotion<\/strong> &#8211; Affiche les produits en promotion dans une grille.<\/li>\n<li><strong>Produits par \u00e9tiquette<\/strong> &#8211; Affiche les produits avec l&rsquo;\u00e9tiquette s\u00e9lectionn\u00e9e dans une grille.<\/li>\n<li><strong>Produits les mieux not\u00e9s<\/strong> &#8211; Affiche les produits les mieux not\u00e9s dans une grille.<\/li>\n<li><strong>Produits par attributs<\/strong> &#8211; Affiche les produits ayant les attributs s\u00e9lectionn\u00e9s dans une grille.<\/li>\n<li><strong>Avis par cat\u00e9gorie<\/strong> &#8211; Affiche les avis sur les produits des cat\u00e9gories sp\u00e9cifi\u00e9es.<\/li>\n<li><strong>Avis par produit<\/strong> &#8211; Affiche les avis organis\u00e9s par produit.<\/li>\n<li><strong>Produit unique<\/strong> &#8211; Affiche un seul produit.<\/li>\n<li><strong>Panier<\/strong> &#8211; Affiche le panier d&rsquo;achat.<\/li>\n<li><strong>Commande<\/strong> &#8211; Affiche le formulaire permettant aux clients de passer commande.<\/li>\n<\/ul>\n<p>Vous savez maintenant ce que repr\u00e9sente chaque bloc. Utilisons certains de ces blocs pour cr\u00e9er une exp\u00e9rience de commerce \u00e9lectronique.<\/p>\n<h2>Utiliser le bloc Grille de produits dans WooCommerce<\/h2>\n<p>Un bloc de grille de produits est un outil polyvalent pour pr\u00e9senter les produits de votre boutique dans un format organis\u00e9 et en grille sur votre site WordPress. Voici comment ajouter et personnaliser un bloc de grille de produits :<\/p>\n<ol start=\"1\">\n<li>Naviguez jusqu&rsquo;\u00e0 la page ou l&rsquo;article o\u00f9 vous souhaitez afficher les produits. Attribuez un titre comme \u00ab Produits \u00bb<\/li>\n<li>Cliquez sur le bouton <strong>+<\/strong> dans la barre de navigation sup\u00e9rieure pour afficher tous les blocs. Descendez jusqu&rsquo;\u00e0 la section <strong>WOOCOMMERCE<\/strong> et s\u00e9lectionnez <strong>Tous les produits<\/strong>. Cette action permet d&rsquo;afficher vos produits dans une grille sur la page.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/all-products-woocommerce-block.png\" alt=\"Utiliser le bloc Tous les produits WooCommerce pour afficher les produits dans une grille.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Utiliser le bloc Tous les produits WooCommerce pour afficher les produits dans une grille.<\/figcaption><\/figure><\/li>\n<li>Pour configurer ce bloc, utilisez le panneau des param\u00e8tres du bloc sur le c\u00f4t\u00e9 droit. Vous pouvez acc\u00e9der aux param\u00e8tres en cliquant sur l&rsquo;ic\u00f4ne <strong>R\u00e9glages<\/strong> (la deuxi\u00e8me ic\u00f4ne la plus \u00e0 droite sur la barre de navigation sup\u00e9rieure).\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/all-products-setting.png\" alt=\"Settings panel to adjust the All Products block\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Panneau de configuration pour ajuster le bloc Tous les produits.<\/figcaption><\/figure>\n<p>Vous pouvez y adapter la pr\u00e9sentation, le contenu et le style de la grille :<\/p>\n<ul>\n<li><strong>R\u00e9glages de mise en page :<\/strong> Ajustez le nombre de lignes et de colonnes. Par exemple, r\u00e9glez les deux sur 2 pour obtenir un aspect \u00e9quilibr\u00e9.<\/li>\n<li><strong>R\u00e9glages de contenu :<\/strong> D\u00e9cidez si vous souhaitez inclure un menu d\u00e9roulant de tri pour les clients. Cette fonction permet aux clients de trier les produits dans l&rsquo;ordre de leur choix. Vous pouvez la d\u00e9sactiver si vous le souhaitez.<\/li>\n<li><strong>Style avanc\u00e9 :<\/strong> Si n\u00e9cessaire, vous pouvez ajouter des classes CSS pour un style plus sophistiqu\u00e9.<\/li>\n<\/ul>\n<\/li>\n<li>Pr\u00e9visualisez la page une fois que vous avez finalis\u00e9 les configurations pour vous assurer que tout appara\u00eet comme pr\u00e9vu. Cliquez ensuite sur le bouton <strong>Publier<\/strong>. Cette \u00e9tape vous permet de rendre la page accessible publiquement, en priv\u00e9 ou avec une protection par mot de passe, selon vos pr\u00e9f\u00e9rences.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/products-page.png\" alt=\"La page Produits mise \u00e0 jour affiche les produits dans une grille 2 par 2 et comporte une barre de navigation.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">La page Produits mise \u00e0 jour affiche les produits dans une grille 2 par 2 et comporte une barre de navigation.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>Ajouter un bloc Produit mis en avant \u00e0 votre page ou \u00e0 votre article<\/h2>\n<p>Le bloc Produit mis en avant vous permet de mettre en avant un produit sur votre page ou dans votre article. Vous pouvez s\u00e9lectionner un produit, personnaliser ses r\u00e9glages d&rsquo;affichage et l&rsquo;ajouter \u00e0 votre contenu pour attirer l&rsquo;attention sur un article particulier que vous souhaitez mettre en valeur.<\/p>\n<p>Proc\u00e9dez comme suit pour ajouter un bloc Produit mis en avant :<\/p>\n<ol start=\"1\">\n<li>Commencez par vous rendre sur la page ou dans l&rsquo;article o\u00f9 vous souhaitez pr\u00e9senter le produit. Imaginez que vous conceviez une grille de produits et que vous souhaitiez placer le produit mis en avant en haut de la page. Cr\u00e9ez un espace \u00e0 cet endroit et vous remarquerez un bouton <strong>+<\/strong> sur la gauche.<br \/>\nSi vous disposez d&rsquo;un bloc existant \u00e0 proximit\u00e9 de l&#8217;emplacement souhait\u00e9, cliquez sur les trois points verticaux pour faire appara\u00eetre un menu. Vous pouvez choisir d&rsquo;<strong>ajouter avant<\/strong> ou <strong>apr\u00e8s<\/strong>.<\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/menu-dialog.png\" alt=\"Ajout du bloc Produit lis en avant avant le bloc Tous les produits.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajout du bloc Produit lis en avant avant le bloc Tous les produits.<\/figcaption><\/figure><\/li>\n<li>S\u00e9lectionnez le bouton <strong>+<\/strong> dans la barre de navigation sup\u00e9rieure pour afficher tous les blocs et recherchez <strong>Produit mis en avant<\/strong>.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/featured-product-block.png\" alt=\"S\u00e9lectionnez un produit comme produit mis en avant \u00e0 l'aide du bloc Produit mis en avant.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">S\u00e9lectionnez un produit comme produit mis en avant \u00e0 l&rsquo;aide du bloc Produit mis en avant.<\/figcaption><\/figure><\/li>\n<li>Choisissez le produit que vous souhaitez afficher. Cliquez ensuite sur <strong>Termin\u00e9<\/strong>.<\/li>\n<li>Pour donner \u00e0 votre bloc Produit mis en avant une apparence unique, cliquez sur <strong>R\u00e9glages<\/strong>. Dans le panneau des r\u00e9glages du bloc, vous pouvez\n<ul>\n<li>D\u00e9cider d&rsquo;afficher ou non la description et le prix du produit<\/li>\n<li>Configurer l&rsquo;affichage de vos m\u00e9dias (images et vid\u00e9os).<\/li>\n<li>Sp\u00e9cifier le texte alt pour l&rsquo;image du produit.<\/li>\n<li>Choisir la couleur de superposition du bloc.<\/li>\n<li>Ajuster l&rsquo;opacit\u00e9 du bloc.<\/li>\n<\/ul>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/block-settings-featured-product.png\" alt=\"R\u00e9glage des param\u00e8tres du bloc Produit mis en avant.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">R\u00e9glage des param\u00e8tres du bloc Produit mis en avant.<\/figcaption><\/figure><\/li>\n<li>Une fois que vous avez effectu\u00e9 tous les r\u00e9glages n\u00e9cessaires, vous pouvez publier votre page ou la mettre \u00e0 jour si elle est d\u00e9j\u00e0 en ligne. Cela vous permet de voir le bloc en action et de vous assurer qu&rsquo;il est conforme \u00e0 vos attentes.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/products-page-1.png\" alt=\"Aper\u00e7u de la page Produits mise \u00e0 jour affichant le bonnet en vedette au-dessus de la grille de produits.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Aper\u00e7u de la page Produits mise \u00e0 jour affichant le bonnet en vedette au-dessus de la grille de produits.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>Utiliser les blocs de filtres dans WooCommerce<\/h2>\n<p>Les blocs de filtres permettent \u00e0 vos clients d&rsquo;affiner les recherches de produits en fonction de crit\u00e8res sp\u00e9cifiques, ce qui les aide \u00e0 trouver rapidement les produits qui correspondent \u00e0 leurs pr\u00e9f\u00e9rences ou \u00e0 leurs exigences.<\/p>\n<ol start=\"1\">\n<li>Naviguez jusqu&rsquo;\u00e0 la page ou l&rsquo;article o\u00f9 vous souhaitez ajouter les blocs. Ce guide utilise la m\u00eame page <strong>Produits<\/strong> que les \u00e9tapes pr\u00e9c\u00e9dentes.<\/li>\n<li>Choisissez l&rsquo;endroit o\u00f9 vous souhaitez ajouter les filtres.<\/li>\n<li>Cliquez sur le bouton <strong>+<\/strong> dans la barre de navigation sup\u00e9rieure pour afficher tous les blocs. Faites d\u00e9filer la page jusqu&rsquo;\u00e0 la section <strong>WOOCOMMERCE<\/strong> et voyez une option de filtre pour le prix, le stock, l&rsquo;attribut et l&rsquo;\u00e9valuation. Par exemple, si vous choisissez <strong>Filtrer par prix<\/strong>.<\/li>\n<\/ol>\n<h3>Ajouter le bloc Filtrer par prix<\/h3>\n<p>En s\u00e9lectionnant ce bloc, vous pouvez afficher une barre de prix qui permet aux utilisateurs de filtrer les produits qui apparaissent sur la page en fonction de la fourchette de prix souhait\u00e9e. Vous pouvez personnaliser les r\u00e9glages du bloc dans le panneau de droite en fonction de vos besoins.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/filter-by-price.png\" alt=\"Ajout du bloc Filtrer par prix.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajout du bloc Filtrer par prix.<\/figcaption><\/figure>\n<h3>Ajout du bloc Filtrer par attribut<\/h3>\n<p>Vous pouvez \u00e9galement utiliser le bloc <strong>Filtrer par attribut<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/filter-by-attribute.png\" alt=\"S\u00e9lectionner les attributs du produit.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">S\u00e9lectionner les attributs du produit.<\/figcaption><\/figure>\n<p>Vous pouvez choisir un attribut sp\u00e9cifique, tel que la <strong>couleur<\/strong>, puis configurer les r\u00e9glages en cons\u00e9quence. Par exemple, vous pouvez activer l&rsquo;option <strong>Afficher le nombre de produits<\/strong> pour afficher le nombre de produits disponibles dans chaque couleur.<\/p>\n<p>Vous pouvez ensuite afficher la page en direct et tester la fonctionnalit\u00e9 des boutons de filtrage.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/filter-output.png\" alt=\"Pr\u00e9visualisation de la fonctionnalit\u00e9 du filtre.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Pr\u00e9visualisation de la fonctionnalit\u00e9 du filtre.<\/figcaption><\/figure>\n<p>En suivant ces \u00e9tapes, vous pouvez offrir \u00e0 vos clients une exp\u00e9rience d&rsquo;achat transparente en leur permettant d&rsquo;affiner facilement leurs recherches de produits en fonction de divers crit\u00e8res, ce qui am\u00e9liore leur satisfaction et les aide \u00e0 trouver les produits souhait\u00e9s.<\/p>\n<h2>Pages de panier et de commande<\/h2>\n<p>Les fonctions de panier et de commande de votre boutique en ligne doivent \u00eatre intuitives et enti\u00e8rement fonctionnelles pour que l&rsquo;exp\u00e9rience utilisateur soit la plus fluide possible. Pour garantir une excellente exp\u00e9rience client, il faut g\u00e9rer efficacement les articles du panier et faciliter le <a href=\"https:\/\/kinqsta.com\/fr\/blog\/commande-woocommerce\/\">processus de paiement<\/a>.<\/p>\n<p>WooCommerce cr\u00e9e les pages de <strong>panier<\/strong> et de <strong>commande <\/strong>par d\u00e9faut en utilisant les blocs appropri\u00e9s. Les clients peuvent ajouter des produits \u00e0 leur panier et y acc\u00e9der via la barre de navigation.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/cart-page.png\" alt=\"La page du panier.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">La page du panier.<\/figcaption><\/figure>\n<p>Apr\u00e8s avoir confirm\u00e9 le contenu de son panier, votre client peut s\u00e9lectionner le bouton <strong>Proc\u00e9der \u00e0 la commande<\/strong>, remplir les informations n\u00e9cessaires et passer sa commande.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/checkout-page.png\" alt=\"La page de commande.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">La page de commande.<\/figcaption><\/figure>\n<h2>Comment cr\u00e9er une page de boutique personnalis\u00e9e<\/h2>\n<p>Maintenant que vous avez appris \u00e0 utiliser certains blocs WooCommerce, la prochaine \u00e9tape consiste \u00e0 les combiner pour cr\u00e9er une page de boutique personnalis\u00e9e et conviviale avec les blocs suivants :<\/p>\n<ul>\n<li>Rechercher des produits<\/li>\n<li>Filtrer par prix<\/li>\n<li>Cat\u00e9gories de produits<\/li>\n<li>Produit mis en avant<\/li>\n<li>Tous les produits<\/li>\n<\/ul>\n<p>Pour cr\u00e9er cette pr\u00e9sentation de boutique personnalis\u00e9e, cr\u00e9ez une nouvelle page et suivez les \u00e9tapes ci-dessous.<\/p>\n<ol start=\"1\">\n<li>Saisissez \u00ab Boutique \u00bb comme titre de page.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/shop-page.png\" alt=\"La page Boutique en mode \u00e9dition.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">La page Boutique en mode \u00e9dition.<\/figcaption><\/figure><\/li>\n<li>En suivant les m\u00eames \u00e9tapes que pr\u00e9c\u00e9demment pour ajouter un bloc, ajoutez le bloc <strong>Rechercher des produits<\/strong>. N&rsquo;appliquez aucune configuration.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/product-search-block.png\" alt=\"Ajout du bloc Recherche de produits.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajout du bloc Recherche de produits.<\/figcaption><\/figure><\/li>\n<li>Ajoutez le bloc <strong>Liste des cat\u00e9gories de produits<\/strong>.\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/products-categories.png\" alt=\"Ajout du bloc Liste des cat\u00e9gories de produits.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajout du bloc Liste des cat\u00e9gories de produits.<\/figcaption><\/figure>\n<p>Dans la page de configuration du bloc, r\u00e9glez le <strong>STYLE D&rsquo;AFFICHAGE <\/strong>sur <strong>Menu d\u00e9roulant<\/strong>.<\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/product-categories-drop-down.png\" alt=\"Ajustez les r\u00e9glages du bloc Liste des cat\u00e9gories de produits.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajustez les r\u00e9glages du bloc Liste des cat\u00e9gories de produits.<\/figcaption><\/figure><\/li>\n<li>Ajoutez ensuite le bloc <strong>Filtrer par prix<\/strong>. Ne configurez rien pour ce bloc.<\/li>\n<li>Ajoutez le bloc <strong>Produit mis en avant<\/strong> et s\u00e9lectionnez le produit \u00e0 afficher. Appliquez les m\u00eames configurations que pour le bloc Produit mis en avant que vous avez cr\u00e9\u00e9 pr\u00e9c\u00e9demment.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/featured-product-shop-page.png\" alt=\"La page de la boutique affiche le produit mis en avant avec quelques r\u00e9glages pour le produit mis en avant.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">La page de la boutique affiche le produit mis en avant avec quelques r\u00e9glages pour le produit mis en avant.<\/figcaption><\/figure><\/li>\n<li>Ajoutez le bloc <strong>Tous les produits<\/strong>.\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/product-grid-shop-page.png\" alt=\"Ajout du bloc Tous les produits.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajout du bloc Tous les produits.<\/figcaption><\/figure>\n<p>Pour les r\u00e9glages de ce bloc, r\u00e9glez les valeurs <strong>COLONNES <\/strong>et <strong>LIGNES <\/strong>sur 2 et d\u00e9s\u00e9lectionnez la liste d\u00e9roulante<strong> Afficher le tri<\/strong>.<\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/set-all-products-block.png\" alt=\"Ajustez les r\u00e9glages du bloc Tous les produits.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajustez les r\u00e9glages du bloc Tous les produits.<\/figcaption><\/figure><\/li>\n<li>Publiez la page et voyez les r\u00e9sultats.\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/preview-shop-page.png\" alt=\"Pr\u00e9visualisation de la page Boutique.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Pr\u00e9visualisation de la page Boutique.<\/figcaption><\/figure>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/shop-page-view.png\" alt=\"The Shop page lists the products in a 2-by-2 grid. Below each item is a button to add to cart or view the products\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Pr\u00e9visualisation de la page Boutique.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>Comment surveiller et analyser la performance des blocs<\/h2>\n<p>Les outils robustes de Kinsta surveillent et analysent la performance des pages qui utilisent les blocs WooCommerce.<\/p>\n<h3>L&rsquo;outil APM de Kinsta<\/h3>\n<p>L&rsquo;<a href=\"https:\/\/kinqsta.com\/fr\/docs\/hebergement-wordpress\/surveillance-wordpress\/outil-apm\/\">outil APM (Application Performance Monitoring)<\/a> de Kinsta vous permet de surveiller la performance des pages contenant des blocs de WooCommerce. Il capture des informations horodat\u00e9es sur les processus PHP, les requ\u00eates de base de donn\u00e9es MySQL et d&rsquo;autres mesures cruciales, vous permettant de suivre et d&rsquo;analyser les transactions facilit\u00e9es par WooCommerce.<\/p>\n<p>Vous pouvez, par exemple, analyser la dur\u00e9e et la fr\u00e9quence des interactions et les goulots d&rsquo;\u00e9tranglement potentiels associ\u00e9s \u00e0 ces pages. Gr\u00e2ce \u00e0 ces informations, vous pouvez d\u00e9panner et optimiser les performances avec pr\u00e9cision.<\/p>\n<h3>L&rsquo;outil d&rsquo;analyse de Kinsta<\/h3>\n<p>L&rsquo;\u00e9valuation de l&rsquo;impact des blocs WooCommerce sur l&rsquo;engagement des utilisateurs et les ventes n\u00e9cessite une approche \u00e0 plusieurs facettes. Les outils d&rsquo;analyse complets de Kinsta jouent un r\u00f4le crucial \u00e0 cet \u00e9gard. L&rsquo;utilisation des fonctions d&rsquo;analyse WordPress dans le tableau de bord MyKinsta vous donne des informations pr\u00e9cieuses sur les diff\u00e9rentes mesures de performance qui influencent directement l&rsquo;exp\u00e9rience de l&rsquo;utilisateur &#8211; et, par cons\u00e9quent, les ventes.<\/p>\n<ul>\n<li>La section <strong>Ressources<\/strong> du tableau de bord MyKinsta suit le nombre total de visites de votre site, l&rsquo;espace disque et l&rsquo;utilisation de la bande passante. Elle fournit un aper\u00e7u quantitatif du trafic du site et de l&rsquo;utilisation des ressources.<\/li>\n<\/ul>\n<ul>\n<li>La section <strong>Performance<\/strong> inclut des mesures telles que le temps de r\u00e9ponse moyen de PHP + MySQL et l&rsquo;utilisation d&rsquo;AJAX. Ces statistiques vous aident \u00e0 suivre la r\u00e9activit\u00e9 et l&rsquo;interactivit\u00e9 des pages utilisant les blocs WooCommerce.<\/li>\n<\/ul>\n<ul>\n<li>La section <strong>R\u00e9ponse<\/strong> fournit des analyses de codes de r\u00e9ponse et d&rsquo;erreurs, vous aidant \u00e0 mieux comprendre les interactions des utilisateurs et les obstacles potentiels qu&rsquo;ils peuvent rencontrer.<\/li>\n<\/ul>\n<ul>\n<li>La <strong>section G\u00e9o &#038; IP<\/strong> vous permet de suivre l&rsquo;utilisation du r\u00e9seau de diffusion de contenu (CDN), l&rsquo;efficacit\u00e9 du cache et les informations g\u00e9ographiques. Ces informations permettent d&rsquo;affiner votre site en fonction du comportement des utilisateurs, de leur localisation et des donn\u00e9es de performance.<\/li>\n<\/ul>\n<p>En surveillant de pr\u00e8s ces analyses, vous pouvez identifier les goulots d&rsquo;\u00e9tranglement potentiels et optimiser vos pages \u00e0 l&rsquo;aide des blocs WooCommerce pour garantir une exp\u00e9rience utilisateur transparente et attrayante.<\/p>\n<p>Vous pouvez lire notre guide ultime sur <a href=\"https:\/\/kinqsta.com\/fr\/blog\/accelerer-woocommerce\/\">18 fa\u00e7ons puissantes d&rsquo;acc\u00e9l\u00e9rer votre boutique WooCommerce<\/a> pour apprendre plus de conseils. La vitesse est cruciale pour les boutiques en ligne, car les sites \u00e0 chargement lent entra\u00eenent la frustration des utilisateurs et la perte de ventes.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Ce guide a explor\u00e9 les capacit\u00e9s des blocs de WooCommerce, de l&rsquo;ajout de grilles de produits et de produits mis en avant \u00e0 la mise en \u0153uvre de puissants blocs de filtres. Il a \u00e9galement soulign\u00e9 l&rsquo;importance des bo\u00eetes de panier et de commande, \u00e9l\u00e9ments essentiels pour guider les clients dans une exp\u00e9rience d&rsquo;achat transparente.<\/p>\n<p>La combinaison strat\u00e9gique de diff\u00e9rents blocs WooCommerce permet d&rsquo;obtenir une mise en page intuitive et visuellement attrayante. Le processus implique une s\u00e9lection, une configuration et un arrangement minutieux des blocs afin de r\u00e9pondre aux fonctionnalit\u00e9s sp\u00e9cifiques et aux pr\u00e9f\u00e9rences des clients.<\/p>\n<p>Choisir le service d&rsquo;<a href=\"https:\/\/kinqsta.com\/fr\/hebergement-wordpress\/\">h\u00e9bergement WordPress<\/a> de Kinsta am\u00e9liore significativement la performance et la fiabilit\u00e9 de vos sites WooCommerce. Avec des configurations de serveur optimis\u00e9es, des mesures de s\u00e9curit\u00e9 robustes et une \u00e9volutivit\u00e9 sans faille, Kinsta s&rsquo;assure que votre boutique en ligne fonctionne avec une efficacit\u00e9 maximale.<\/p>\n<p>Que vous utilisiez les blocs WooCommerce pour l&rsquo;affichage des produits, les filtres ou les fonctionnalit\u00e9s du panier, l&rsquo;infrastructure d&rsquo;h\u00e9bergement de Kinsta fournit la vitesse et la stabilit\u00e9 n\u00e9cessaires pour offrir une exp\u00e9rience d&rsquo;achat exceptionnelle \u00e0 vos clients.<\/p>\n<p><em>Avez-vous d\u00e9j\u00e0 utilis\u00e9 des blocs WooCommerce ? Si oui, quel est votre bloc pr\u00e9f\u00e9r\u00e9, et quel nouveau bloc aimeriez-vous voir ajout\u00e9 ? Faites-nous part de vos r\u00e9flexions dans la section des commentaires.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les blocs WooCommerce vous aident \u00e0 cr\u00e9er des pages de boutique personnalis\u00e9es, \u00e0 pr\u00e9senter vos produits et \u00e0 ajouter des fonctionnalit\u00e9s de commerce \u00e9lectronique avanc\u00e9es telles &#8230;<\/p>\n","protected":false},"author":287,"featured_media":75581,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1028,1029,1025],"class_list":["post-75580","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-developpement-wordpress","topic-ecommerce-wordpress","topic-woocommerce"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Blocs WooCommerce : Ajoutez des fonctionnalit\u00e9s WooCommerce \u00e0 votre site WordPress - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 cr\u00e9er des pages de boutique personnalis\u00e9es, \u00e0 pr\u00e9senter des produits et \u00e0 ajouter des fonctions de commerce \u00e9lectronique avanc\u00e9es, telles que le filtrage, \u00e0 votre site de commerce \u00e9lectronique.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Blocs WooCommerce : Ajoutez des fonctionnalit\u00e9s WooCommerce \u00e0 votre site WordPress\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 cr\u00e9er des pages de boutique personnalis\u00e9es, \u00e0 pr\u00e9senter des produits et \u00e0 ajouter des fonctions de commerce \u00e9lectronique avanc\u00e9es, telles que le filtrage, \u00e0 votre site de commerce \u00e9lectronique.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-23T18:23:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-24T11:44:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/01\/woocommerce-blocks-tutorial.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez \u00e0 cr\u00e9er des pages de boutique personnalis\u00e9es, \u00e0 pr\u00e9senter des produits et \u00e0 ajouter des fonctions de commerce \u00e9lectronique avanc\u00e9es, telles que le filtrage, \u00e0 votre site de commerce \u00e9lectronique.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/01\/woocommerce-blocks-tutorial.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Blocs WooCommerce : Ajoutez des fonctionnalit\u00e9s WooCommerce \u00e0 votre site WordPress\",\"datePublished\":\"2024-01-23T18:23:29+00:00\",\"dateModified\":\"2024-01-24T11:44:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/\"},\"wordCount\":3193,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/\",\"name\":\"Blocs WooCommerce : Ajoutez des fonctionnalit\u00e9s WooCommerce \u00e0 votre site WordPress - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"datePublished\":\"2024-01-23T18:23:29+00:00\",\"dateModified\":\"2024-01-24T11:44:33+00:00\",\"description\":\"Apprenez \u00e0 cr\u00e9er des pages de boutique personnalis\u00e9es, \u00e0 pr\u00e9senter des produits et \u00e0 ajouter des fonctions de commerce \u00e9lectronique avanc\u00e9es, telles que le filtrage, \u00e0 votre site de commerce \u00e9lectronique.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce\",\"item\":\"https:\/\/kinqsta.com\/fr\/sujets\/woocommerce\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Blocs WooCommerce : Ajoutez des fonctionnalit\u00e9s WooCommerce \u00e0 votre site WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Blocs WooCommerce : Ajoutez des fonctionnalit\u00e9s WooCommerce \u00e0 votre site WordPress - Kinsta\u00ae","description":"Apprenez \u00e0 cr\u00e9er des pages de boutique personnalis\u00e9es, \u00e0 pr\u00e9senter des produits et \u00e0 ajouter des fonctions de commerce \u00e9lectronique avanc\u00e9es, telles que le filtrage, \u00e0 votre site de commerce \u00e9lectronique.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/","og_locale":"fr_FR","og_type":"article","og_title":"Blocs WooCommerce : Ajoutez des fonctionnalit\u00e9s WooCommerce \u00e0 votre site WordPress","og_description":"Apprenez \u00e0 cr\u00e9er des pages de boutique personnalis\u00e9es, \u00e0 pr\u00e9senter des produits et \u00e0 ajouter des fonctions de commerce \u00e9lectronique avanc\u00e9es, telles que le filtrage, \u00e0 votre site de commerce \u00e9lectronique.","og_url":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-01-23T18:23:29+00:00","article_modified_time":"2024-01-24T11:44:33+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/01\/woocommerce-blocks-tutorial.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 cr\u00e9er des pages de boutique personnalis\u00e9es, \u00e0 pr\u00e9senter des produits et \u00e0 ajouter des fonctions de commerce \u00e9lectronique avanc\u00e9es, telles que le filtrage, \u00e0 votre site de commerce \u00e9lectronique.","twitter_image":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/01\/woocommerce-blocks-tutorial.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Blocs WooCommerce : Ajoutez des fonctionnalit\u00e9s WooCommerce \u00e0 votre site WordPress","datePublished":"2024-01-23T18:23:29+00:00","dateModified":"2024-01-24T11:44:33+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/"},"wordCount":3193,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/01\/woocommerce-blocks-tutorial.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/","url":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/","name":"Blocs WooCommerce : Ajoutez des fonctionnalit\u00e9s WooCommerce \u00e0 votre site WordPress - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/01\/woocommerce-blocks-tutorial.jpg","datePublished":"2024-01-23T18:23:29+00:00","dateModified":"2024-01-24T11:44:33+00:00","description":"Apprenez \u00e0 cr\u00e9er des pages de boutique personnalis\u00e9es, \u00e0 pr\u00e9senter des produits et \u00e0 ajouter des fonctions de commerce \u00e9lectronique avanc\u00e9es, telles que le filtrage, \u00e0 votre site de commerce \u00e9lectronique.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#primaryimage","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/01\/woocommerce-blocks-tutorial.jpg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/01\/woocommerce-blocks-tutorial.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/fr\/blog\/blocs-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"WooCommerce","item":"https:\/\/kinqsta.com\/fr\/sujets\/woocommerce\/"},{"@type":"ListItem","position":3,"name":"Blocs WooCommerce : Ajoutez des fonctionnalit\u00e9s WooCommerce \u00e0 votre site WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/fr\/#website","url":"https:\/\/kinqsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinqsta.com\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/75580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/comments?post=75580"}],"version-history":[{"count":4,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/75580\/revisions"}],"predecessor-version":[{"id":75591,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/75580\/revisions\/75591"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/75580\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/75580\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/75580\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/75580\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/75580\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/75580\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/75580\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/75580\/translations\/es"},{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/75580\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media\/75581"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media?parent=75580"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/tags?post=75580"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/topic?post=75580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}