Débuter avec WooCommerce Lancer votre boutique

WooCommerce apporte un commerce électronique sérieux à WordPress dans la première partie de notre série. Nous avons examiné l’installation et la configuration complète. Aujourd'hui, nous allons parler des produits, discuter des différents types de produits proposés par WooCommerce et ajouter nos premiers produits à notre site. Nous passerons ensuite au style et à la thématisation de WooCommerce avant de terminer avec les prochaines étapes..

---

Ajout de votre premier produit

Nous sommes donc enfin prêts à ajouter nos premiers produits! Je trouve toujours préférable d’ajouter des produits avant de regarder le style car vous pouvez voir comment tout se présentera une fois que vous aurez configuré les produits, multiplié les ventes, augmenté les ventes, augmenté les ventes, etc. Même si vous créez des produits fictifs, cela peut vous faire gagner du temps. plus tard, pour réparer un bogue avec quelque chose auquel vous n'aviez pas pensé initialement. Les produits WooCommerce sont essentiellement des publications dans un type de publication personnalisé. L'ajout de nouveaux produits doit donc être très familier pour la plupart des utilisateurs de WordPress. "Sauce spéciale" pour y ajouter la magie du commerce électronique! Ajoutons des produits.

WooCommerce prend en charge quatre types de produits différents:

1. UNE Simple le produit est utilisé dans la plupart des cas. C'est généralement le produit qui est expédié et n'a pas d'options. Par exemple, un jeu de société ou un parapluie. (Parce que nous vendons tous des jeux de société et des parapluies?)
2. UNE Groupé Le produit est une collection de produits connexes qui peuvent être achetés individuellement. Par exemple, une Playstation3 pourrait être un produit groupé avec 80 Go, 120 Go et 200 Go étant des variantes du même produit parent..
3. Un Externe ou Filiale le produit est sur votre liste dans votre boutique en ligne et peut décrire mais est vendu sur un site tiers.
4. Un produit variable est le produit le plus complexe avec lequel travailler. Je peux avoir plusieurs versions différentes, chacune avec ses propres SKU, prix et options d'achat d'actions. Le plus souvent utilisé dans les vêtements, par exemple un t-shirt disponible en plusieurs tailles et couleurs.

Comme WooCommerce est construit sur la fonctionnalité de publication WordPress standard, vous obtenez également un ensemble de taxonomies personnalisées. Les catégories et les balises se comportent exactement comme pour les articles de votre blog. S'assurer que vous utilisez correctement les catégories de votre magasin peut être le véritable atout de votre magasin. C’est ainsi que les utilisateurs navigueront dans vos produits. Réfléchissez bien à la structure de vos catégories. Vous pouvez également créer des catégories enfants, utilisez-les pour classer vos produits..

Ajout d'un produit simple

L'ajout d'un produit simple devrait sembler très familier à la plupart des utilisateurs de WordPress. L’interface est presque identique à celle de l’écran de publication WordPress standard avec l’ajout de certaines boîtes à méta personnalisées supplémentaires. Vous entrez le titre et la description de votre produit dans la boîte de dialogue principale de WordPress. Vous pouvez utiliser tout le même formatage que vous le feriez dans n'importe quel post WordPress normal.

En dessous se trouve le Données du produit meta box. C'est là que vous ajoutez beaucoup d'informations importantes. En haut de cette liste se trouve le sélecteur déroulant du type de produit. À partir de là, vous sélectionnez votre type de produit. Vous pouvez également cocher les cases s'il s'agit d'un produit virtuel ou téléchargeable (nous y reviendrons plus tard). Tout d'abord, nous avons le Onglet général C’est ici que vous définissez votre SKU (unité de conservation des stocks) utilisée comme identifiant unique pour votre produit (facultative et pouvant être désactivée sur l’ensemble du site dans les paramètres du catalogue, comme décrit dans notre Guide de configuration)..

