Comment personnaliser les pages produits de WooCommerce

Qu'est-ce qu'une page produit WooCommerce ?

Installation sur un site WordPress Plugin WooCommerceIl crée alors immédiatement une page de boutique où tous les produits peuvent être répertoriés. Si le visiteur clique sur un article du catalogue, il sera dirigé vers la page produit correspondante. La présentation de cette page dépendra fortement du thème, mais elle contiendra des informations de base sur le produit. 

Image [1] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Le tableau de bord de WordPress est accessible en accédant à la rubriqueDans l'onglet "Produits", localisez votre produit et sélectionnez"Édition de produits"pour ajouter ou modifier ces informations. Vous pouvez également cliquer sur "Ajouter un nouveauProduits" pour créer de nouveaux produits.

Ajoutez d'abord le titre du produit etDescription du produit. Sur le côté droit, vous pouvez joindre des images de produits.

Image [2] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Si vous faites défiler l'écran jusqu'àDonnées sur le produitVous verrez que vous pouvez créer des produits simples, des produits groupés, des produits variables ou des produits à valeur ajoutée.Produits subsidiaires. Ici, les paramètres d'expédition, les attributs, les produits liés (pour la vente croisée), etc. peuvent également être configurés.

Image [3] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Sur cette page, il est également possible de sélectionner une catégorie pour un produit et d'ajouter des étiquettes. Ces fonctionnalités permettent aux clients de parcourir plus facilement le catalogue de produits. 

Après avoir terminé la configuration du produit, cliquez sur"RenouvellementBouton. La page produit par défaut est présentée ci-dessous :

Image [4] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Comme vous pouvez le voir ci-dessus, cette page produit WooCommerce contient les fonctionnalités de base pour la vente de produits en ligne. Il est important de noter que le modèle que vous voyez sur le front-end du site est le même pour tous les produits.

Trois façons de personnaliser les pages produits de WooCommerce

Voyons maintenant trois façons de personnaliser vos pages produits WooCommerce !

1. utiliser l'éditeur de site

La beauté de WordPress réside dans le fait que ses fonctionnalités natives sont parfaites pour les débutants. Avec l'aide deRédacteur du siteCréez de magnifiques pages de produits personnalisées dans WooCommerce sans avoir à savoir comment écrire du code.

En utilisant l'éditeur de site, vous pouvez personnaliser la boutique en ligne à l'aide de blocs.WooCommerceDisposer de son propre jeu de blocsIl s'agit notamment de la possibilité d'afficher leFiltre, Barre de recherche, Meilleures ventesÉléments de etc.

L'éditeur de site fonctionne de la même manière que l'outiléditeur de blocsTrès similaire. Mais ce dernier est utilisé pourpage webrépondre en chantantArticles de blogmais (pas)Rédacteur du sitepossibleÉléments globaux personnalisésPar exempleEn-tête et pied de pagerépondre en chantant Modèles de pages de produits WooCommerce

prenez note: ne peut être utilisé que dans les thèmes de blocsRédacteur du site. Si vous utilisez le thème Classic, vous devrez vous référer à ce guide pour l'utilisation de l'interface utilisateur.La troisième méthode.

En outre, le contenu de chaque page de produit n'est accessible qu'en se rendant sur la page d'accueil du site Web de la Commission."Produit".et ouvrez le projet dans l'éditeur backend pour le modifier (comme indiqué précédemment). Ce que nous voulons faire, c'est personnaliser les composants de la page et les styles de la page produit de WooCommerce.

Premièrement, rendez-vous à l'adresse suivanteApparence → Éditeurpuis cliquez surmodèle.

Image [5] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Faites défiler vers le bas jusqu'àWooCommerceet sélectionnezProduit uniqueModèle.

Image [6] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Cliquez ensuite sur l'icône du crayon pour ouvrir le modèle dans l'éditeur.

Image [7] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Tout d'abord, vous pouvez constater que le modèle est gris.

Image [8] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Cliquez sur la zone du modèle et vous serez invité à convertir le modèle en bloc. Cliquez sur l'icône"Convertir en blocs"pour continuer.

Image [9] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Les pages produits de WooCommerce peuvent désormais être éditées à l'aide de blocs.

Image [10] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Si vous ne connaissez pas Blocs WordPresspeut-êtreRédacteur du siteIl existe plusieurs façons utiles de modifier cette page :

