Lorsqu'il s'agit de créer une boutique en ligne, WooCommerce est le plugin incontournable. Il est ridiculement simple de créer une boutique en ligne et de commencer à vendre vos produits dès que vous avez terminé. Avada fournit une assistance complète et une intégration de conception pour WooCommerce, vous permettant de créer la boutique de vos rêves tout en garantissant qu'elle correspond exactement au cadre que vous avez en tête.
Avada vise à vous donner la possibilité de personnaliser l'apparence de votre site Web, ce qui n'est pas différent avec l'intégration de WooCommerce. Grâce à notre populaire réseau d'options avancées, vous pouvez choisir parmi une large gamme de personnalisations pour une variété de possibilités de conception, notamment :
- WooCommerce possède son propre panneau d'options globales Avada, distinct du panneau d'options globales Avada principal.
- Les options de page Avada sont disponibles pour chaque produit.
- Avada Builder vous permet de créer des conceptions de pages de produits en faisant glisser et en déposant des éléments.
Pour créer votre site de commerce électronique avec Avada.
Tout d’abord, nous devons installer wooCommerce dans Avada.
- Installation de WooCommerce – Instructions étape par étape
- Comment attribuer une page de boutique à votre site Web
- Création de vos produits
- Création d'un effet de zoom du produit
- Ajustement des paramètres de taille de l'image du produit dans WooCommerce.
Installation de WooCommerce – Instructions étape par étape
Accédez à Avada > Plugin /Add-ons et recherchez le plugin , comme indiqué dans la capture d'écran ci-dessous.
Étape 1 – Installez le plugin .
Étape 2 – Sélectionnez « Installer » dans le menu déroulant.
Le plugin sera installé et activé automatiquement.
Étape 3 – Après cela, l'assistant de configuration de WooCommerce devrait s'afficher. Si vous importez l'une de nos démos Woo, comme Modern Shop ou Classic Shop, vous pouvez ignorer cette étape sans risquer de perdre vos données. Pour avancer, sélectionnez « Pas maintenant » dans le menu déroulant. Si vous n'importez pas l'une de nos démos Woo, passez à l'étape suivante en cliquant sur le bouton « Allons-y ! » bouton pour commencer le processus de configuration.
Étape 4 – Suivez les invites et les instructions à l'écran pour terminer le processus et saisir les informations nécessaires sur votre magasin. En cliquant sur le bouton « Créez votre premier produit » lorsque vous avez terminé, vous pourrez procéder à la création de votre premier produit. Vous pouvez également revenir à votre tableau de bord WordPress en cliquant sur le lien situé sous la fenêtre de configuration.
Comment attribuer une page de boutique à votre site Web
Dans le cadre du processus d'installation normal de WooCommerce, l'assistant de configuration doit être lancé, vous permettant de configurer votre boutique et d'attribuer les pages de votre boutique aux clients. Plus d'informations sur les pages créées par l'assistant d'installation peuvent être trouvées dans ce document WooCommerce.
Alternativement, si l'assistant de configuration n'apparaît pas ou si vous l'annulez pour une raison quelconque, vous pouvez toujours revenir à l'assistant de configuration en sélectionnant Assistant de configuration dans le menu Aide de n'importe quelle page WooCommerce, qui se trouve en haut à gauche de la page. fenêtre.
Vous pouvez définir manuellement la page de la boutique en accédant à l'onglet Produits dans les paramètres WooCommerce – WooCommerce > Paramètres > Produits – et en sélectionnant la page qui sera la page principale de la boutique dans le menu déroulant. WooCommerce affichera alors vos produits sur cette page suite à votre action.
Les pages restantes peuvent être configurées dans l'onglet Avancé, disponible dans WooCommerce > Paramètres > Avancé .
Création de vos produits
Étape 1 – Dans la barre latérale de votre administrateur WordPress, accédez à l'onglet Produits > Ajouter un produit.
Étape 2 – En haut de la page, saisissez le nom de votre produit.
Étape 3 – Remplissez le champ de contenu de la publication avec le texte de la description du produit. Toutes les informations sur le produit seront affichées dans cette section.
Étape 4 – Remplissez la case « Données sur le produit » avec toutes les informations sur le produit. Par exemple amp le prix, le SKU et l’expédition sont toutes des options possibles.
Étape 5 – Dans la case « Description courte du produit », saisissez une description succincte de votre produit qui apparaîtra à côté de vos images principales.
Étape 6 – L'image principale présentée doit être placée sous la case « Image du produit » sur le côté droit de la page ; Ceci doit être complété pour chaque produit.
Étape 7 – Ajoutez plus d'images à la case « Galerie de produits » si vous souhaitez utiliser une galerie d'images au lieu d'une seule image.
Étape 8 – Dans la case « Catégories de produits », entrez les catégories qui s'appliquent à vos produits. Ensuite, remplissez les espaces avec les balises appropriées pour votre produit dans la case « Balises du produit ».
Étape 9 – Une fois que vous avez saisi toutes les informations nécessaires, cliquez sur le bouton « Publier » et l'article apparaîtra sur la page principale de votre boutique.
Création d'un effet de zoom du produit
Si vous utilisez Avada Layouts, vous devez vous assurer que l'option Zoom sur les images de produits WooCommerce est activée dans Avada > Options > WooCommerce > Général WooCommerce > Option Zoom sur les images de produits WooCommerce , ou dans l'onglet Général de l'élément Images de produits WooCommerce > Images du produit Zoomez si vous utilisez les mises en page WooCommerce.
Largeur des images de produits WooCommerce – La largeur de votre image principale (voir le paramètre ci-dessous) et la taille réelle de l'image téléchargée devront toutes deux être plus grandes que le paramètre Avada > Options > WooCommerce > WooCommerce général > Largeur des images de produits WooCommerce ou le paramètre Largeur maximale des images de produits. dans l’élément Woo Product Images. La largeur de la colonne du conteneur pour une seule galerie de produits sera déterminée par les paramètres que vous choisissez. Une fois que vous aurez effectué les ajustements nécessaires, vous serez prêt à définir la largeur de votre image principale WooCommerce.
Largeur de l'image principale WordPress – Le paramètre de largeur de l'image principale WooCommerce se trouve dans le personnalisateur de votre site Web WordPress. Depuis le tableau de bord WordPress, accédez à Apparence > Personnaliser > WooCommerce > Images de produits , où vous trouverez le paramètre Largeur de l'image principale ; Cela déterminera la taille réelle de l’image affichée dans la galerie.
Plus votre effet de zoom sera détaillé, plus la taille d'image que vous avez définie pour votre image est grande. Pour clarifier, si la taille de l'image dans les paramètres WooCommerce correspond à la largeur de l'image dans les options globales d'Avada, aucun zoom ne sera visible lorsque la souris survole l'image sur la page. De plus, la taille de l'image réelle que vous téléchargez doit être identique ou supérieure au paramètre Largeur de l'image principale sur la conception de votre site Web.
Assurez-vous de régénérer vos vignettes après avoir modifié la taille des images WooCommerce ; Cela appliquera vos nouvelles tailles d’image à toutes les images déjà téléchargées sur votre site Web. Vous pouvez utiliser le plugin Regenerate Thumbnails pour y parvenir.
Ajustement des paramètres de taille de l'image du produit dans WooCommerce.
WooCommerce inclut des options pour ajuster la taille des images de produits dans les sections Catalogue et Images de produit unique du magasin. De plus, il existe des paramètres Avada spécifiques qui fonctionnent en conjonction avec les tailles d'image utilisées par votre boutique WooCommerce. Lors de la configuration de ces paramètres de taille d'image, il est important de se rappeler que les paramètres des options globales d'Avada doivent également être pris en compte. Nous reviendrons sur chacune de ces options plus en détail plus tard.
Supposons que les images que vous téléchargez pour vos produits soient plus petites à la source que les tailles d'image spécifiées dans vos paramètres WooCommerce. Dans ce cas, vous remarquerez peut-être des différences de présentation visuelle sur le front-end des pages de votre boutique ; Ce n’est en aucun cas un bug. C'est simplement parce que vos images étaient trop petites pour que les paramètres de WooCommerce les impactent. Vous pouvez considérer ces paramètres comme la largeur et la hauteur maximales de vos images en termes de dimensions d'image. Tout ce qui tombe en dessous de la limite spécifiée ne sera pas redimensionné.
Lors de la configuration de votre boutique, assurez-vous que les paramètres de taille d'image WooCommerce et la taille réelle de vos images sont pris en compte. En résumé, vos images doivent être de la même taille ou plus grandes que les paramètres de taille d'image de votre boutique WooCommerce.
Toute modification apportée aux paramètres de taille d'image vous obligera à régénérer vos miniatures pour qu'elles prennent effet sur les images déjà téléchargées sur votre site. Par conséquent, l’utilisation du plugin Regenerate Thumbnails est fortement recommandée. De plus, la taille des images peut être ajustée en suivant les étapes ci-dessous :
Étape 1 – Dans votre barre latérale d'administration, accédez à l'onglet « Apparence », puis à l'onglet « Personnaliser » pour commencer à personnaliser votre site.
Étape 2 – Accédez à l'onglet « WooCommerce » en haut de la page.
Étape 3 – Le paramètre Images pour les images de produit unique se trouve sous l'onglet « Images de produit » de la fenêtre de configuration.
Étape 4 – Lorsque vous téléchargez des images sur vos pages de produits uniques, sélectionnez l'option de largeur d'image principale. La largeur des vignettes est la largeur des vignettes de vos produits dans le catalogue. Remplissez les espaces avec la valeur de largeur souhaitée.
Étape 5 – Pour régénérer les vignettes après avoir modifié la taille des images et les avoir enregistrées, vous devrez utiliser le plugin , qui se trouve dans la Plugin . plugin Regenerate Thumbnails , puis accédez à l’ WP Admin > Outils , où vous pouvez choisir de régénérer les vignettes de vos images, en créant les nouvelles tailles d’image.
