Comment créer une belle page de boutique WooCommerce (en 5 étapes)

Vous recherchez le moyen le plus simple de personnaliser la page de la boutique WooCommerce ?

WordPress propose une grande variété de blocs pour vous aider à créer des sites Web professionnels. Si vous utilisez WooCommerce, vous avez également accès à des blocs WooCommerce dédiés que vous pouvez utiliser pour votre boutique en ligne.

Par conséquent, vous vous demandez peut-être comment utiliser ces éléments pour créer une page de boutique WooCommerce qui génère des conversions.

Heureusement, le processus est très simple. En utilisant ces blocs, WooCommerce vous permet d'afficher vos produits de différentes manières. De plus, vous pouvez ajouter des filtres et des fonctions de recherche pour faciliter la navigation des utilisateurs dans votre boutique.

Dans cet article, nous allons vous montrer comment créer une belle page de boutique WooCommerce à l'aide de blocs . Vous pouvez suivre nos directives et choisir les blocs que vous souhaitez utiliser, en fonction de vos besoins. Commençons!

Table des matières:

1. Placez le bloc Tous les produits
2. Ajouter des blocs de produits en vedette et/ou de produits triés sur le volet
3. Activer la recherche de produits sur la page de la boutique
4. Utilisez les blocs de catégorie en vedette
5. Ajouter une option pour filtrer les produits par prix

Comment personnaliser la page de la boutique WooCommerce avec des blocs

Pour commencer, vous devez ouvrir l'éditeur de la page Boutique de votre boutique. Ensuite, suivez ces instructions pour personnaliser son contenu.

1. Placez le bloc Tous les produits

Les pages de la boutique sont de toutes formes et tailles. Dans une boutique en ligne, cette page affiche généralement tous les produits que vous avez à vendre. Les utilisateurs peuvent cliquer sur des articles individuels pour ouvrir leurs pages de produits respectives ou les ajouter directement à leurs paniers (si la boutique le permet) :

Avec WordPress et WooCommerce, vous avez un contrôle total sur les éléments à inclure dans votre page de boutique. L'apparence de cette page dépendra du thème que vous utilisez et de la façon dont vous le configurez.

WooCommerce configure automatiquement une page de boutique lorsque vous commencez à utiliser le plugin, vous pouvez donc aller de l'avant et voir à quoi ressemble la vôtre. Lorsque vous êtes prêt à le modifier, accédez à Pages et recherchez l'option Boutique .

Ouvrez cette page dans l'éditeur de blocs et vous devriez voir quelque chose comme ceci :

Par défaut, la page Boutique comprend le bloc Tous les produits et un en-tête. Si vous ne voyez pas ce bloc, vous pouvez l'ajouter à la page en cliquant sur le signe plus (+) et en le sélectionnant dans la liste des options :

Le bloc Tous les produits affiche une grille qui contient tous les produits de votre boutique, classés du nouveau au plus ancien. Pour modifier l'ordre d'affichage de vos produits, cliquez sur le bloc et rendez-vous dans le panneau de configuration à droite. Ensuite, accédez à la section Paramètres de contenu et sélectionnez votre préférence dans le menu Commander les produits par :

Pendant ce temps, sous Paramètres de mise en page , vous pouvez choisir le nombre de colonnes et de lignes que vous souhaitez afficher dans la grille de produits. N'hésitez pas à explorer les autres options disponibles avec ce bloc.

2. Ajouter des blocs de produits en vedette et/ou de produits triés sur le volet

De nombreuses pages de boutique mettent en avant des produits spécifiques. Il s'agit généralement d'articles sur lesquels les propriétaires de magasins souhaitent attirer l'attention, tels que des stocks nouveaux ou à prix réduit ou des produits récemment ajoutés. WooCommerce est livré avec un bloc de produits en vedette qui vous permet de présenter n'importe quel article de votre magasin.

Une fois ce bloc placé sur votre page, vous devrez sélectionner le produit que vous souhaitez mettre en avant et cliquer sur Terminé :

Ensuite, WooCommerce affichera l'image, le nom, le prix, la description et un appel à l'action (CTA) du produit. Le bloc devrait ressembler à ceci :

Vous pouvez ensuite personnaliser ce bloc à votre guise. Par exemple, vous pouvez changer l'image et modifier le bouton CTA.

L'inconvénient de l'ajout du bloc Produit en vedette à votre page de boutique WooCommerce est qu'il peut distraire les utilisateurs du reste de vos produits. Pour contrer cela, nous vous suggérons d'utiliser des colonnes pour afficher plusieurs produits vedettes côte à côte :

Une alternative au bloc Produits en vedette est l'option Produits triés sur le volet. Ce bloc vous permet de choisir plusieurs produits et de les afficher côte à côte. Il utilise le même style que le bloc Tous les produits :

