5 façons simples d'afficher des produits sur une boutique en ligne WordPress

Afficher des produits sur une boutique en ligne WordPress peut vraiment être un cauchemar pour un débutant en commerce électronique. Lorsque j'ai commencé à créer ma boutique en ligne, j'ai pensé que ce serait une évidence de placer mes articles sur la page d'accueil de mon site Web. Mais toute la tâche était une lutte ardue!

Selon ma propre expérience, faire apparaître des produits sur votre site Web peut vous prendre beaucoup de temps, surtout si vous êtes nouveau dans le commerce électronique. J'en suis venu à apprendre que c'est une tâche qui nécessite une bonne connaissance de WordPress.

Produits affichés sur une boutique en ligne

Par Jan Saints (Travail personnel): CC-BY-2.0

Si vous créez une boutique en ligne WordPress pour la première fois, vous devez absolument apprendre à configurer un site Web général avec ce système de gestion de contenu. Vous devez également vous familiariser avec des éléments tels que les plugins de commerce électronique, les widgets et les codes courts. De plus, si vous utilisez WooCommerce, vous devez connaître les options d'affichage du produit disponibles et comprendre les paramètres généraux du plugin. Ce guide simple sur la création d'une boutique en ligne et l'affichage d'articles (par Riccardo Andronaco) explique tout cela et je l'ai trouvé très utile.

Dans cet article, je vais discuter de cinq façons d'afficher et d'organiser des produits sur un site Web de commerce électronique WordPress. Lisez la suite pour savoir comment faire apparaître des éléments sur les pages de votre site Web et comment les organiser en conséquence.

Cinq façons d'afficher et d'organiser les articles sur une boutique en ligne WordPress

1. La méthode automatique
2. Widgets
3. Plugins
4. Codes courts
5. Curseurs

1. Utilisation de la méthode automatique

Comme son nom l'indique, vous n'avez rien à faire pour que les produits apparaissent sur la page de la boutique. Les éléments s'affichent au fur et à mesure que vous les ajoutez à partir du tableau de bord. Ils sont automatiquement classés par ordre alphabétique ou de manière aléatoire avec ou sans catégories en fonction de vos paramètres d'affichage WooCommerce.

La page d'accueil ne peut accueillir qu'un certain nombre de produits, ce qui signifie que si vous avez un grand nombre de produits, certains d'entre eux seront placés sur les pages 2, 3, 4 et ainsi de suite.

Cette méthode rend difficile pour vos clients de connaître tous les types de produits de votre boutique car elle n'inclut pas de catégories et certains articles sont masqués sur d'autres pages.

Vous devrez peut-être éviter cette méthode si vous pouvez utiliser de meilleures méthodes (décrites ci-dessous) pour afficher les éléments. Mais si vous avez un certain nombre d'éléments qui peuvent tenir sur une seule page, c'est-à-dire la page d'accueil, vous pouvez adopter cette méthode.

Produits affichés au hasard

Par Jan Saints (Travail personnel): CC-BY-2.0

2. Utilisation des widgets

Comme vous le savez peut-être, un widget dans WordPress est un petit bloc de contenu qui peut être placé dans les sections de la barre latérale et du pied de page. Il fournit un moyen simple et facile de personnaliser un site Web. Certains widgets courants incluent: les publications récentes, le champ de recherche, les catégories et le menu de pied de page.

Dans un site Web de commerce électronique, des widgets peuvent être utilisés pour afficher des catégories de produits dans la barre latérale ou le pied de page. Ils peuvent donc être un excellent moyen de booster la méthode automatique (discutée ci-dessus) qui ne présente pas de catégories de produits.

Certains grands widgets fournis avec les thèmes WordPress de commerce électronique incluent des produits populaires, des produits récents, des produits les plus vendus, des produits les mieux notés et des produits en vedette. Ces widgets sont personnalisables, ce qui signifie que vous pouvez les renommer avec les catégories réelles de vos éléments. Vous pouvez également les faire glisser et les déposer pour obtenir un arrangement qui convient à votre style.

Étant donné que les widgets ne peuvent afficher les produits que dans les barres latérales et les pieds de page, la plupart des propriétaires de boutiques en ligne les trouvent indésirables. Le meilleur endroit pour afficher des éléments est sur la barre principale d'une page, ce qui ne peut pas être réalisé avec des widgets.

Produits affichés sur une barre latérale à l'aide d'un plugin

Par Jan Saints (Travail personnel): CC-BY-2.0

3. Utilisation de plugins

Dans WordPress, un plugin est un ensemble de programmes qui contient un groupe de fonctions, fonctionnalités ou services. Dans ce système de gestion de contenu, il existe des dizaines de milliers de plugins (gratuits et premium) adaptés à un large éventail de besoins. Il existe des plugins pour tous les types de sites Web, par exemple, il existe des plugins pour le commerce électronique (comme WooCommerce), les annuaires, les blogs, les plateformes de revente et de réservation.