Modifier la mise en page

Pour ajuster la mise en page.Cliquez sur le bloc le plus grand et sélectionnez le bloc parent.

Image [11] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Le menu horizontal doit alors afficher des flèches permettant de déplacer cette partie de la page vers la gauche ou la droite.

Image [12] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Il est également possible de déplacer des blocs ou des groupes de blocs vers le haut et vers le bas.

Image [13] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

En outre, pour ajouter un bloc, il suffit de survoler la zone où vous souhaitez l'insérer et de cliquer sur le boutonsigne plus + (math.).

Image [14] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Si vous souhaitez modifier la mise en page, il est préférable d'ajouter des blocs de colonnes ou des groupes.

Il est également possible d'apporter des modifications globales à un modèle de présentation en le sélectionnant, puis en ouvrant les paramètres du bloc.

Image [15] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

existentouverture (jargon des échecs)En dessous, vous pouvez choisir de modifier l'alignement et la position du dessin. Il est même possible de le convertir en "collant"Il ne disparaît donc pas lorsque le visiteur fait défiler la page vers le bas. Cela signifie qu'il ne disparaît pas lorsque le visiteur fait défiler la page.

Si vous êtes satisfait des modifications, cliquez sur le haut de l'écran.Bouton "Enregistrer".

Modifier les couleurs et les polices

Sur la page du produitPolices de caractères personnaliséeset les couleurs, vous pouvez vous assurer que la conception est cohérente avec l'image de marque. 

Pour modifier les couleurs dans l'éditeur de site, sélectionnez l'élément à modifier et ouvrez-le sur le côté droit.réglage du bloc.

Image [16] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Les éléments qui peuvent être modifiés dépendent du bloc, mais il est généralement possible de modifier les couleurs du texte, de l'arrière-plan et des liens.

Par défaut, il est possible de choisir parmi les couleurs par défaut du thème.

Image [17] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Si vous cliquez sur "Aucune couleur sélectionnée"de la région aura un sélecteur de couleurs.

Image [18] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Ici, la couleur peut être sélectionnée en faisant glisser la souris. Si une couleur peu contrastée est sélectionnée, l'icôneRédacteur du site webIl y aura même des indices.

Image [19] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Il est également possible de saisir des codes de couleur HEX, HSL ou RVB spécifiques. C'est la meilleure option car elle correspond exactement à la couleur de l'entreprise.

existent"Options "Compositionvous pouvez modifier la taille du texte (petite, moyenne, grande, etc.).

Pour accéder à d'autres paramètres de police, cliquez sur "Typographie".Trois points l'un à côté de l'autre.

Image [20] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

De nombreuses options sont disponibles ici. Il suffit de cliquer pour les sélectionner et les ajouter à la liste des options.typographiqueLe menu.

Image [21] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Si vous ne souhaitez pas utiliser ces paramètres, vous pouvez toujours les désélectionner.

Ajouter un nouveau bloc

Vous souhaitez ajouter des éléments à vos pages de produits ? L'éditeur de site le permet.

Par exemple, lors d'une promotion sur l'ensemble du site, vous pouvez ajouter une bannière en haut du modèle.

Image [22] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Ou, si l'on veut faireUne navigation plus facile pour les clientsVous pouvez ajouter un bloc de recherche à la page.

Image [23] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Créer plusieurs types de pages produits

Comme vous pouvez le voir ci-dessus, il y a plusieurs façons de personnaliser le modèle de page de produit WooCommerce dans l'éditeur de site. Les modifications apportées seront répercutées sur toutes les pages de produits WooCommerce.

En tant que détaillant, vous devez créer des modèles uniques pour des types ou des catégories de produits spécifiques. Exemple :

  • Publication d'un nouveau produitCréation d'une page produit unique pour un nouveau produit à venir.
  • Promotions des fêtes de fin d'annéeCréation d'une page de vente pour une catégorie de produits pendant la période des fêtes de fin d'année : Créer une page de vente pour une catégorie de produits pendant la période des fêtes.

La page est ainsi plus pertinente et plus attrayante.

Pour créer plusieurs modèles à des fins différentes, allez dans la sectionApparence → Éditeur → Modèles. Ensuite, cliquez sur le signe plus pour ajouter un nouveau modèle et sélectionnez l'optionÉléments individuels : produits.

