2 façons efficaces de personnaliser les pages de produits woocommerce (en utilisant CSS et plug – INS)

Woocommerce est un bon plugin wordpress pour créer facilement des boutiques en ligne. C’est pourquoi la plupart des propriétaires de petites boutiques en ligne utilisent le plug – in pour créer leurs propres sites de commerce électronique. Mais il y a un problème: la plupart des sites de démarrage ont la même conception. Par conséquent, en tant que commerçant, vous voudrez peut – être personnaliser les pages de produits individuelles par défaut pour différencier votre site de celui de vos concurrents. Mais comment personnaliser la page produits woocommerce? Il existe deux façons recommandées de personnaliser les pages de produits woocommerce. Nous pouvons utiliser d’autres css pour effectuer des changements de base ou créer des modèles de page de produit personnalisés à partir de zéro.
Deux façons de personnaliser les pages de produits woocommerce la plupart des nouveaux acteurs de l’industrie du commerce électronique utilisent les pages de produits par défaut woocommerce. Comme la plupart d’entre eux sont débutants, ils ne savent pas comment personnaliser les pages de produits woocommerce. Ça n’a pas d’importance si tu ne le sais pas non plus. Si vous êtes un développeur ou si vous avez des connaissances de base, vous pouvez facilement apporter des changements de base en utilisant d’autres CSS. Cependant, si vous ne voulez pas écrire de code, vous pouvez également utiliser des plug – ins tels que productx Gutenberg woomerce block.
De ces deux façons, vous pouvez choisir celle qui vous convient le mieux. Personnaliser votre page de produits woocommerce en utilisant des CSS supplémentaires selon les messages affichés sur le site Web officiel de woocommerce, nous pouvons utiliser l’extension pro appelée Product Addons ou personnaliser la page de produits en utilisant des CSS supplémentaires. Par conséquent, dans ce billet de blog, je voudrais énumérer les autres CSS qui ont été salués sur le site officiel de woocommerce et comment nous les utilisons sur notre site. Cependant, WordPress a aussi quelques options de personnalisation que vous pouvez explorer avec PE
Sonate thématique.
Voici comment ajouter CSS au site Web woocommerce. Connectez – vous et allez à l’avant du site. Cliquez sur Personnaliser. Allez à l’option CSS supplémentaire. Ici, vous pouvez ajouter css pour apporter les modifications nécessaires aux pages de produits individuelles. Consultez la liste des CSS les plus couramment utilisés par woocommerce. 1. Changez la taille de police du titre du produit vous pouvez utiliser le code suivant pour changer la taille du titre du produit. Par exemple, changez 36px en 50px ou tout ce que vous voulez. Ensuite, ajoutez le code à la boîte CSS ci – jointe et cliquez sur le bouton publier.

. Produits de la Division woocomberce. Produit _ title {taille de police: 36px;}

2. Changer la couleur du titre du produit pour changer la couleur du titre du produit, le code suivant peut être utilisé avec le Code de couleur requis. Ainsi, la couleur du titre du produit est remplacée par la couleur souhaitée.