Lorsqu'il s'agit d'afficher et d'organiser des articles sur une boutique en ligne, il existe une myriade de plugins que vous pouvez utiliser pour effectuer cette tâche. Mais la plupart des plugins ne sont pas très efficaces, vous devez donc opter pour ceux qui ont fait leurs preuves.

Les plugins les plus recommandés pour afficher des articles sur une boutique en ligne WordPress sont Ultimate Product Catalog et WooCommerce Product Sort and Display.

Le plugin de tri et d'affichage fonctionne mieux avec un autre plugin appelé Endless Scroll qui vous permet d'afficher un grand nombre d'articles sur votre page de boutique. Après avoir installé et activé les deux plugins, vous devez aller dans les catégories de produits et faire glisser et déposer les catégories pour obtenir le bon affichage. Vous pouvez ensuite définir le nombre de produits à afficher par catégorie avec des liens pour tout afficher.

En ce qui concerne le tri, le plugin est livré avec un tri par défaut et un tri par popularité, nouveauté, prix (de bas en haut et vice versa), en vente et en vedette. Certaines de ces fonctionnalités sont fournies avec la version premium du plugin, il est donc recommandé d'utiliser cette version.

L'autre plugin, Ultimate Product Catalog, est un peu complexe. Après avoir installé et activé le plugin, vous devez y ajouter tous vos produits et catégories afin d'obtenir des identifiants que vous pouvez utiliser dans des codes courts pour afficher vos articles. Vous devez également créer de petits catalogues pour vos articles.

Par exemple, le shortcode suivant affichera les produits du catalogue avec l'ID "x".

ou

Le plugin regorge de fonctionnalités telles que les mises en page de catalogue personnalisables, les prix de vente, l'importation de produits, le symbole de la devise, le fil d'Ariane, le partage des médias sociaux, l'examen et les évaluations de produits, l'intégration SEO by Yoast et un grand nombre d'options de configuration.

Les styles de catalogue de produits inclus dans le plugin comprennent: la mise en page minimaliste, en bloc, en survol et en onglets. Certains de ces styles, ainsi que certaines des fonctionnalités décrites ci-dessus, sont disponibles avec la version premium du plugin.

Produits affichés dans un style de bloc à l'aide d'un plug-in

Par Jan Saints (Travail personnel): CC-BY-2.0

4. Utilisation de codes courts

Si vous utilisez WooCommerce pour votre boutique en ligne, vous pouvez trouver que les codes courts sont le moyen le plus simple d'afficher des produits sur votre page de boutique. Les codes courts fonctionnent avec les ID et SKU de produit et de catégorie, et peuvent simplement être copiés et collés sur la page de la boutique pour afficher les articles. Voir les codes courts ci-dessous.

- affiche la liste des catégories.

- affiche un nombre spécifique de catégories et fonctionne bien avec les arguments suivants. Remarque: ces arguments peuvent également fonctionner avec ce shortcode.

• number = "null" - pour afficher le nombre de catégories.
• orderby = "name" - pour afficher les catégories lorsqu'elles sont triées par nom. Remarque: La valeur "nom" peut être remplacée par date, rand (aléatoire), modifié et aucun.
• order = "asc" - pour afficher les catégories lorsqu'elles sont triées par ordre croissant. Remarque: La valeur "asc" peut être remplacée par "desc" dans l'ordre décroissant.
• colonnes = "x" - pour afficher les colonnes "x" d'une catégorie.
• hide_empty = "1" - pour masquer les catégories.
• hide_empty = "0" - pour afficher les catégories.
• parent = "0" - pour afficher les catégories de niveau supérieur.
• ids = "x" - pour afficher la catégorie avec l'ID "x".
• category = "x" - pour afficher la catégorie "x".

• categories_limit - pour afficher un nombre limité de catégories.
• archive_template - pour afficher un modèle d'archive spécifique pour une liste particulière.
• design_scheme - pour afficher une couleur ou une taille spécifique.
• sort = "0" - pour désactiver le sélecteur de tri des produits.
• sort = "1" - pour activer le sélecteur de tri de produits.
• = "1" - pour activer le shortcode.
• post_type - pour afficher les entrées d'un type de publication différent.
• per_row - pour afficher les produits par ligne.
• vide - pour afficher un certain texte lorsqu'il n'y a aucun produit à afficher.

• - affiche "y" les éléments de la catégorie "x" affichés dans les colonnes "z" et classés par ordre décroissant en fonction de la date de publication.
• - affiche la liste des produits.
• - affiche le nom du produit. Remarque: La valeur "nom" peut être remplacée par d'autres valeurs pour former plus de codes courts. Certaines de ces valeurs incluent: prix, description, brève description, table attributaire, SKU, livraison, galerie et catégories associées.
• - affiche les catégories de la page de liste de produits actuelle.
• - affiche les produits pour la page de liste de produits actuelle.
• - affiche des miettes de pain.
• - affiche un nombre limité de produits.
• - affiche une URL de retour aux produits qui pointe vers la page principale de la liste des produits.
• - affiche les produits actuellement en vente.
• - montre le produit avec l'identifiant "x".
• - affiche les produits avec les identifiants "x", "y" et "z".
• - affiche le produit avec le SKU "xyz"
• - affiche le produit avec SKU "abc", "def" et "ghi".
• - affiche le prix et le bouton Ajouter au panier pour un produit avec l'identifiant "x".
• - affiche le prix et le bouton Ajouter au panier pour un produit avec SKU "x".
• - affiche les éléments "x" maximum.
• - affiche les produits avec un certain attribut, à savoir l'attribut «couleur» et la couleur étant «noir».