Image [24] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Cela permet de créer un nouveau modèle de page produit, mais uniquement pour un seul produit. Sélectionnez le produit souhaité dans le menu pour lancer l'éditeur de site.

Image [25] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Par défaut, le système demande un schéma préexistant. Il est préférable d'opter pour un modèle de page produit générique.

Image [26] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

L'utilisation de modèles préexistants peut accélérer le processus de conception. Toutefois, cette étape peut être omise si l'on part de zéro.

Maintenant, si vous revenez à lmodèleet cliquez à nouveau sur le signe plus pour ajouter un nouveau modèle, vous verrez une sélection de modèles.la catégorie (product_cat) duOptions.

Image [27] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Le modèle s'applique à une catégorie spécifique telle que les accessoires, les vêtements ou la décoration. 

Il vous suffit de sélectionner votre catégorie et de commencer à construire le modèle. Étapes avec "Articles individuels : produits"Les options sont les mêmes.

2. utiliser l'extension WooCommerce

En utilisant le thème bloc, l'éditeur du site est en mesure de personnaliser les modèles de pages de produits WooCommerce de différentes manières sans avoir à toucher à une seule ligne de code. 

Cependant, il ne permet pas d'étendre les fonctionnalités de la page. Heureusement, il existe de nombreuses extensions WooCommerce qui peuvent aider à réaliser cela, même pour les débutants sans compétences techniques. 

Dans cette section, nous présentons quelques outils qui permettent de modifier les pages de produits à l'aide de la nouvelle fonctionnalité. Par souci de commodité, nous avons divisé ces extensions en trois cas d'utilisation :Créer des produits avancés, optimiser les pages produits de WooCommercerépondre en chantantAugmenter les ventes.

Création de produits avancés

Si une boutique en ligne WooCommerce propose des produits personnalisés ou des variantes de produits premium, une extension WooCommerce est nécessaire pour faciliter la vente de ces articles. Ci-dessous, nous l'examinons ensemble.

Variantes de produits avancées

Image [28] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

WooCommerce peut créer des produits variables par défaut, mais les paramètres de ces articles peuvent être un peu limités. 

Si un grand nombre de styles, de couleurs ou de tailles de produits différents sont proposés, envisagez d'utiliser la rubriqueVariantes de produits avancéesExtension. Cette extension permet d'afficher plus efficacement les variantes de produits afin que les clients puissent mieux comprendre les options qui leur sont proposées.

Par exemple, il est possible de définir des propriétés globales pour créer des échantillons de variantes. Ces échantillons peuvent afficher des couleurs, des images, des vidéos et des textes différents pour créer des présentations de produits efficaces. 

En outre, l'extension permet de personnaliser la bibliothèque de variantes et de créer des tableaux pour présenter clairement les options disponibles.

Concepteur de produits WooCommerce

Image [29] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Par exemple, pour les types de biens personnalisés, il est nécessaire deConcepteur de produits WooCommercedes outils comme celui-ci. Cette extension ajoute à la page "Produits personnalisés"Bouton.

Vos clients pourront ajouter des images, des cliparts, des formes et des modèles à vos produits. Ils peuvent même les ajouter à leur panier directement à partir de la page de conception. Le logiciel permet également de créer des fichiers imprimables, ce qui facilite la production d'articles personnalisés.

Produits composites

Produits composites et complémentaires

Produits compositesest une extension puissante, idéale pour les boutiques en ligne qui gèrent des commandes complexes. Elle aide les clients à configurer les produits contenant plusieurs pièces, ce qui simplifie le flux de travail et le rend aussi convivial que possible.

La beauté de Composite Products réside dans sa prise en charge intégrée des paquets de produits. Cela signifie que lorsque les clients créent leurs propres produits, ils peuvent choisir parmi tous les articles disponibles dans le catalogue.

Calculateur de prix pour WooCommerce

Image [30] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Certains produits personnalisés nécessitent plus de ressources, comme du tissu ou du bois supplémentaire. La création de pages produits pour ces produits peut s'avérer difficile d'un point de vue logistique si l'on ne dispose pas des outils adéquats.

