Comment personnaliser la page de la boutique WooCommerce (commande et produit) ?

Pouvez-vous reprocher à WooCommerce l’absence d’options avancées pour personnaliser la boutique, le produit ou la page de paiement ? Bien sûr, vous ne devriez pas. En fait, il est préférable d'ajouter plus de personnalisation avec des plugins, également avec des extensions gratuites pour WooCommerce .

Table des matières

• Personnalisation de la page de la boutique WooCommerce
• Personnaliser les produits WooCommerce
• Concevez la page de paiement avec des champs personnalisés

Personnalisation de la page de la boutique WooCommerce

En bref, la configuration et l'ajustement de la page de la boutique dans WooCommerce se clôtureront en ces 4 étapes :

Comment personnaliser la page boutique ?

1. Choisissez la page

   Pour afficher la page de la boutique, il faut l'avoir. Il peut s'agir d'une page existante ou d'une nouvelle.

   

2. Personnaliser les options du catalogue de produits

   La page produit peut être conçue dans le menu Apparence → Personnaliser → WooCommerce → Catalogue de produits .

   

3. Ajouter la page au menu ou aux widgets

   WooCommerce permet d'afficher le lien vers le catalogue de produits dans le menu ou/et les widgets ( Apparence → Menus/ Widgets ).

   

4. Personnalisation du catalogue produits

   Y a-t-il plus d'options pour ajuster la page ?

   Oui. Par exemple, le style CSS, l'ajout de contenu, de codes courts, de redirections ou de code personnalisé.

   Ainsi, la mise en page standard peut être améliorée avec de nouvelles sections ou éléments.

   

   

Personnaliser les produits WooCommerce

La partie évidente de l’utilisation de WooCommerce consiste à ajouter de nouveaux produits. Par défaut, il est possible d'utiliser des attributs et des variantes. Les attributs seront visibles dans les informations complémentaires (selon le thème).

Bien sûr, des variantes peuvent aider (elles utilisent également des attributs) :

Mais pour créer des produits avec des options et des champs personnalisés plus personnalisables, WooCommerce seul ne suffira pas.

Comme je l'ai mentionné dans l'introduction, il existe des éléments de base pour étendre les capacités de WooCommerce, appelés plugins. Et il existe un plugin gratuit pour ajouter des champs personnalisés et personnaliser la page produit WooCommerce.

Comment personnaliser la page produit WooCommerce avec le plugin ?

Après avoir téléchargé, installé et activé l'extension, il sera possible d'ajuster les pages produits en quelques étapes.

1. Ajouter des groupes de champs pour des produits spécifiques

   Tout d'abord, il est possible de sélectionner un ou plusieurs produits pour de nouveaux champs (visibles dans la capture d'écran ci-dessous).

2. Choisissez l'emplacement du terrain

   De plus, le plugin permet d'afficher les nouvelles options de produits avant ou après le bouton Ajouter au panier.

   

3. Ajustez la page produit WooCommerce avec des champs personnalisés

   La fonctionnalité principale du plugin est d'ajouter de nouveaux champs. Dans la version gratuite de Flexible Product Fields, il existe 18 types de champs.

   

   Chaque champ a ses paramètres, par exemple des étiquettes, des espaces réservés, des info-bulles, des classes CSS, un nombre maximum de caractères, etc. Le champ peut être obligatoire ou facultatif.

   

4. Personnalisation de la page produit WooCommerce – exemple

   L'effet final pour un ou plusieurs produits (avec un plugin gratuit).

   

   

Comme vous pouvez le constater, il est possible de personnaliser les pages produits WooCommerce avec un plugin gratuit. Vous pouvez le télécharger ou en savoir plus dans le référentiel WordPress.

Pour résumer, le plugin Flexible Product Fields permet de créer des produits personnalisés dans WooCommerce.

Concevez la page de paiement avec des champs personnalisés

De plus, WP Desk dispose également d'un plugin gratuit pour personnaliser la page de paiement WooCommerce.

Les champs de paiement flexibles permettent de gérer le champ existant ainsi que d'ajouter de nouveaux champs personnalisés à la page de paiement.

Guide rapide de personnalisation de la page de paiement WooCommerce

(après avoir installé et activé le plugin)

1. Le formulaire de paiement par défaut

   La page de paiement standard (classique) contient des champs prédéfinis.

   

2. Ajuster le formulaire

   En supprimant ou en ajoutant de nouveaux champs, il est possible de personnaliser la page de paiement WooCommerce.

   

3. Réorganiser et gérer les champs de paiement

   L'éditeur visuel de page de paiement permet la personnalisation rapide du formulaire. Le plugin gratuit prend en charge plus de 10 champs personnalisés.

   

4. Moins de champs lors du paiement

   Jetez un œil à l'effet final - une forme plus simple.

   

Résumé

Il existe plusieurs façons de personnaliser WooCommerce, notamment en ajustant la page de la boutique, les pages de produits et le formulaire de paiement. Avec les plugins gratuits, il n’est pas nécessaire d’écrire du code personnalisé.