. Produits de la Division woocomberce. Nom du produit {couleur: # ff5733;}

3. Étiquette de variante en gras si vous avez un produit de variante dans votre magasin woocommerce, vous pouvez utiliser le code suivant pour ajouter le texte de l’étiquette de variante en gras.

. Woocommerce Department product form. Wagons de marchandises Étiquette de variante {font Weight: bold;}

4. Étiquette des variantes en italique pour le style, utilisez le code suivant pour ajouter le style en italique au texte de l’étiquette des variantes.

. Woocommerce Department product form. Wagons de marchandises Étiquette des variantes {style de police: italique;}

5. Changez la couleur de fond du bouton \
Et les produits woocommerce, productx, sont votre solution parfaite. Fournit un plug – in unique woocommerce Builder pour créer des modèles personnalisés pour les magasins, les archives et les pages de produits individuelles.
Vous pouvez créer des modèles pour des pages de produits spécifiques ou pour toutes les pages individuelles. De cette façon, le modèle personnalisé est remplacé par le modèle woocommerce par défaut. Pour créer un modèle personnalisé, effectuez les étapes suivantes. Étape 1: installez d’abord le plug – in productx vous devez installer la version gratuite et la version pro du plug – in productx. Comme l’ajout de woocommerce Builder est une fonctionnalité pro, vous devez également installer une version gratuite pour utiliser la version pro. Installez la version gratuite: la version gratuite de productx se trouve dans le répertoire WordPress. Pour installer ce plug – in:
Cliquez sur le bouton Ajouter un nouveau dans la section plug – in. Trouvez productx. Cliquez sur le bouton installer. Une fois l’installation terminée, cliquez sur le bouton activer. Une fois activé avec succès, il est prêt à être utilisé. Avec la version gratuite, vous pouvez créer une page d’accueil personnalisée en utilisant des paquets de démarrage, des filtres de produits, des mises en page et beaucoup d’autres fonctionnalités. Installer la version pro: Si vous souhaitez profiter pleinement du plug – in productx, il est recommandé d’installer la version pro avec la version gratuite. La version pro offre plusieurs kits de démarrage préfabriqués, une liste de souhaits woocommerce, des comparaisons de produits, woocommerce Builder, et plus encore.
Au départ, vous devez acheter le plug – in et télécharger le fichier plug – in. Pour l’installer, effectuez les étapes suivantes: – cliquez sur le bouton Ajouter un nouveau dans la section plug – in. Cliquez sur télécharger le plug – in. Téléchargez le fichier plug – in téléchargé. Installez et activez le plug – in. Étape 2: activez woocommerce Builder pour créer une page de produits woocommerce personnalisée que vous pouvez ajouter en utilisant productx woocommerce Builder. Qu
Indi, vous devez activer le plug – in pour commencer à l’utiliser.

Allez à la section tous les ajouts. Cliquez sur constructeur add – in. Lorsque l’add – in est activé, il y a une section générateur et d’autres options productx.
Étape 3: créer un nouveau modèle maintenant, nous devons créer et personnaliser un modèle de page de produit woocommerce à partir de zéro. À cette fin:

Allez à la section constructeurs. Cliquez sur le bouton Ajouter un nouveau. Nommez le modèle. Sélectionnez les conditions du modèle (une ou toutes les pages du produit). Cliquez sur Enregistrer et démarrer le modèle personnalisé. Maintenant, Personnalisez le modèle de page de produit woocommerce pour chaque page de produit en utilisant 13 nouveaux blocs de produit élaborés. Étape 4: ajouter et personnaliser des morceaux de chapelure au début, nous pouvons ajouter des morceaux de chapelure et informer les visiteurs de l’emplacement actuel de la page. Pour ajouter ce bloc, vous devez cliquer sur l’icône plus et sélectionner le bloc de chapelure du produit.

Étape 6: ajouter et personnaliser des blocs d’image vous pouvez maintenant ajouter des blocs d’image à gauche de la colonne. Permet l’affichage dynamique des images de premier plan et des images de galerie.

Après avoir ajouté des blocs, nous pouvons également faire quelques changements en utilisant les options disponibles: Sélectionnez le texte en vol stationnaire, les liens et les couleurs requises pour les liens. Sélectionnez une police personnalisée dans le contrôle typographique. Redimensionnez le séparateur et sélectionnez sa couleur. Étape 5: ajouter et personnaliser des blocs de colonne Gutenberg si vous voulez afficher l’image et les détails du produit côte à côte, vous devez utiliser des blocs de colonne. Parce que je veux, je vais cliquer sur l’icône plus et ajouter un bloc de colonne à l’échelle 50 \/ 50.

Après avoir ajouté un bloc d’image, vous pouvez utiliser les options suivantes pour jouer: afficher ou masquer l’image de la bibliothèque. Afficher ou masquer
Les flèches. Personnaliser les icônes. Personnaliser l’emplacement de la bibliothèque. Étape 7: ajouter et personnaliser des blocs de notation de produit si vous voulez permettre aux visiteurs de voir et de fournir des notations de produit, vous pouvez utiliser des blocs de notation de produit. Pour ajouter ce bloc, localisez – le et cliquez sur l’icône plus pour ajouter le bloc. Le bloc d’évaluation du produit comprend les options suivantes: Sélectionnez la taille souhaitée. Sélectionnez l’alignement désiré. Sélectionnez la couleur des étoiles. Sélectionnez la couleur de fond de l’étoile. Étape 8: ajouter et personnaliser un bloc de titre de produit après l’évaluation du produit, vous devez ajouter un bloc de titre de produit. Localisez et cliquez sur l’icône plus pour ajouter un défilement de produit. Par conséquent, le titre du produit est affiché dynamiquement sur la barre de défilement. Voici les options personnalisées: Sélectionnez la taille souhaitée. Sélectionnez l’alignement désiré. Sélectionnez une couleur spécifique. Utilisez le typographe pour changer le style de police. Étape 9: ajouter et personnaliser un bloc de brève description si vous avez écrit une description de capture pour une page de produit, vous devez ajouter ce bloc au modèle de page de produit. De cette façon, toutes les pages de produits présenteront une brève description personnalisée. Utilisez les options suivantes pour personnaliser le bloc: Sélectionnez un alignement. Sélectionnez la couleur souhaitée. Composition personnalisée. Étape 10: ajouter et personnaliser des blocs de prix de produits il s’agit de l’un des blocs les plus importants. Vous pouvez ajouter ce bloc à un modèle de page de produit individuel pour afficher les prix des produits aux acheteurs potentiels. Ensuite, localisez et cliquez sur l’icône plus pour ajouter le bloc. Le verrouillage des prix des produits a les options personnalisées suivantes:
Le quartier. Afficher ou masquer les badges de réduction. Personnaliser la composition du prix de vente. Sélectionnez la taille souhaitée. Sélectionnez la couleur souhaitée. Étape 11: ajouter et personnaliser un bloc d’inventaire de produits ajouter ce bloc pour afficher la quantité de produits disponibles pour l’achat. Vous pouvez ajouter ce bloc n’importe où, mais la pratique courante est de l’ajouter avant le bouton Ajouter au panier. Voici des options personnalisées pour empêcher l’alignement de sélectionner l’inventaire des produits. Sélection des couleurs. Vérification typographique. Étape 12: ajouter et personnaliser des produits ajouter des produits au panier ajouter des produits au panier aider les visiteurs à ajouter les produits dont ils ont besoin au panier pour les acheter. Vous pouvez l’ajouter à l’emplacement désiré et le personnaliser comme n’importe quel autre bloc. Voici des options personnalisées pour afficher ou masquer le nombre de produits. Afficher ou masquer la liste des comparaisons de produits et des souhaits. Sélectionnez ajouter une couleur au panier. Sélectionnez la couleur du nombre. Étape 13: ajouter et personnaliser des métablocs de produits lorsque vous ajoutez ce bloc à un modèle de produit individuel, les SKU de produits, les catégories et les étiquettes sont automatiquement ajoutés aux pages de produits. Voici les options personnalisées pour ce bloc: afficher ou masquer les SKU, les catégories et les étiquettes. Sélectionnez la couleur du métatitre. Vérification typographique. Étape 14: ajouter et personnaliser des onglets produits les onglets produits sont une combinaison de trois blocs (description du produit, renseignements supplémentaires et commentaires) qui contiennent différentes informations sur les produits woocommerce. Voici les options personnalisées: afficher ou masquer n’importe quel onglet. Vérification typographique. Pendant le vol stationnaire, sélectionnez une couleur pour le texte, l’arrière – plan et l’arrière – plan. Étape 15: ajouter et personnaliser des produits connexes, puis ajouter des ventes
Comme nous créons des modèles pour les pages de produits individuelles, nous pouvons également ajouter des produits connexes et des ventes supplémentaires. Cela donne aux acheteurs potentiels plus de choix et, en tant que propriétaire, vous pouvez augmenter la valeur moyenne de la commande. Ajouter des produits connexes: ajouter des blocs de grille de produits. Changez le titre du bloc en produit associé. Utilisez la fonction de requête rapide pour trier les produits connexes. Ajouter un produit de vente: ajouter un bloc de grille de produit. Changez le titre du bloc pour ajouter un produit de vente. Utilisez la fonction de requête rapide pour trier les produits en tant que produits de vente supplémentaires. Après avoir personnalisé le modèle, nous devons l’enregistrer \/ le mettre à jour et vérifier son apparence à l’avant. Optimisation de la page lorsque nous personnalisons une page de produit individuelle, parce que nous voulons personnaliser la page de produit woocommerce, nous devrions également nous concentrer sur l’optimisation du référencement sur la page. Après tout, tous les propriétaires de magasins en ligne veulent augmenter les ventes de leurs produits. C’est pourquoi nous devons personnaliser la page produits woocommerce. Mais pour la même raison, nous devons également augmenter le trafic biologique des magasins en ligne. Voici quelques conseils importants pour optimiser les pages afin d’augmenter le trafic organique. Recherche par mot – clé: pour toute entreprise en ligne, la recherche par mot – clé est la plus importante. Si vous pouvez trouver des mots – clés moins compétitifs pour les pages de produits, vous pouvez facilement augmenter le trafic organique. Ensuite, effectuez une recherche par mot – clé appropriée et sélectionnez le meilleur mot – clé qui peut être classé avec les permissions de domaine actuelles du site. Optimiser le titre du produit et la métadescription: après avoir sélectionné les meilleurs mots clés, vous devez les saisir correctement dans le titre du produit dans la métadescription. So C
La page produits de votre magasin peut être positionnée plus haut sur le serp. De plus, l’accent est mis sur l’optimisation des titres et des méta – descriptions afin d’augmenter le nombre de clics. Publier des commentaires sur les produits: permettre aux utilisateurs de visualiser et d’afficher vos produits sur la page des produits augmente la confiance des nouveaux visiteurs dans votre magasin. N’oubliez pas que tous les visiteurs des magasins en ligne sont des acheteurs potentiels. Par conséquent, s’ils peuvent voir et ajouter des commentaires sur la page produits, cela renforcera leur confiance dans l’achat de produits. Rendre votre site accessible à un plus grand nombre de visiteurs: Nous devons permettre aux visiteurs de visiter notre site aussi longtemps que possible. Ainsi, vous pouvez réduire la fréquence de rebond et augmenter le temps de séjour. Parce que ce sont quelques – uns des facteurs de classement les plus importants. Parce que nous pouvons ajouter des produits connexes et augmenter les ventes tout en créant des pages de produits personnalisées, les visiteurs passeront plus de temps sur notre site pour explorer plus de produits. Conclusion il s’agit de personnaliser la page des produits woocommerce. Commencez à personnaliser la page du produit à partir du magasin en ligne en utilisant le bloc productx Gutenberg woocommerce. Si vous avez d’autres questions au sujet de la page personnaliser les produits woocommerce, n’hésitez pas à nous faire part de vos commentaires. Ça t’aide? C’est ça?