Ensuite nous avons vos champs de prix, le prix régulier est votre prix de vente normal pour le produit, vous pouvez également définir un prix de vente avec un calendrier pour ce prix de vente. Ceci est un ajout intéressant car vous pouvez configurer un horaire pour une offre de week-end. Les utilisateurs verront le prix complet et le prix de vente spécial. Sous les champs de prix, vous pouvez voir les champs de poids et de dimensions (si vous ne les avez pas désactivés dans vos paramètres de catalogue), ce qui peut être particulièrement utile si vous utilisez une extension d’expédition comme UPS ou FedEx, car vous pouvez calculer automatiquement les frais d’expédition sur cette base. dimensions et poids.

Nous passons au Onglet taxe, Vous pouvez ici remplacer le statut de taxe de vos produits ou définir sa classe de taxe si vous avez configuré des classes de taxe supplémentaires dans votre configuration de taxe. dans le Onglet Inventaire Cela vous permet de remplacer vos paramètres d'inventaire global pour un produit individuel et de modifier les options de traitement des commandes en retard. Aussi avec le Onglet Expédition vous pouvez définir une classe d'expédition spécifique pour votre produit si vous avez cette configuration.

Nous passons maintenant à une fonctionnalité très intéressante sur le Onglet Produits connexes. De là, vous pouvez promouvoir vos produits les uns avec les autres. Il suffit de commencer à taper le nom du produit pour lancer une recherche dans votre liste de produits. Les ventes incitatives sont affichées sur la page de détails du produit. Vous voudrez peut-être encourager les utilisateurs à mettre à niveau ces produits en fonction du produit qu'ils consultent actuellement. Par exemple, si l'utilisateur visualise la page de liste des produits Nintendo DS, vous pouvez afficher la Nintendo 3DS sur cette même page en tant que vente additionnelle. Les ventes croisées sont des produits affichés dans le panier et liés au contenu du panier de l'utilisateur. Par exemple, si l’utilisateur ajoute une Nintendo DS à son panier, vous voudrez peut-être lui suggérer d’acheter des stylets de rechange lorsqu’ils arrivent à la page du panier..

le Onglet Attributs nous y viendrons plus tard lorsque nous discuterons de produits variables. Enfin nous avons le Onglet Avancé vous définissez ici une note facultative à envoyer à votre client après l’achat, attribuez au produit une position de menu personnalisée et définissez son groupe (si vous utilisez un produit groupé). Vous pouvez également remplacer votre paramètre d'examen global ici.

En dessous, vous verrez le Description courte du produit ceci est votre extrait de produit. Si vous n'entrez rien ici, un compte sera créé automatiquement pour vous, comme tout message WordPress..

Enfin, dans le panneau de publication, vous disposez d’un certain nombre d’options supplémentaires:

• Catalogue et recherche - Visible partout.
• Catalogue - Visible uniquement dans les boucles du catalogue, ne sera pas affiché dans les résultats de la recherche.
• Chercher - Visible uniquement dans les résultats de recherche et n'apparaît pas dans le catalogue.
• Caché - Visible uniquement sur la page de produit unique, ne sera pas affiché dans les pages de catalogue ni dans les résultats de recherche.

Produit produit

Comme vous le feriez avec n'importe quel système de commerce électronique, vous pouvez ajouter plusieurs images à vos produits et WooCommerce les gérera bien. En travaillant avec WordPress 3.5, vous bénéficierez également du gestionnaire de médias amélioré. Ajouter des images à votre produit est à peu près le même que n'importe quel post WordPress. Vous pouvez définir une image sélectionnée et vous pouvez également ajouter plusieurs images. La différence est qu'il n'est pas nécessaire d'insérer quoi que ce soit dans votre message. Toute image que vous attachez à votre produit mais que vous ne définissez pas comme image sélectionnée apparaîtra sous votre image sélectionnée et constituera une petite galerie de produits. Vous pouvez voir un exemple ci-dessous. WooCommerce possède également son propre effet Lightbox intégré que vous pouvez activer ou désactiver dans vos paramètres WooCommerce en fonction de vos besoins..

Ajout d'un produit groupé

