Lorsqu'il s'agit de créer une boutique en ligne, WooCommerce est le plugin . 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 ressemble exactement au cadre que vous avez en tête.
Avada consiste à 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 célèbre 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 principal panneau d'options globales Avada.
- 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éer vos produits
- Création d'un effet de zoom produit
- Ajustement des paramètres de taille de l'image du produit dans WooCommerce.
Installation de WooCommerce - Instructions étape par étape
Allez dans Avada > Plugin s / Add-ons et recherchez le plugin WooCommerce , comme indiqué dans la capture d'écran ci-dessous.
Étape 1 – Installez le plugin WooCommerce .
É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 aller de l'avant, 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 "Allons-y !" bouton pour commencer le processus de configuration.
Étape 4 - Suivez les invites et les instructions à l'écran pour terminer le processus et entrez les informations nécessaires sur votre magasin. En cliquant sur le bouton "Créer votre premier produit" lorsque vous avez terminé, vous pourrez procéder à la création de votre premier produit. Alternativement, vous pouvez 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 vos pages de boutique aux clients. Vous trouverez plus d'informations sur les pages créées par l'assistant de configuration 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 du la 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é, trouvé dans WooCommerce > Paramètres > Avancé .
Créer 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, entrez 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 Données produit » avec toutes les informations sur le produit. Par exemple , le prix, le SKU et l'expédition sont toutes des options possibles amp
Étape 5 – Dans la 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 en vedette doit être placée sous la Image produit » sur le côté droit de la page ; Celle-ci doit être complétée pour chaque produit.
Étape 7 – Ajoutez plus d'images dans la Galerie produits » si vous souhaitez utiliser une galerie d'images au lieu d'une seule image.
Étape 8 – Dans la Catégories produits », entrez les catégories qui s'appliquent à vos produits. Ensuite, remplissez les blancs avec les balises appropriées pour votre produit dans la Étiquettes 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 vitrine.
Création d'un effet de zoom produit
Si vous utilisez Avada Layouts, vous devez vous assurer que l'option WooCommerce Product Images Zoom est activée dans Avada > Options > WooCommerce > General WooCommerce > WooCommerce Product Images Zoom option , ou dans l'onglet Woo Product Images Element General > Zoom sur les images de produits si vous utilisez des 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 supérieures à Avada> Options> WooCommerce> Général WooCommerce> 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 de conteneur pour une seule galerie de produits sera déterminée par les paramètres que vous choisissez. Une fois que vous avez effectué les ajustements nécessaires, vous serez prêt à définir la largeur de votre image principale WooCommerce.
image principale de WordPress – Le paramètre Largeur de l'image principale de 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 sera 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 survolera l'image sur la page. De plus, la taille de l'image réelle que vous téléchargez doit être la même ou plus grande que le 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é les tailles d'image WooCommerce ; Cela appliquera vos nouvelles tailles d'image à toutes les images qui ont déjà été téléchargées sur votre site Web. Vous pouvez utiliser le plugin Regenerate Thumbnails pour accomplir cela.
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 d'un seul produit du magasin. De plus, il existe des paramètres Avada spécifiques qui fonctionnent conjointement 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 plus en détail sur chacune de ces options 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 écarts de mise en page visuelle sur le front-end de vos pages de 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 de vos paramètres de taille d'image vous obligera à régénérer vos vignettes pour qu'elles prennent effet sur les images qui ont déjà été 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 produit
É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 correspond à la largeur des vignettes de vos produits dans le catalogue. Remplissez les blancs 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 vos vignettes d'image, en créant les nouvelles tailles d'image.
