Comment ajouter des balises personnalisées aux pages produits de WooCommerce (en utilisant Elementor)

Ajouter à la page produit de WooCommerceÉtiquettes personnaliséesElles peuvent vous aider à mieux présenter les informations sur les produits et à améliorer l'expérience de l'utilisateur. Ces balises peuvent être utilisées pour fournir des descriptions supplémentaires, des avis d'utilisateurs, des spécifications ou d'autres informations clés. Avec le plugin Elementor, il est facile de personnaliser ces balises sans écrire de code. Cet article vous explique étape par étape comment ajouter des balises personnalisées à vos pages produit WooCommerce à l'aide d'Elementor.

Étape 1 : Installer et activer les plug-ins nécessaires

Tout d'abord, vous devez vous assurer que les plugins suivants sont installés :

• WooCommerce: Plugin de fonctionnalité de base pour le commerce électronique.
• Elementor Pro: RequismontageVersion Propour la personnalisation des pages à l'aide de widgets liés à WooCommerce.
• Gestionnaire d'onglets WooCommerce(Facultatif) : facilite la gestion des onglets dans les pages produits de WooCommerce.

Étape 2 : Créer ou modifier WooCommerceoffrespage web

1. Aller à la page du produitDans le backend de WordPress, naviguez jusqu'à l'ongletoffres > Tous les produitsSélectionnez ensuite le produit que vous souhaitez modifier et cliquez surcompilateurBouton.

2. Modifier avec ElementorDans la page d'édition du produit, cliquez surModifier avec Elementorpour accéder à l'éditeur Elementor.

Étape 3 : Ajouter des onglets personnalisés

1. Ajouter une structure d'onglets de produits: :
   • Dans l'éditeur Elementor, cliquez surAjouter un nouveau conteneursélectionner un numéro de téléphone approprié.colonnesMise en page.
   • En utilisant la fonctionOngletsFaites-le glisser et déposez-le dans la section que vous venez de créer. Le widget Onglets ajoutera automatiquement quelques exemples d'onglets.

2. Modifier le contenu des onglets: :
   • Cliquez sur la zone de titre de chaque onglet pour modifier le titre de l'onglet, par exemple "Description", "Modèle", "FAQ", etc.
   • Cliquez sur la zone de contenu de l'onglet pour ajouter librementTexte, images, listeset plus encore, en tirant pleinement parti du riche ensemble de widgets d'Elementor pour personnaliser le contenu de chaque onglet.

Étape 4 : Ajouter un contenu dynamique WooCommerce à chaque onglet

Elementor peut convertirContenu dynamique de WooCommerceAjouter aux onglets. Par exemple, afficher des informations de description de produit générées dynamiquement sous l'onglet Description.

1. Insérer des données dynamiquesCliquez sur le widget dans n'importe quelle zone de contenu et sélectionnez le menu de gauche.Icônes d'étiquettes dynamiques. Sélectionnez ensuite le contenu dynamique lié à WooCommerce dans le menu déroulant, par exempleDescription du produitetTitre du produitpeut-êtreCommentaires sur les produits.

2. Conception et personnalisationLe réglage de l'élémentaire peut également être effectué en modifiant les paramètres de l'élémentaire.Styles, espacements, polices, couleursetc. pour personnaliser l'apparence de chaque onglet. Veillez à ce que le design des onglets soit cohérent avec le style général du site.

Étape 5 : Sauvegarde et prévisualisation

Une fois que vous avez fini d'ajouter et de personnaliser les onglets, cliquez en bas de la page sur le boutonmettre à jourpour enregistrer les modifications. La page du produit peut alors être visualisée pour s'assurer que tous les onglets s'affichent correctement et que le contenu se charge correctement.

Étape facultative : Utilisation du gestionnaire d'onglets de WooCommerce

Si vous souhaitez disposer de fonctions de gestion des onglets plus robustes, envisagez d'utiliser l'optionGestionnaire d'onglets WooCommercePlugin. Ce plugin peut :

• Ajouter des onglets personnalisés globaux qui s'appliquent automatiquement à toutes les pages de produits.
• Les onglets peuvent être réorganisés par simple glisser-déposer.
• Configurez des présentations d'onglets différentes pour des produits différents.

Étape 6 : Optimiser l'expérience de l'utilisateur

Pour que les utilisateurs puissent naviguer facilement dans les informations relatives à vos produits, il existe également des outils d'aide à la décision.Ongletspour ajouter des effets d'animation. Exemple :

• animation en fondu enchaîné: dans la page d'accueil d'Elementorniveau élevévous pouvez ajouter des effets de fondu à l'entrée et à la sortie des onglets pour rendre le passage d'une page à l'autre plus fluide.

• conception réactiveOnglets : Vérifiez l'affichage de vos onglets sur les appareils mobiles afin de vous assurer qu'ils offrent une bonne expérience utilisateur sur tous les appareils.

résumés

faire passer (un projet de loi, une inspection, etc.)Elementorrépondre en chantantWooCommerceVous pouvez facilement ajouter des étiquettes personnalisées à vos pages de produits pour rendre les informations sur vos produits plus claires et mieux organisées.

Plug-ins recommandés: :

• Elementor ProLe site web de l'entreprise : un ensemble d'outils pour la conception de pages de produits.
• Gestionnaire d'onglets WooCommerce(Optionnel) : Un outil de gestion des onglets plus avancé pour les marchands ayant plusieurs produits.

Suivez les étapes de cet article pour ajouter des étiquettes de produits personnalisées à votre boutique WooCommerce et personnaliser chaque étiquette avec du contenu et un design selon vos besoins.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : [email protected]
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.