Articles

WooCommerce Docs

WooCommerce Customizer fait partie de WordPress > Customize et permet de sélectionner des options qui s’appliquent à l’ensemble du site pour l’avis de la boutique, le catalogue des produits et les images des produits sans toucher au code.

Où trouver WooCommerce Customizer Retour en haut

Depuis le tableau de bord de WordPress, allez dans : Apparence > Personnaliser.

Dans le menu Personnaliser, sélectionnez WooCommerce:

Sous WooCommerce se trouvent cinq options :

  • Avis du magasin
  • Catalogue de produits
  • Page de produits
  • Images de produits
  • Checkout
Options under WooCommerce in the Customizer

Chacune est couverte en détail ci-dessous.

Avis de magasin Retour en haut de page

Avis de magasin vous permet de saisir un message à l’échelle du site affiché à toutes les personnes qui visitent votre magasin. Le message peut être :

  • Informatif – Une note qui informe les clients des retards d’expédition dus aux conditions météorologiques. Un avis d' » absence  » si vous êtes en vacances.
  • Promotionnel – Une note annonçant un événement, une offre spéciale pour les fêtes, un forfait, une vente sur tous/ou certains articles ou une livraison gratuite.

Afficher un avis de magasin Retour au début

Pour afficher aux clients un avis de magasin à l’échelle du site :

1/ Allez à : Apparence > Personnaliser > WooCommerce > Avis de magasin:

Display a Store Notice from the Customizer in the WooCommerce section

2/ Saisissez un message dans la zone de texte.

3/ Cochez la case pour Activer l’avis du magasin.

4/ Prévisualisez l’aspect de l’avis du magasin sur votre site/magasin.

5/ Publier lorsque vous êtes satisfait et prêt à mettre en ligne votre avis de magasin.

Ce que les visiteurs voient Retour en haut

C’est la façon dont l’avis de magasin s’affiche sur la partie avant de votre magasin/site. Les visiteurs peuvent choisir de rejeter l’avis après l’avoir vu une fois.

*L’emplacement et l’apparence de l’avis de magasin varient, selon le thème que vous utilisez. La capture d’écran ci-dessus est avec notre thème gratuit Storefront.

Modifier ou supprimer un avis de magasin Retour au début

Pour modifier ou arrêter l’affichage d’un avis de magasin à l’échelle du site :

1/ Allez à : Apparence > Personnaliser > WooCommerce > Avis de magasin:

Display a Store Notice from the Customizer in the WooCommerce section

2/ Pour modifier l’avis de magasin:

  • Modifiez le message dans la zone de texte pour le modifier.
  • Décochez la case pour Activer l’avis du magasin pour ne plus l’afficher aux visiteurs.

3/ Publier pour enregistrer les modifications.

Planifier un avis de magasin Retour au début

L’utilisation de l’option Planifier pour l’avis de magasin peut être utile lorsqu’on exécute une promotion pour une durée limitée ou qu’on met fin à une vente/remise à minuit à une date spécifique.

Dans cet exemple, nous voulons mettre fin à l’offre d’expédition gratuite lorsqu’elle expire en fin de journée le 28 février.

1/ Allez dans Apparence > Personnaliser > WooCommerce > Avis de magasin pour afficher et accéder à la promotion actuelle/publiée.

2/ Décochez la case pour Activer l’avis de magasin.

3/ Sélectionnez la roue dentée. Un panneau s’ouvre.

4/ Sélectionnez Schedule dans le menu de droite, puis saisissez la date et l’heure auxquelles vous souhaitez que la modification prenne effet.

5/ Sélectionnez Schedule pour effectuer les modifications que vous avez saisies à la date et à l’heure futures indiquées.

*Vous devez désactiver les remises sur les ventes, les codes de coupon ou les offres à durée limitée. La suppression de l’avis n’arrête pas automatiquement l’exécution de la promotion.

Catalogue de produits Retour au début

Toutes les options du catalogue de produits se trouvent à : Apparence > Personnaliser > WooCommerce >Catalogue de produits.

Product Catalog under WooCommerce in the Customizer

Le catalogue de produits vous permet de choisir :

  • Ce qu’il faut afficher sur la page de la boutique
  • Ce qu’il faut afficher sur les pages des catégories
  • Comment trier les produits d’une catégorie
  • Combien de produits afficher sur une seule rangée
  • Combien de rangées de produits afficher sur une page

Page de la boutique Retour en haut

Votre page de boutique peut afficher des produits, des catégories, ou les deux. Nous vous recommandons d’en sélectionner un pour un look propre.

1/ Sélectionnez les produits ou les catégories dans la liste déroulante.

2/ Prévisualisez votre sélection en direct. Vous devez afficher la page de la boutique.

3/ Publier pour enregistrer et mettre en ligne.

Pages de catégories Retour en haut