• - affiche "x" les produits récents affichés dans des colonnes "y" et classés par ordre décroissant en fonction de la date de publication.
• - affiche les produits phares «x» affichés dans des colonnes «y» et classés par ordre décroissant en fonction de la date de publication.
• - affiche «x» les produits populaires affichés dans des colonnes «y» et classés par ordre décroissant en fonction de la date de publication.
• - affiche «x» les produits les mieux notés affichés dans des colonnes «y» et classés par ordre décroissant en fonction de la date de publication.
• - affiche «x» les produits les plus vendus, affichés dans des colonnes «y» et classés par ordre décroissant en fonction de la date de publication.
• - affiche les produits associés «x» affichés dans des colonnes «y» et classés par ordre décroissant en fonction de la date de publication.
• - affiche la liste des produits avec un modèle de liste classique. Remarque: d'autres modèles tels que «grille» et «par défaut» peuvent être utilisés à la place de «liste».
• - affiche les produits de la catégorie avec l'identifiant "x" et avec le modèle de liste classique.

Remarque: si vous maîtrisez le codage, vous pouvez modifier ces codes courts pour obtenir un meilleur affichage et une meilleure disposition du produit.

Un shortcode collé sur une page

Par Jan Saints (Travail personnel): CC-BY-2.0

5. Utilisation des curseurs

Au cas où vous ne le sauriez pas, un curseur est un élément de page Web utilisé pour mettre en évidence un groupe de publications sélectionnées. C'est comme un diaporama, ce qui signifie qu'il affiche un article à la fois, passant de l'un à l'autre automatiquement ou en cliquant.

Pour afficher les produits avec des curseurs, vous devez remplacer les messages par vos produits. Quand il s'agit de créer un curseur de produit, vous avez besoin d'un plugin de curseur réactif comme Soliloguy. Après avoir installé et activé le plugin, vous devez ajouter un nouveau curseur, et vous pouvez le faire en utilisant des photos, des liens et d'autres détails nécessaires de vos éléments. L'étape suivante consiste à enregistrer ou publier votre curseur afin d'obtenir un shortcode et une balise de modèle.

Enfin, vous devez copier et coller le shortcode sur votre page d'accueil ou sur toute autre page pour afficher les produits. La balise de modèle peut afficher des éléments dans la section d'en-tête de votre thème. Il vous suffit de copier la balise, d'ouvrir votre header.php et de le coller sur la page codée.

WooCommerce a un plugin appelé Products Slider qui est conçu pour le commerce électronique. Cela fonctionne comme un plugin de slider typique, mais il propose plus de paramètres et d'options. Je vous encourage à voir si cela peut vous aider avec l'affichage et la disposition des articles.

Produits affichés sur un curseur

Par Jan Saints (Travail personnel): CC-BY-2.0

Conclusion

Afficher et organiser des articles sur votre site Web de commerce électronique WordPress est assez simple et facile avec ces cinq méthodes. Si vous avez eu du mal à afficher et à organiser les produits sur votre boutique en ligne, vous devriez maintenant commencer à effectuer ces deux tâches avec beaucoup de facilité. Choisissez simplement une méthode qui, selon vous, peut fonctionner pour vous et placez ces produits sur votre page d'accueil de manière plus intelligente.

Les références

1. Méning. R. Comment créer une boutique en ligne avec WordPress et WooCommerce. sites Webetup.org . Configuration du site Web. (2017).
2. Andronaco R. Comment créer une boutique en ligne à l'aide de WooCommerce et Wordpress: Guide simple pour la configuration parfaite d'un site Web de commerce électronique. (2017).
3. Rastaurius E., Conception Web Etoile. Catalogue de produits de commerce électronique pour WordPress. wordpress.org. implecode. (2017).
4. WooCommerce. Shortcodes inclus avec WooCommerce. docs.woocommerce.com . WooCommerce. (2016).
5. Truman S., Tuan N., Ar3rev Software. Plugin de tri et d'affichage des produits WooCommerce. wordpress.org. Logiciel Ar3rev. (2013).
6. YiThemes. Yith Infinite Scrolling Plugin. wordpress.org. YITHEMES. (2017).
7. Razzak S. Un guide exclusif pour le plugin Slider de produits WooCommerce. cloudways.com. Cloudways Ltd. (2016).
8. Balkhi S.Comment créer facilement un curseur WordPress réactif avec Soliloquy. wpbeginner.com . WPBeginner. (2014).

© 2017 Januaris Saint Fores