Un produit groupé est créé de la même manière qu’un produit simple. En réalité, la seule différence est de choisir "Groupé" dans la liste déroulante Type de produit de l'onglet Général. Après avoir choisi ce prix, plusieurs champs disparaîtront, c'est bien, vous les ajouterez aux produits enfants individuels. Une fois que vous êtes satisfait du produit groupé (parent), publiez-le et revenez à la page Ajouter un nouveau produit..

Vous devez maintenant ajouter le produit enfant qui se trouve dans le produit groupé. Les seules informations que vous devez remplir ici sont les suivantes:

1. Titre. PAR EXEMPLE. Playstation 3 80 Go.
2. Type de produit (simple).
3. Prix ​​du produit et stock.
4. Poste parent (dans l'onglet Avancé). Choisissez votre parent (E.G. Playstation 3) dans la zone de sélection.

Ajout d'un produit virtuel

Un produit virtuel est un produit qui n'est pas livré et qui n'a pas de stock à gérer. Lorsque vous ajoutez un produit simple, cochez simplement la case "virtuelle" dans le panneau de type de produit et tous les champs inutiles (comme les dimensions ou le poids) seront supprimés. Un produit virtuel peut être tout ce que vous voulez, des frais uniques aux parties de votre site permettant de transférer manuellement l'acheteur dans un nouveau groupe ou d'utiliser l'extension WooCommerce Groups..

Ajout d'un produit téléchargeable

Comme avec un produit virtuel lors de l'ajout d'un produit simple, vous pouvez cocher la case "téléchargeable". Cela va ajouter trois nouveaux champs:

• Chemin du fichier - Il s’agit du chemin du fichier à livrer après l’achat. Vous pouvez également télécharger un fichier à partir d’ici et WooCommerce le placera dans un dossier spécial auquel il limite l’accès..
• Limite de téléchargement - Ici, vous pouvez limiter le nombre de fois que votre acheteur peut télécharger le fichier. Vous pouvez laisser ce champ vide pour permettre des téléchargements illimités.
• Télécharger l'expiration - Ici, vous pouvez définir le nombre de jours après l'achat avant l'expiration du lien de téléchargement. Encore une fois, vous pouvez laisser en blanc pour désactiver.

Si vous proposez à la fois un téléchargement numérique et un produit en boîte physique, vous pouvez également facturer les frais d’expédition pour les produits téléchargeables. De cette façon, vous avez un produit pour une version en boîte et une version numérique. Si vous cochez également la case virtuelle, les frais d’expédition seront désactivés..

Ajout d'un produit externe

Choisissez "External / Affiliate" dans le menu déroulant. Cela supprimera les onglets inutiles tels que les taxes et l'inventaire et insérera un nouveau champ d'URL de produit. C’est la destination à laquelle les utilisateurs peuvent acheter le produit. Plutôt que d'ajouter des boutons au panier, ils verront un bouton en savoir plus les dirigeant vers cette URL.

Ajout d'un produit variable

Préparez-vous car c'est l'un des produits les plus compliqués à configurer. Soyez patient, car une fois que vous l'avez maîtrisé, vous allez l'adorer! Les produits variables vous permettent de vendre plusieurs variantes du même produit, chacune avec son propre prix, son SKU, ses numéros de stock et si vous souhaitez créer une image. Nous devons d’abord sélectionner "Produit variable" dans le panneau de sélection du type de produit. Nous devons ensuite définir certains attributs pour notre produit, qui sont liés aux variantes. Les attributs peuvent constituer une partie importante de votre magasin et peuvent être définis globalement ou individuellement. En plus d’être utilisés dans des variantes, les attributs peuvent aider à classer vos produits, permettant ainsi aux utilisateurs de trouver facilement ce qu’ils recherchent. La documentation WooCommerce en donne un exemple parfait.

Supposons que vous ouvriez un magasin de jeux vidéo et vendiez tous les derniers jeux pour les toutes dernières consoles. Dans ce cas, votre catégorie de produits de premier niveau sera très probablement les jeux à l'intérieur desquels la majorité de votre catalogue résidera..

Maintenant, vous pouvez très facilement créer des sous-catégories pour différents types de consoles, genres, etc., mais ces informations sont mieux adaptées en tant qu’attributs. Pourquoi? Parce qu'un utilisateur peut sélectionner des attributs concurrents tout en affinant leur recherche.

Exemple: ils recherchent un jeu de sport sur PS3. C'est aussi simple que de naviguer dans la catégorie Jeux, puis de sélectionner les attributs PS3 et Sport dans un widget de barre latérale. Comme vous vous en doutez, cela actualisera la page afin qu’elle ne contienne que des jeux de sport pour la PS3..

WooCommerce fournit un widget que vous pouvez utiliser pour naviguer dans vos attributs. Vous pouvez voir plus d'informations à ce sujet dans la documentation WooCommerce.

Pour revenir à notre produit, nous avons sélectionné un produit variable dans notre panneau de sélection du type de produit et nous devons maintenant associer nos attributs. En cliquant sur l'onglet Attributs, nous pourrons soit sélectionner un attribut global, soit en ajouter un à ce produit individuel. Vous devez créer des attributs globaux si vous comptez les utiliser plus d'une fois, par exemple les tailles, si vous créez un magasin de vêtements ou des couleurs. Vous pouvez également ajouter plusieurs attributs à un seul produit, par exemple la taille et la couleur. Lorsque vous avez ajouté vos attributs, assurez-vous de cocher la case "Utilisé pour les variantes", cela les fera ensuite apparaître dans l'onglet "Variations". Une fois que vous avez ajouté vos attributs, vous devez enregistrer votre produit..

Maintenant que nous avons ajouté nos attributs et enregistré notre produit, nous pouvons accéder à l'onglet Variations. Vous pouvez configurer manuellement vos variations en cliquant sur "Ajouter une variante" ou vous pouvez simplement cliquer sur "Lier toutes les variantes". Cela créera automatiquement vos variantes pour vous en reliant toutes les combinaisons possibles d'attributs de variante (maximum de 50 par exécution)..

Ainsi, si votre exemple comportait 2 attributs - couleur (avec les valeurs bleue et verte) et taille (avec les valeurs grandes et petites), il créerait les variations suivantes:

• Grand bleu
• Grand vert
• Petit bleu
• Petit vert

Une fois que vous avez ajouté toutes vos variantes, vous pouvez ensuite consulter et mettre à jour vos données de produit. Chaque variante peut avoir son propre ensemble de données parmi les suivantes:

• Image - Cliquez sur l'icône de l'image pour voir le programme de téléchargement de média WordPress. Une fois l'image téléchargée, cliquez simplement sur "Insérer dans le message". Lorsqu'un utilisateur sélectionne une variante avec une image distincte, l'image principale du produit sera mise à jour de l'image sélectionnée définie à l'image définie dans la variante. Cela signifie que vous pouvez techniquement avoir une image différente pour chaque variante. Particulièrement utile pour les variations de couleur.
• SKU - Vous pouvez définir une SKU pour votre variante ou simplement la laisser vide et elle héritera des produits parents..
• Quantité en stock - Vous pouvez définir une quantité de stock pour la variation de la laisser vide pour utiliser les paramètres de stock parent. Vous pouvez également le mettre à zéro pour indiquer une rupture de stock.
• Poids / Dimensions - Ceux-ci peuvent être définis pour que la variante laissée en blanc hérite du parent.
• Prix - Le seul champ obligatoire ici vous permet de définir le prix de votre variation.
• Prix ​​de vente - Vous pouvez définir un prix de vente pour une variante particulière. Utile si vous avez besoin de vendre à travers une variante particulière.
• Téléchargeable - Si cette variante est un produit téléchargeable, cochez la case. Vous pouvez ensuite saisir l'URL du fichier et les limites de téléchargement..
• Virtuel - Si la variante est virtuelle, cochez la case.
• Activée - Décochez la case pour désactiver la variation. Il ne sera plus disponible.
• Classe d'expédition - La classe d'expédition peut affecter l'expédition. Définissez ceci s'il diffère du parent.
• Classe d'impôt - Une classe d'impôt pour cette variante. Utile si vous proposez des variantes couvrant différentes tranches d'imposition.

Vous devez définir un prix pour chaque variante. Toutefois, vous pouvez modifier en bloc les variantes en utilisant la barre de modification en bloc située au-dessus de vos variantes. Vous pouvez également définir les variations par défaut qui figureront en haut de la liste déroulante lorsque les utilisateurs verront votre produit dans l'interface frontale..

Les produits variables peuvent être un peu difficiles à comprendre. Cela vaut la peine de prendre le temps de bien comprendre ce qu'ils peuvent vraiment ajouter à l'expérience utilisateur globale pour vos clients..

---

Theming et Styling

Dans la première partie de notre série, nous avons examiné les paramètres généraux de WooCommerce, dans lesquels vous pouvez activer les styles CSS WooCommerce. Nous allons creuser un peu plus pour savoir comment rendre WooCommerce beau. Tout d’abord, 9/10 fois plus de détails avec le CSS par défaut de WooCommerce activé. Vous pouvez tester très rapidement en vous assurant que le CSS par défaut de WooCommerce est activé dans les paramètres généraux..

Vous devriez être capable de voir très rapidement comment WooCommerce fonctionnera avec votre thème. Si vous devez apporter des modifications au CSS, je procède comme suit:

1. Localiser /wp-content/plugins/woocommerce/assets/woocommerce.css et copiez ce fichier dans votre dossier de thèmes. Je le copie habituellement dans un fichier appelé woocommerce.css (cela n'a pas de sens, n'est-ce pas!).
2. Le fichier est compressé CSS donc vous aurez besoin de le décompresser, j'utilise Coda de Panic comme éditeur de code avec PHP et Web Toolkit afin de "nettoyer" le CSS dans un format lisible et utilisable est assez facile. Vous pouvez améliorer votre CSS avec cet outil en ligne si vous n’avez rien de semblable dans votre éditeur de code..
3. Vous devrez également ajouter les images WooCommerce à votre thème. Il suffit de copier / wp-content / plugins / woocommerce / assets / images /dans un dossier de votre dossier de thème et veillez à mettre à jour les chemins dans votre nouveau fichier woocommerce.css
4. Nous avons besoin que notre thème reconnaisse notre feuille de style supplémentaire.

   WordPress est maintenant au courant de notre nouvelle feuille de style et l'ajoutera à nos pages générées par WordPress. Vous pouvez obtenir plus d'informations sur l'enregistrement et la mise en file d'attente de styles dans le Codex WordPress.

5. Dans les paramètres généraux WooCommerce, cochez la case "Activer les styles CSS WooCommerce". Ou si vous préférez, vous pouvez le désactiver via votre thème (utile pour empêcher les clients embêtants de tout gâcher!)

J'ai maintenant une copie du CSS WooCommerce deafult dans mon thème afin de pouvoir effectuer des mises à jour sans les avoir effacées par les mises à jour de plugins. Il devrait ressembler exactement à ce qu'il était lorsque le CSS par défaut avait été activé via les paramètres. Vous pouvez effectuer la plupart de vos modifications avec CSS si vous rencontrez des problèmes, mais il y a quelques autres choses à connaître. Votre premier problème sera probablement la division enveloppante autour du contenu de WooCommerce. Vous pouvez utiliser votre propre page de modèle pour que WooCommerce l’utilise pour tout son contenu..

1. Copiez vos thèmes page.php et nommez-le woocommerce.php
2. Ouvrez votre nouveau fichier dans l'éditeur de code de votre choix et localisez la boucle. Cela commencera généralement par:

   et se terminent par:

   Cela peut varier selon votre thème.

3. Remplacez la boucle par le code suivant:

Certaines fonctionnalités et certains styles de WooCommerce peuvent être créés à l'aide des actions et des filtres de WooCommerce. Tout comme le noyau WordPress, WooCommerce propose un ensemble complet d’actions et de filtres que vous pouvez connecter ou remplacer. Vous pouvez modifier le div wrapper en utilisant l'action suivante:

"; '), 10); add_action (' woocommerce_after_main_content ', create_function (",' echo "