Vos pages de catégories peuvent afficher des produits ou des sous-catégories dans une catégorie, ou les deux. Il est recommandé de n’en sélectionner qu’un seul.

Si vous n’avez que quelques produits, ou si vous n’avez pas de sous-catégories, il se peut qu’il n’y ait pas de différence d’apparence.

1/ Sélectionnez Produits ou Sous-catégories dans la liste déroulante.

2/ Prévisualisez votre sélection en direct. Vous devez afficher une page de catégorie.

3/ Publier pour enregistrer et mettre en direct.

Tri des produits par défaut Retour au début

Le tri des produits par défaut vous permet de contrôler l’ordre dans lequel les produits sont affichés, ce qui influence la façon dont les produits sont affichés par défaut sur les pages de la boutique et de la catégorie. Les visiteurs ont toujours la possibilité de trier le produit d’une manière différente, s’ils le souhaitent.

Tri par défaut (ordre personnalisé + nom) – afficher les produits par ordre alphabétique par nom. Lorsque l’ordre de tri des produits a été personnalisé, cet ordre personnalisé est considéré en premier, et l’ordre alphabétique par nom en second (si les produits partagent les mêmes positions d’ordre). Dans votre boutique, le client verra ceci comme Tri par défaut.

Tri par popularité (ventes) – affiche les produits en fonction des quantités vendues, du plus au moins. Les clients voient Trier par popularité.

Tri par Note moyenne – affiche les produits en fonction de la note moyenne des avis, de la plus élevée à la plus faible.

Tri par le plus récent – affiche les produits dans l’ordre où ils ont été ajoutés à la boutique, du plus récent au plus ancien. Le client voit Trier par le plus récent.

Trier par prix (asc / desc) – trier le produit par prix soit du plus bas au plus haut (asc) ou du plus haut au plus bas (desc). Le client voit soit Trier par prix : du plus bas au plus haut, soit Trier par prix : du plus haut au plus bas.

Dans cet exemple, nous avons choisi Trier par prix (asc) (Trier par prix : du plus bas au plus haut, indiqué par un ✔), et le client est sur le point de sélectionner pour Trier par nouveauté.

Pour choisir un ordre de tri par défaut:

1/ Sélectionnez une option dans la liste déroulante:

2/ Prévisualisez votre sélection en direct. Vous pouvez visualiser la page de la boutique ou une page de catégorie.

3/ Publier pour enregistrer et mettre en direct.

Produits par rangée Retour au début

Les produits par rangée vous permettent de choisir le nombre d’articles qui apparaissent dans une seule rangée sur les pages de la boutique et de la catégorie.

Soyez sensible à :

  • La taille d’une image de produit
  • L’espace sur un ordinateur/portable, une tablette ou un appareil mobile
  • L’expérience optimale pour un client qui consulte et achète vos produits

1/ Utilisez les flèches pour augmenter/diminuer le nombre de produits.

2/ Prévisualisez votre sélection en direct. Vous pouvez visualiser la page de la boutique ou une page de catégorie.

3/ Testez sur différents appareils. Voici un exemple de différentes vues, utilisant les mêmes paramètres.

  • Sur un écran d’ordinateur/portable
  • Sur une tablette
  • Sur un appareil mobile

*L’échelle de la taille et de l’apparence de l’image variera, en fonction du thème que vous utilisez. Les captures d’écran ci-dessus sont avec notre thème gratuit Storefront.

4/ Publier pour enregistrer et mettre en ligne.

Lignes par page Retour en haut

Les lignes par page vous permettent de choisir le nombre de lignes qui apparaissent sur les pages de la boutique et de la catégorie.

Soyez sensible à :

  • La taille des images de produits
  • Le nombre de produits que vous vendez
  • L’espace sur un ordinateur/portable, une tablette ou un appareil mobile
  • L’expérience optimale pour un client qui regarde et achète vos produits

1/ Utilisez les flèches pour augmenter/diminuer le nombre de rangées.

2/ Prévisualisez votre sélection en direct. Vous pouvez visualiser la page de la boutique ou une page de catégorie.

3/ Testez sur différents appareils. Voici un exemple de différentes vues, utilisant les mêmes paramètres.

  • Sur un écran d’ordinateur/portable
  • Sur une tablette
  • Sur un appareil mobile

*L’échelle de la taille et de l’apparence de l’image variera, en fonction du thème que vous utilisez. Les captures d’écran ci-dessus sont avec notre thème gratuit Storefront.

4/ Publier pour enregistrer et mettre en ligne.

Page de produit Retour en haut

La page de produit a deux options qui s’appliquent aux pages de produits uniques :

  • Sticky Add-to-Cart – C’est une petite barre de contenu en haut de la fenêtre du navigateur qui comprend des informations pertinentes sur le produit et un bouton d’ajout au panier. Elle se glisse dans la vue une fois que le bouton d’ajout au panier standard a défilé hors de vue.
