Un guide des concepteurs sur WooCommerce

Si vous concevez une boutique WooCommerce comme Shopify ou si vous développez un thème WooCommerce existant, cet article Guide des concepteurs de WooCommerce est fait pour vous. Cette composition donne un peu plus d'informations sur le style, la modification des conceptions et d'autres informations couvrant les pages WooCommerce associées.

Ce plugin est un outil convivial et très flexible ; cependant, tous les sites Web ne seront pas pris en charge. En utilisant les fonctionnalités et les approches prises en charge par WooCommerce, vous pouvez accélérer le processus de conception et de développement.

Il permet aux utilisateurs de personnaliser les modifications mais avec un coût supplémentaire. Le moyen le plus rapide de voir les fonctionnalités disponibles est de visiter la démo Storefront dans WooCommerce. Si vous avez besoin d'un moyen d'apprendre de manière générale à utiliser Woocommerce, consultez les guides de dôme pour vous aider à démarrer. WooCommerce crée les nouvelles pages suivantes. Il existe des types de pages pour lesquelles vous devrez concevoir.

Le premier est les pages de produits. Ces pages sont de deux types, à savoir : les pages d'archives de produits et les pages individuelles de produits.

Les pages d'archives de produits affichent des vignettes pour les catégories de produits disponibles. Celles-ci affichent une autre page d'archives de produits lorsque vous cliquez sur la vignette de la catégorie. Ensuite, il affiche le produit unique lorsque vous cliquez sur une vignette de produit.

L'autre type est Product Single Pages. Ici, ceux-ci affichent des produits uniques et combinent des images de produits, des informations d'en-tête de produit, des informations détaillées sur le produit et des produits connexes, des ventes croisées et des ventes incitatives.

Il a également des pages spéciales , qui incluent le panier et le paiement . Les paniers d'achat sont généralement affichés sous forme condensée sous forme de widget de barre latérale, parfois sous forme développée sur la page Panier avec les informations de livraison. Le paiement, en revanche, a lieu lorsque le client vérifie et nécessite des informations d'adresse.

Différents types de produits

Cet outil propose différents types de produits ;

Le premier est l'en-tête de produit qui est divisé en cinq parties. Ceux-ci sont:

1. Nom du produit - ceux-ci sont affichés sur les pages de résumé/archives et les pages individuelles
2. Caractéristique du produit - Vous verrez sur les pages de résumé / d'archives et les pages de célibataires
3. Image - Les images en vedette s'affichent sur le résumé et des images supplémentaires sur la page du produit unique
4. Description longue - Ceci est affiché dans la zone Description du produit au bas de la page du produit unique
5. Brève description - Ceci est affiché en haut de la page du produit unique

Cet outil permettra également à un utilisateur d'accéder au produit.

Chaque catégorie a besoin d'une image de catégorie fournie et d'une description, et elle peut également avoir des sous-catégories. Par exemple, Chaussure est une catégorie et la marque de chaussures est une sous-catégorie. Les archives de catégories de produits sont automatiquement générées avec les sections suivantes : titre ou nom de la catégorie, description de la catégorie, une vignette de catégorie pour chaque sous-catégorie de la catégorie actuelle, les vignettes de produits facultatives incluent le titre, le prix et l'ajout au panier pour chaque produit dans la catégorie actuelle. En cliquant sur une catégorie ouvre une nouvelle catégorie, en cliquant sur une vignette de produit ouvre le produit.

De plus, sous Product Pages, celles-ci sont automatiquement générées avec les éléments suivants :

Images du produit - Il s'agit d'images en vedette et d'images supplémentaires pour le produit. Titre du produit, prix du produit, description courte du produit, quantité à ajouter au panier (avec + et commandes), bouton Ajouter au panier, catégories de produit SKU (unité de gestion des stocks) et balises.

Les onglets de produit incluent la longue description du produit, y compris la galerie d'images facultative, des informations supplémentaires telles que le ticket d'attributs de produit à afficher sur la page du produit et les avis de produit facultatifs. En cliquant sur une catégorie ouvre une nouvelle catégorie, en cliquant sur une vignette de produit ouvre le produit.

Ventes incitatives - Il s'agit de la chose "vous aimerez peut-être aussi" suivie de vignettes/titres pour les ventes incitatives.

Ventes croisées - Ce sont les produits associés suivis des vignettes.

La présentation du produit, les options sont la présentation Standard et Optionnelle. La norme affiche l'image en vedette en haut de la page du produit, avec les vignettes d'image supplémentaires en dessous dans 3 colonnes de vignettes. En revanche, la présentation facultative affiche l'image sélectionnée sans vignettes en dessous et affiche toutes les images dans l'onglet Description.

Une autre partie de l'outil est les widgets de recherche de produits qui peuvent être placés dans des widgets de barre latérale ou des widgets de pied de page. Si vous souhaitez rechercher un site Web, il dispose des options de recherche à l'échelle du site. En dessous se trouve la zone de recherche de produit qui vous permet de rechercher un nom de produit, une description courte et une description longue. L'autre division des options de recherche large est appelée exploration de catégorie. Il s'agit d'un champ déroulant qui permet de sélectionner n'importe quelle catégorie ou sous-catégorie. Le kit de nuage d'étiquettes fier a une liste déroulante qui vous permettra de sélectionner des étiquettes de prix.

Les widgets de recherche des options de recherche de catégories de produits n'apparaissent que lorsque des archives de catégories de produits générées automatiquement sont affichées. Le premier est la navigation par couches. Cela permet à l'utilisateur d'affiner les produits en fonction des attributs et aide efficacement l'utilisateur sur ce qu'il recherche. Filtre de prix de produit—affiche une échelle mobile permettant de filtrer les produits selon une fourchette de prix. Meilleures ventes—affiche le titre/la vignette/le prix d'une liste sélectionnée automatiquement des produits les plus vendus. Le produit vedette affiche le titre/la vignette/le prix des produits cochés comme produits vedettes. En vente : affiche les produits pour lesquels un prix de vente a été saisi en plus de leur prix.

Si un utilisateur souhaite styliser son WooCommerce, nous avons des options telles que les miniatures de produits. Lorsque les produits apparaissent sous forme de vignettes de produits, 4 éléments sont affichés, ceux-ci incluent la vignette, le titre, le prix, l'ajout au panier. Style CSS pouvant être utilisé pour l'arrière-plan du produit, la bordure du produit, le rembourrage et la marge. Vient ensuite la vignette. Ceux-ci incluent la bordure, le remplissage et les marges. Le titre comprend la police, le poids, la couleur et la taille, de même que le prix. Sous Ajouter au panier inclut la couleur du bouton, la couleur de l'étiquette, la bordure et le rayon.

L'autocollant de vente est également affiché sur l'outil. Le mot "vente" apparaît sur les vignettes des produits en vente. Le style CSS peut être utilisé : couleur d'arrière-plan, couleur de police, couleur de bordure. Largeur de bordure, bordure pleine/en pointillés, rayon de bordure.

Les variantes de produit permettent à un client de créer un produit vestimentaire disponible en différentes couleurs ou différents modèles. Lorsque des variantes de produits sont utilisées, les pages d'archives de produits affichent un bouton "Choisir les options" plutôt qu'un bouton Ajouter au panier.

En résumé, nous avons défini les principaux éléments auxquels vous devrez penser lors de la conception d'une boutique WooCommerce. Nous avons expliqué les différents types de pages, les informations sur les produits ainsi que les options de recherche et de style. Amusez-vous à créer votre boutique WooCommerce.

En savoir plus sur les thèmes WordPress Woocommerce ici.