La méthode traditionnelle de vente de ces produits consiste à contacter le client et à lui proposer un devis. Mais cela ralentit considérablement le processus de vente. En effet.Principales raisons pour lesquelles les acheteurs abandonnent leur panierLa première est qu'ils ne peuvent pas calculer le coût total d'une commande à l'avance.

C'estCalculateur de prix par formule étendu pour WooCommerceOù il est utile. Cet outil permet d'ajouter des champs avec des formules et des règles pour calculer le prix final d'un produit. Cela permet de prendre en compte des mesures uniques telles que la longueur, le volume, etc. 

WooCommerce Wholesale

Image [31] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Vendez vos articles en gros si vous avez un stock important.WooCommerceCommerce de grosL'extension fournit tout ce dont vous avez besoin pour commencer.

Il est possible de créer et de gérer plusieurs rôles d'utilisateurs en gros et de fixer des prix en fonction des rôles. Il est également doté d'un générateur de formulaires d'enregistrement par glisser-déposer permettant de créer des applications de vente en gros.

Il est également possible de cacher les produits et les prix de gros aux clients habituels. Vous pouvez même obtenir un tableau de bord de vente en gros qui affiche des rapports sur les ventes, les remboursements, les commandes et plus encore. De cette façon, il est possible de voir votreWooCommerce Commerce de grosComment cela se passe-t-il ?

Optimiser les pages produits

Possède les compétences nécessaires pour vendre le produitFonctionnalité minimalevitale. Mais si vous voulez créerPages de produits à fort taux de conversionqui peuvent ajouter de l'intérêt.

Voici quelques extensions qui peuvent aider à améliorer les pages produits de WooCommerce.

Images 360º pour WooCommerce

Image [32] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Lorsque les clients achètent de gros articles tels que des appareils électroménagers ou des meubles, ils peuvent souhaiter se rendre à l'adresse suivantepage de paiementRenseignez-vous au préalable sur le produit de la manière la plus détaillée possible. 

Si les spécifications détaillées des produits, les photos et les vidéos peuvent être d'une grande utilité, les images à 360° peuvent contribuer à donner vie aux produits. 

S'il y a le temps de prendre tous les anglesPhotographier des produits. Image 360º pour WooCommercepeut aider à créer cet effet visuel utile. Cette extension est très conviviale et réactive. 

Il comporte également des commandes de navigation et offre un mode plein écran pour que les clients puissent se faire une idée précise de ce que vous avez à offrir.

WooCommerce Single Page Checkout

Image [33] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Le processus de paiement long et compliqué est la principale raison pour laquelle les clients abandonnent leur panier.Un. Il est donc possible d'utiliserWooCommerce One Page Checkout Allez !Simplifier le processus.

Comme son nom l'indique, cette extension permet de créer des pages produits personnalisées qui guident directement les acheteurs vers l'achat. Ils peuvent ajouter ou retirer des articles de leur panier et effectuer le paiement sans attendre le chargement d'une nouvelle page.

Cet outil est parfait pour les sites web contenant peu de produits ou pour les pages d'atterrissage ciblées liées à des campagnes de marketing. 

WooCommerce Tag Manager

Image [34] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

bienLes descriptions de produits aident à augmenter les ventes. En outre.Optimisation des moteurs de recherche (SEO) basée sur les produitsElle est cruciale pour toute boutique de commerce électronique. Les descriptions de produits peuvent être utilisées comme une opportunité organique d'intégrer des mots-clés et de rendre le site web plus performant dans les résultats de recherche.

Augmenter les ventes de produits 

Voici maintenant quelques outils pour aider à augmenter les ventes de WooCommerce en utilisant des méthodes de marketing traditionnelles et plus subtiles.

Promotional Flash Pro

Image [35] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Créer un sentiment d'urgenceCela permet d'augmenter les conversions. Une méthode courante consiste à proposer une offre limitée dans le temps.

Vente Flash ProAjoutez cette fonctionnalité aux pages produit de WooCommerce et offrez un moyen personnalisable de mettre en évidence ces ventes sur votre site : notamment en affichant le prix d'origine par rapport au prix de vente pour rendre l'article plus attrayant.

Liste de souhaits WooCommerce

prendre un rendez-vousAcheteurs en ligne pour 40%ont déclaré que les détaillants offriraient une meilleure expérience aux utilisateurs s'ils proposaient des listes de souhaits. Compte tenu de ce pourcentage élevé, toutes les boutiques en ligne devraient ajouter cette fonctionnalité à leur liste de priorités.