An example of what the Sticky Add-to-Cart content bar looks like with Storefront theme active.
  • Pagination des produits – Affiche les liens suivants et précédents sur les pages de produits. Une vignette de produit est affichée avec le titre révélé au survol.

Images de produits Retour au début

Les images de produits ont deux fonctionnalités :

  • Vous permet de sélectionner la façon dont les images du catalogue et des vignettes sont dimensionnées et recadrées
  • Redimensionne automatiquement les images du catalogue et des vignettes à l’échelle du site sur votre boutique lorsqu’un changement de publication est effectué*

Ceci vous permet d’économiser du temps et de l’énergie en recadrant et redimensionnant manuellement chacune d’entre elles.

Types d’images Retour en haut de page

  • Les images de catalogue sont des images de taille moyenne qui apparaissent sur la page de la boutique, les pages de catégories et pour les produits connexes, les ventes incitatives et les ventes croisées.
  • Les images miniatures sont les plus petites images utilisées dans le panier, les widgets et les images de galerie (facultatives) sous l’image de produit unique sur les pages de détails des produits individuels.
  • L’image de produit unique est la plus grande image et se réfère à l’image principale / vedette. Les paramètres des images de produits dans WooCommerce Customizer ne s’appliquent pas à celles-ci. Pour ajouter, modifier ou supprimer l’image de produit unique ou la galerie d’images de produits, consultez : Ajout d’images et de galeries de produits.

* Auparavant, les vignettes devaient être régénérées à l’aide d’un plugin tiers. WooCommerce 3.3x gère désormais cette opération pour vous. La régénération ne sera pas déclenchée pour les modifications effectuées uniquement en mode Aperçu.

Redimensionner et recadrer les images des vignettes Retour au début

1/ Allez à : Apparence > Personnaliser > WooCommerce > Images de produits.

2/ Sélectionnez-en un:

  • 1:1 – Image carrée
  • Personnalisé – Vous sélectionnez le rapport dans lequel les images sont recadrées. Dans cet exemple, le rapport 1:2 est saisi ; et une image ne peut pas être agrandie pour répondre à cette exigence.
  • Non recadrées – Les images apparaissent telles quelles, ce qui peut faire qu’elles soient toutes différentes, à moins que vous n’ayez utilisé des photos de taille et de résolution uniformes. La capture d’écran ci-dessous en est un exemple : L’une est parfaitement carrée, la suivante est un carré plus petit et la dernière est un rectangle.

3/ Test sur différents appareils. Voici un exemple de différentes vues, utilisant les mêmes paramètres.

  • Sur un écran d’ordinateur/portable
  • Sur une tablette.
  • Sur un appareil mobile.

4/ Publier pour enregistrer et mettre en ligne.

Checkout Retour au début

Toutes les options pour le checkout se trouvent à : Apparence > Personnaliser > WooCommerce > Checkout.

Vous pouvez désormais définir si certains champs sont obligatoires ou facultatifs en fonction des données que vous souhaitez collecter. Vous pouvez également choisir de mettre en évidence les champs obligatoires par un astérisque, ce qui est le cas par défaut.

Il est recommandé de créer des pages de politique de confidentialité et de conditions générales, puis vous pouvez les définir ici. Les pages définies sont liées avec le texte que vous saisissez et apparaissent sur la page de commande comme ceci:

Le lien « politique de confidentialité » ouvre la page dans une nouvelle fenêtre, tandis que le lien « conditions générales » ouvre une boîte sur la page montrant le contenu de la page des conditions générales. Une commande ne peut pas être passée sans cocher la case des conditions requises.

FAQs Retour au début

Je ne trouve pas WooCommerce Customizer. Retour en haut

Les magasins utilisant WooCommerce 3.3x+ ont cette option disponible à : Apparence > Personnaliser > WooCommerce. Les magasins utilisant une version de WooCommerce antérieure à 3.3.0 verront l’avis de magasin et les images de produits à l’adresse suivante : WooCommerce > Paramètres > Produits > Section d’affichage ; Le catalogue de produits est nouveau.

Nous vous recommandons de mettre à jour la dernière version de WooCommerce pour profiter des caractéristiques et fonctionnalités nouvelles et améliorées. Merci!

Puis-je encore utiliser le plugin Regenerate Thumbnails ? Retour en haut de page

Oui, vous pouvez. Mais c’est inutile si vous utilisez WooCommerce 3.3.0 ou supérieur, car un changement vers un nouveau ou différent eux, ou tout changement en direct dans le catalogue de produits ou les images de produits, déclenche WooCommerce pour redimensionner et mettre à jour automatiquement les vignettes et les images du catalogue de produits pour vous.

Vous pouvez également utiliser l’option Régénérer les vignettes de la boutique à l’adresse : WooCommerce > Statut > Outils.

.