Les blocs Produits en vedette et Produits triés sur le volet remplissent des objectifs similaires. Idéalement, vous choisirez l'une des deux options afin de ne pas submerger les visiteurs avec trop d'articles en vedette. Nous vous recommandons également de placer ces blocs en haut de la page, afin que les utilisateurs ne puissent pas les manquer.

3. Activer la recherche de produits sur la page de la boutique

Si vous avez une boutique avec un large catalogue de produits, vous devrez proposer une fonction de recherche. De cette façon, les utilisateurs peuvent rechercher des articles spécifiques qu'ils avaient en tête, sans avoir à parcourir l'ensemble de la boutique.

Lorsque vous ajoutez un bloc de recherche à votre page de boutique, vous voudrez rechercher l'option de recherche de produit , pas le bloc de recherche WordPress par défaut. La recherche de produits limitera les résultats aux produits WooCommerce, tandis que l'autre bloc de recherche inclura toutes les autres pages de votre site.

Voici à quoi ressemble la fonction de recherche WooCommerce :

Gardez à l'esprit que le bloc de recherche de produits ne fonctionne pas dans l'éditeur, vous devrez donc le tester sur le front-end. De plus, le bloc n'offre pas de fonctionnalité de saisie semi-automatique, les utilisateurs devront donc saisir une requête complète et charger une nouvelle page pour voir les résultats.

4. Utilisez les blocs de catégorie en vedette

En plus d'orienter les utilisateurs vers des produits triés sur le volet, vous pouvez également mettre en évidence des catégories de produits spécifiques. Cela peut être particulièrement utile si vous vendez plusieurs types de produits, car cela permettra aux utilisateurs de rechercher des articles dans un rayon spécifique.

Commencez par ajouter le bloc Catégorie en vedette à votre page de boutique WooCommerce. Ensuite, sélectionnez la catégorie de produits que vous souhaitez mettre en avant et cliquez sur Terminé :

Voici à quoi ressemblera le bloc Catégorie en vedette :

Le bloc vous permet de changer la couleur de l'arrière-plan et du texte, mais il n'offre pas beaucoup d'options de personnalisation supplémentaires. De plus, comme le bloc prend beaucoup de place, nous vous recommandons de placer plusieurs catégories en vedette côte à côte à l'aide de colonnes :

Étant donné que le bloc de catégorie de produits en vedette est très basique, nous vous recommandons de consulter des plugins tels que Otter Blocks pour une personnalisation plus poussée.

Avec Otter Blocks, vous pouvez modifier les blocs WooCommerce en ajoutant des animations et d'autres paramètres de visibilité :

De plus, Otter Blocks ajoute une variété de nouveaux blocs que vous pouvez utiliser sur votre boutique en ligne. Ceux-ci incluent des options telles que les pop-ups (qui sont parfaits pour collecter les inscriptions par e-mail) et les avis sur les produits.

5. Ajoutez une option pour filtrer les produits par prix

Jusqu'à présent, votre magasin dispose d'une barre de recherche, de produits triés sur le volet, de catégories en vedette et de l'ensemble de votre catalogue de produits. Tout ce qui vous manque, c'est un moyen pour les utilisateurs de filtrer les produits.

Le bloc Filtrer les produits par prix permet aux clients de faire exactement cela. Le bloc affiche un curseur qui permet aux clients de définir les prix minimum et maximum des produits qu'ils souhaitent voir :

Les valeurs de prix ne sont pas modifiables – elles dépendent des prix de vos produits. Les visiteurs peuvent soit saisir les valeurs qu'ils souhaitent, soit utiliser le curseur pour les modifier.

Lorsque vous apportez des modifications au curseur de prix, le bloc Tous les produits est mis à jour pour afficher les produits qui répondent aux critères. Cela se produit sans que les utilisateurs aient besoin de recharger la page.

En ce qui concerne le placement, nous vous recommandons d'ajouter le bloc Filtrer les produits par prix au-dessus de votre catalogue de produits. De cette façon, les utilisateurs le verront lorsqu'ils feront défiler la page.

Vous pouvez également permettre aux utilisateurs de filtrer les produits par taille, couleur et autres fonctionnalités. Le bloc Filtrer les produits par attribut vous permet de parcourir les produits qui répondent à un attribut choisi, en fonction des options disponibles sur votre boutique.

Et c'est à peu près tout! Lorsque vous avez terminé, assurez-vous d'enregistrer vos modifications et votre nouvelle page de boutique commencera à fonctionner immédiatement.

Configurez votre page de boutique WooCommerce aujourd'hui

Votre objectif ultime est de créer une page qui maximise les conversions en offrant aux utilisateurs toutes les options qu'ils recherchent dans une mise en page et un ordre logiques.

Une fois que vous avez configuré votre page de boutique WooCommerce, vous pouvez porter votre attention sur vos pages de produits uniques. À cette fin, assurez-vous de consulter notre guide sur la façon d'optimiser la page du produit WooCommerce.

Avez-vous des questions sur la création d'une page de boutique WooCommerce à l'aide de blocs ? Faites-nous savoir dans la section commentaires ci-dessous!