WooCommerce WishlistsOffrez à vos clients un contrôle total de la confidentialité et la possibilité de créer un nombre illimité de listes de souhaits. Ils n'ont pas à se soucier de s'inscrire sur le site car ils peuvent s'inscrire en tant queidentité de l'invitéConservez leur liste de souhaits.

Recommandation de produit

Image [36] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Si vous souhaitez augmenter votre chiffre d'affaires global, les stratégies de vente incitative et de vente croisée recommandant des produits connexes constituent l'un des moyens les plus efficaces d'y parvenir.

utiliserRecommandation de produitqui peut automatiquement fournir des suggestions intelligentes aux clients. Par exemple, l'outil peut montrer des produits connexes dans la même catégorie ou des articles qui sont souvent achetés ensemble.

Il peut générer automatiquement des recommandations basées sur l'historique de navigation récent d'un acheteur. Des rapports utiles peuvent également vous aider à déterminer les produits les plusStratégies d'orientation efficaces.

Compléments de produits

Image [37] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Les compléments de produits sontAugmentation des ventes à l'exportationUne autre méthode astucieuse. Elle est utile pour les petites boutiques ou les magasins en ligne qui peuvent offrir un degré élevé de personnalisation des commandes.

offrescomplémentLes extensions peuvent vous aider à le faire en quelques étapes simples. Des menus déroulants, des zones de texte, des cases à cocher, des exemples d'images, etc. peuvent être utilisés pour intégrer ces modules complémentaires. 

Grâce à cet outil, les compléments de produits peuvent être appliqués globalement ou à des produits individuels. En outre, l'extension est compatible avec d'autres outils populaires, tels que l'outilAbonnements WooCommercerépondre en chantantWooCommerce Bookings.

paquet de produits

Image [38] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Tant que vous avez un petit nombre d'articles dans le catalogue de votre boutique, il est possible de les obtenir à partir de la rubriqueProposer des offres groupées de produitsdans WooCommerce. Bien que WooCommerce ne fournisse pas cette fonctionnalité par défaut, vous pouvez utiliser l'optionEnsembles de produitspour l'obtenir.

Cet outil peut regrouper des produits WooCommerce simples et variables. Il peut même recommander des produits optionnels et offrir des remises sur le volume. En outre, il est possible de personnaliser l'apparence des offres groupées et des produits groupés.

Il convient également de noter que l'extension est compatible avec les biens physiques et virtuels. Elle peut être utilisée pourprogramme en lignerépondre en chantantAbonnements et autres produits.

3. utilisation de codes personnalisés

Il est également possible de modifier la page produit à l'aide d'un code personnalisé. Si vous utilisez le codeThème par défautIndisponibleRédacteur du siteCette méthode est particulièrement utile. 

prenez noteModifier directement les fichiers de thème d'un site web est un processus délicat. Sans expertise technique, vous risquez de vous retrouverDommages au site webet provoquer des temps d'arrêt. 

Dans cette optique, il convient de s'assurer qu'avant de procéder à l'opérationSauvegarder votre boutique WooCommerce. Il est préférable d'utiliser un site de démonstration pour expérimenter vos paramètres personnalisés. 

Ensuite, lorsque vous êtes prêt à faire entrer les changements en vigueur, vous pouvez utiliser la fonctionThèmes enfant de WordPress. Ainsi, les paramètres personnalisés ne sont pas perdus en cas de mise à jour du thème parent.

Vous pouvez maintenant utiliser certaines des méthodes suivantes pour modifier les pages produits de WooCommerce en utilisant un code personnalisé.

Utiliser des feuilles de style CSS personnalisées

Si vous souhaitez personnaliser le style d'une page produit WooCommerce à l'aide d'un code.CSSC'est le meilleur choix. Il permet de modifier les couleurs, les polices, les liens et bien d'autres choses encore. 

Il existe plusieurs façons d'y parvenir. Examinons-les.

Dans l'éditeur de site

Pour ajouter des feuilles de style CSS à vos pages de produits à l'aide de l'éditeur de site, accédez à l'ongletApparence → Éditeur → Styles → CSS supplémentaires.

Image [39] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Le code peut être placé dans leCSS supplémentaireBoîte.

Par exemple, si vous souhaitez modifier la couleur du titre d'un produit, vous pouvez utiliser la méthode suivanteExtrait de code :

h2.woocommerce-loop-product__title, .woocommerce div.product .product_title {

    colour : #ffffff.

    product_title { colour : #ffffff ; letter-spacing : 1px ;

    margin-bottom : 10px !important ;

}

Il suffit de remplacer "fffff" par votre code couleur préféré. 

Si vous souhaitez modifier la taille de la police, vous pouvez également utiliser la fonctionCet extrait de code CSS: :

.woocommerce div.product .product_title { font-size : 25px ; }

Veillez simplement à ce queposteIl vous suffit d'apporter vos modifications.

Bien entendu, il ne s'agit là que de quelques exemples simples, mais les possibilités sont infinies. Si vous souhaitez en savoir plus, vous pouvez consulter la pageDocumentation CSS de WordPress.

Dans le personnalisateur

Si votre thème ne prend pas en charge l'édition complète du site, le code CSS doit être ajouté au personnalisateur. Pour ce faire, rendez-vous surApparence → Personnalisation → CSS supplémentaires.

Image [40] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

La fonction CSS est la même que dans l'éditeur de site.

Dans votre sous-thèmestyle.cssPapiers

Le dernier endroit où vous pouvez ajouter des feuilles de style CSS dans WordPress est la sectionstyle.cssfichier. Là encore, l'utilisation de thèmes enfants est nécessaire pour s'assurer que les modifications ne sont pas perdues lors des mises à jour.

commutateur àApparence → Editeur de fichiers de thème.

Image [41] - Comment personnaliser les pages produits de WooCommerce - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Par défaut, il devrait sélectionner lestyle.csspapiers. Si ce n'est pas le cas, il suffit de cliquer sur le côté droit de l'écran dans la sectionPapier à thèmeIl suffit de le sélectionner dans le menu.

Les feuilles de style CSS peuvent ensuite être ajoutées au bas du fichier. Lorsque vous avez terminé, il vous suffit de le mettre à jour.

Utilisation de PHP

Le CSS est idéal pour modifier l'apparence de WordPress, mais il n'ajoute aucune fonctionnalité aux pages de produits de WooCommerce. 

Pour effectuer cette opération manuellement avec du code, vous devez utiliser PHP, qui peut être ajouté à la sectionfichier functions.phpou utiliser l'outilExtraits de codeet d'autres plug-ins.

Image [42] - Comment personnaliser les pages produits de WooCommerce - Photon Flux Network | Professional WordPress Repair Service, Global Reach, Fast Response

Pour les utilisateurs expérimentés de WordPress, essayez l'une des options suivantes :

Crochets WooCommerce (actions et filtres)

Pour les utilisateurs qui préfèrent modifier manuellement les éléments de WooCommerce, vous pouvez utiliser la fonctionCrochets WooCommerceCes extraits de code PHP sont capables d'exécuter la commande Ces extraits de code PHP sont capables d'exécuter la commande "gréement"et"Filtre (machine)" pour modifier la page produit de WooCommerce.

Voici un exemple d'opération utile :

/**

 * : : Autoriser les shortcodes dans les extraits de produits

 */

if (!function_exists('woocommerce_template_single_excerpt')) {

   function woocommerce_template_single_excerpt( $post ) {

      global $post ;

       if ($post-&gt;post_excerpt) echo '<div itemprop="description">' . do_shortcode(wpautop(wptexturize($post-&gt;post_excerpt))) . '</div>';

   }

}

Lors de la mise en œuvre de ce crochet, il est possible de définir le paramètreCodes courts à ajouter à vos extraits de produits

En même temps, si l'on veutAfficher le lien d'archive des attributs du produitL'extrait de code suivant peut être utilisé :

/**

 * : : Afficher les liens d'archives des attributs de produits

 */

add_action( 'woocommerce_product_meta_end', 'wc_show_attribute_links' ) ;

// si vous souhaitez l'afficher sur la page d'archive, remplacez "woocommerce_product_meta_end" par "woocommerce_shop_loop_item_title"

function wc_show_attribute_links() {

global $post ;

$attribute_names = array( '<attribute_name>', '<another_attribute_name>' ) ; // Ajoutez les noms d'attributs ici et n'oubliez pas d'ajouter le préfixe pa_ au nom de l'attribut.

foreach ( $attribute_names as $attribute_name ) {

$taxonomy = get_taxonomy( $attribute_name ) ; }

if ( $taxonomy &amp;&amp; ! is_wp_error( $taxonomy ) ) {

$terms = wp_get_post_terms( $post-&gt;ID, $attribute_name ) ;

$terms_array = array() ;

        si ( ! empty( $terms ) ) {

        foreach ( $terms as $term ) {

      $archive_link = get_term_link( $term-&gt;slug, $attribute_name ) ;

      $full_line = '<a href="/fr/' . $archive_link . '/">'. $term-&gt;nom . '</a>' ;

      array_push( $terms_array, $full_line ) ;

        }

        echo $taxonomy-&gt;labels-&gt;name . ' : ' . implode( ', ' . $terms_array ) ; .

        }

     }

    }

}

Les crochets de WooCommerce fournissent également un certain nombre de fonctions utiles.Fonction de filtrage pour éditer les données des produits. Par exemple, l'extrait de code suivant peut être utilisé pour réorganiser les étiquettes de produits :

/**

 * : : Réorganiser les onglets de données produit

 */

add_filter('woocommerce_product_tabs', 'woo_reorder_tabs', 98 ) ;

function woo_reorder_tabs( $tabs ) {

$tabs['reviews']['priority'] = 5 ; // Reviews first

$tabs['description']['priority'] = 10 ; // Description second

$tabs['additional_information']['priority'] = 15 ; // Informations supplémentaires troisièmement

return $tabs ;

}

Il est également possible d'ajouter des onglets personnalisés :

/**

 * : : Ajouter un onglet de données produit personnalisé

 */

add_filter('woocommerce_product_tabs', 'woo_new_product_tab' ) ;

function woo_new_product_tab( $tabs ) {

// Ajoute le nouvel onglet

$tabs['test_tab'] = array(

'title' =&gt; __('New Product Tab', 'woocommerce' ),

'priorité' =&gt; 50,

'callback' =&gt; 'woo_new_product_tab_content'

) ;

return $tabs.

}

function woo_new_product_tab_content() {

// Le contenu du nouvel onglet

echo '<h2>Onglet Nouveau produit</h2>' ;

echo '<p>Voici votre nouvel onglet produit.</p>';

}

Modèles de page globaux

Une autre option pour utiliser le code PHP de WooCommerce est de partir de zéro !Créer des modèles de pages produits personnalisés à l'échelle mondiale.garder à l'espritCette méthode ne s'applique pas aux thèmes de blocs.

Tout d'abord, le nouveau fichier doit être nommétemplate-produit-personnalisé.phpet écrivez un commentaire PHP ouvert en haut de la page en indiquant le nom du modèle :

<?php /* Nom du modèle : Exemple de modèle */ ? /* Nom du modèle : Exemple de modèle */ ?

Dans ce cas, vous pouvez utiliser "Modèles globaux de pages produits personnalisées"peut-êtreContenu similaireRemplacer"Exemples de modèles".

Ce modèle imite la page produit par défaut de WooCommerce. Il peut ensuite être modifié selon les besoins à l'aide de crochets web.

Augmenter les ventes avec les pages produits personnalisées de WooCommerce

La personnalisation des pages produits de WooCommerce peut vous aider à présenter vos produits de manière efficace. Vous pouvez également offrir plus d'options à vos clients et créer une expérience unique qui plaira à votre public. Comme indiqué ci-dessus, il existe plusieurs façons de modifier cette page.

Si un thème en bloc est disponible, l'apparence du modèle global peut être modifiée à l'aide de l'éditeur de site. Pour ajouter plus de fonctionnalités, vous pouvez installer l'extension WooCommerce. Pour les utilisateurs expérimentés de WordPress, vous pouvez utiliser CSS ou PHP, mais soyez prudent avec ce processus.


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
Service clientèle WeChat
Tel : 020-2206-9892
QQ咨询:1025174874
(iii) Courriel : info@361sale.com
Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.
© Déclaration de reproduction
Cet article a été rédigé par Harry
LA FIN
Si vous l'aimez, soutenez-le.
félicitations0 partager (joies, avantages, privilèges, etc.) avec les autres
commentaires achat de canapé

Veuillez vous connecter pour poster un commentaire

    Pas de commentaires