Aujourd'hui, Woocommerce a pris d'assaut l'industrie du commerce électronique grâce à sa flexibilité révolutionnaire et ses options de personnalisation. Dans le monde du commerce électronique, il occupe une place importante. À l’heure actuelle, il détient 27 % des parts de marché du commerce électronique .
Mais les modèles et pages de produits prédéfinis ne répondent pas aux besoins de toutes les entreprises. Il existe de nombreuses options de personnalisation dans WooCommerce.
Pour bien fonctionner, votre boutique doit suivre les meilleures pratiques de personnalisation. Un élément clé de la personnalisation réside dans les pages de produits et les modèles. Une stratégie de personnalisation bien mise en œuvre peut réduire les paniers abandonnés.
Étant donné que la plupart des clients visitent votre boutique en ligne, vous devez faciliter la navigation et la personnalisation des produits et des modèles pour garantir le succès.
Cet article vous montre comment personnaliser les modèles WooCommerce, modifier les modèles de produits et personnaliser les pages de produits.
Pourquoi est-il important pour les propriétaires de magasins de personnaliser les modèles WooCommerce ?
WooCommerce propose des tonnes d'options de personnalisation. Vous pouvez tout personnaliser, des pages de paiement aux pages de boutique, en passant par les pages de catégories, les pages de remerciement, etc. Cela aide votre boutique à se démarquer de la foule, mais pour être vraiment distinctive, la personnalisation des modèles WooCommerce peut aider.
Il est essentiel de modifier les pages par défaut de votre site pour avoir une apparence différente de celle de vos concurrents. Vous pouvez également personnaliser les modèles par défaut pour donner un avantage à votre entreprise.
Les modèles que vous utilisez peuvent être personnalisés pour ajouter des fonctionnalités et des détails à votre boutique en ligne. Grâce à ces fonctionnalités, vous pouvez offrir aux acheteurs une meilleure expérience client. Par conséquent, vous devez maintenir votre boutique de commerce électronique à jour en approfondissant l’édition du modèle WooCommerce. Lisez la suite pour découvrir les façons de modifier les modèles WooCommerce.
Lire : Comment mettre à jour ma carte de débit sur WooCommerce
Personnalisation des modèles WooCommerce avec PHP
Les plugins et les extraits de code vous permettent de modifier presque tous les aspects de votre site Web. En utilisant WooCommerce, vous pouvez modifier des modèles par programme.
Voici deux manières de personnaliser les modèles par programmation :
- Modèles d'écrasement
- Avec crochets
Les deux méthodes fonctionneront, alors choisissez celle qui vous convient le mieux. Vous devez comprendre les principales différences entre ces méthodes pour déterminer quand les utiliser.
Hooks et modèles d'écrasement
Avec les hooks, des modifications simples peuvent être apportées à l'aide d'actions et de filtres . En écrasant les fichiers modèles, vous pouvez effectuer des personnalisations plus complexes.
De plus, notez qu’il ne faut pas écraser un fichier modèle avec un hook s’il est utilisé dans un fichier modèle spécifique. L'écrasement du modèle entraînera le remplacement des hooks utilisés dans ce fichier et ne sera plus efficace.
Sélectionnez la méthode qui correspond à vos besoins après avoir déterminé vos besoins.
Explorer : Meilleurs plugins de table de produits WooCommerce
Modifier les modèles WooCommerce en les écrasant
Lorsque vous effectuez des personnalisations complexes, il est préférable d’écraser vos modèles plutôt que d’utiliser des hooks.
De même, l’édition de function.php est très similaire. Les fichiers de modèles WooCommerce principaux doivent être modifiés à la place des fichiers de thème.
Cliquez sur Plugins > Plugin Editor, choisissez WooCommerce dans le menu déroulant et choisissez des modèles pour voir les fichiers de modèles.
Cette section contient tous les fichiers principaux que vous devez modifier, à savoir archive-product.php, content-product-cat.php et content-product.php. Il est également possible de modifier les fichiers de modèles à plusieurs endroits, tels que le panier, le paiement et l'e-mail.
Les fichiers de modèles WooCommerce contiennent de nombreuses choses que vous pouvez modifier. Cela vous permet de personnaliser à la fois les sous-répertoires et les dossiers.
L'étape suivante consiste à voir les modèles WooCommerce personnalisés.
Ajoutez des codes courts aux modèles WooCommerce.
Les shortcodes sont un moyen courant de personnaliser le code WooCommerce. Pour éditer des modèles, WordPress et WooCommerce vous proposent un tas de shortcodes .
Vous trouverez ci-dessous un script qui affiche le tableau de bord WooCommerce Mon compte sur chaque page de produit. Ajoutez-le au fichier single-product.php et mettez-le à jour.
| if ( ! défini( 'ABSPATH' ) ) { exit; // Quitte en cas d'accès direct } get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content', 'produit unique' ); finir pendant ce temps; // fin de la boucle. do_action( 'woocommerce_sidebar' ); $t= ' Mon compte' ;$t.= do_shortcode("[woocommerce_my_account]"); $t.=” ”; écho $t; get_footer( 'boutique' ); |
Le tableau de bord apparaîtra après avoir prévisualisé les pages de produits.
Assurez-vous que le client sait qu'il a déjà acheté cet article
Les modèles WooCommerce peuvent également être modifiés pour offrir des réductions aux clients fidèles. Là encore, copiez et collez le code sur la page single-product.php.
| get_header( 'boutique' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content', 'produit unique' ); finir pendant ce temps; // fin de la boucle. $current_user = wp_get_current_user(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ) : echo ' ♥ Hé ' . $current_user->first_name . ', vous l'avez déjà acheté. Achetez à nouveau en utilisant ce coupon : PURCHASE_AGAIN_21 ' ;endif; get_footer( 'boutique' ); |
Les clients verront le message de paiement après avoir consulté un produit qu'ils ont déjà acheté.
Explorer : Magento contre. WooCommerce : quel est le meilleur choix en 2023 ?
Modification des modèles WooCommerce à l'aide de hooks
Les hooks sont également utiles pour personnaliser les modèles WooCommerce si l’écrasement des fichiers de modèles n’est pas votre truc. Vous pouvez ajouter des hooks sous forme d'actions ou de filtres à votre site Web pour augmenter rapidement ses fonctionnalités et apporter des modifications simples.
De plus, vous pouvez modifier les modèles de votre boutique via les hooks WooCommerce. Cette approche n’est recommandée que pour des personnalisations simples. Il est préférable d'écraser les modèles pour les modifications complexes.
Ouvrez votre fichier function.php dans Apparence > Editeur de thème et copiez et collez l'extrait de code avec votre action ou vos hooks de filtre.
Voici quelques exemples de hooks disponibles pour éditer des modèles WooCommerce.
Ajouter des informations à une seule image de produit
Si vous souhaitez afficher des informations supplémentaires sur le produit au-dessus de l'image, insérez le code suivant dans Functions.php.
| // Ajout d'une fonction personnalisée function quadlayers_before_single_product() { echo ' Tout est à 25 % de réduction pour cette semaine !';} // Ajoutez l'action add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 ); |
Sur les pages d'un seul produit, ce message apparaîtra.
Personnalisation du modèle WooCommerce avec des plugins
Vous avez des difficultés avec les aspects du codage ? Pas de problème. Vous pouvez toujours personnaliser les modèles WooCommerce avec des plugins. À mesure que le secteur se développe, il existe une infinité de plugins pour personnaliser vos modèles.
Voici le plugin le plus efficace : Edit WooCommerce Templates . Il s'agit d'un plugin gratuit et facile à utiliser qui vous permet de personnaliser les modèles de votre thème. En quelques clics, vous pouvez échanger des modèles et restaurer les valeurs par défaut à tout moment.
Voici quelques-uns des plugins qui vous permettent de personnaliser les modèles et d'améliorer les performances de votre boutique.
- Champs personnalisés WooCommerce : avec ce plugin, les utilisateurs peuvent créer des champs uniques dans les pages de produits WooCommerce, les pages de paiement, etc.
- WooCommerce Customizer : Dédié aux modèles WooCommerce, ce plugin offre une variété d'options de personnalisation supplémentaires pour votre boutique.
- WooCommerce Single Product Page Customizer : Ce plugin vous permet de modifier l’apparence de la page produit unique au sein de WooCommerce.
Savoir : Comment configurer les réservations WooCommerce ?
Personnalisation des pages produits WooCommerce : pourquoi est-ce essentiel ?
La personnalisation des pages de produits WooCommerce est cruciale, vous ne pouvez donc pas la manquer. Les avantages et les avantages de la personnalisation des pages de produits WooCommerce sont infinis. Grâce à cela, il est possible d'éliminer les préoccupations des clients, d'établir une présentation distinctive et d'améliorer la satisfaction du client.
Voici quelques avantages cruciaux de la mise en œuvre de la personnalisation sur les pages de produits :
Pages optimisées pour la conversion
Une page produit personnalisée peut augmenter les taux de conversion. De nombreuses options peuvent être mises en œuvre, notamment des options de recherche et de filtrage. Par conséquent, les clients trouveront et achèteront des produits plus facilement avec moins de points de friction.
Rendez-le plus attrayant
L'objectif de la personnalisation est souvent de concevoir et de mettre en page des pages de produits qui engagent et séduisent les clients. L’intérêt des clients peut être suscité par des images attrayantes, des descriptions de produits attrayantes et des éléments esthétiques.
L'UX pourrait être améliorée
Assurez-vous que vos choix de conception sont clairs et intuitifs, que les vitesses de chargement sont rapides, que la navigation est facile et que vos clients vivront une expérience exceptionnelle. Cela augmentera les conversions et vous amènera à fidéliser vos clients.
Savoir : Meilleurs modules complémentaires de produits WooCommerce
Façons de personnaliser les pages de produits
Pour rester au courant de l’attrait visuel de votre boutique, vous devez personnaliser vos pages produits. Voici trois méthodes cruciales pour personnaliser avec succès les pages de produits :
- Améliorez les pages de produits WooCommerce avec des plugins
Grâce à WooCommerce, vous pouvez facilement créer une boutique en ligne. Divers plugins sont disponibles pour améliorer votre boutique, notamment ceux qui personnalisent les pages produits.
La personnalisation des pages produits avec les plugins WooCommerce est simple :
Plugins
- Modules complémentaires de produits WooCommerce : à l'aide de ce plugin, vous pouvez ajouter des cases à cocher, des listes déroulantes et des zones de texte à vos pages de produits.
- Image WooCommerce 360º : Grâce à ce plugin, vous pouvez faire pivoter les images à votre guise.
- Vidéo produit pour WooCommerce : Le plugin permet d'ajouter des vidéos de produits.
- Tableau des tailles pour WooCommerce : ce plugin facilite l'ajout de tableaux de tailles à vos produits.
- Recommandations de produits : Ce plugin vous permet d'ajouter une section de recommandations à votre page produit.
Connexe : 40+ meilleurs plugins WooCommerce [gratuits + payants]
- Personnalisation des pages de produits WooCommerce avec CSS
L'utilisation de CSS pour personnaliser les produits WooCommerce peut permettre à votre boutique en ligne de se démarquer et d'offrir aux clients une expérience unique. Pour modifier vos pages produits, écrivez le code CSS.
Lorsque vous êtes connecté, accédez à Apparence → Personnaliser.
Code CSS pour le CTA noir
L'ajout de ce code au CSS supplémentaire changera la couleur CTA par défaut en noir.
| bouton.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a. bouton.alt { couleur d'arrière-plan : #1d1a1a ; couleur de la bordure : #333333 ; couleur : #ffffff ; } |
Code CSS pour le CTA bleu
De plus, pour convertir le noir en bleu, utilisez le code CSS suivant.
| bouton.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a. bouton.alt { couleur d'arrière-plan : #4f5dd5 ; couleur de la bordure : #333333 ; couleur : #ffffff ; } |
- Ajouter du code personnalisé aux pages de produits WooCommerce
Si vous disposez de connaissances techniques, vous pouvez facilement mettre en œuvre la personnalisation de la page produit via un code personnalisé.
Apprendre : Pourquoi les FAQ sont essentielles pour votre boutique WooCommerce ?
Étape 1 : Établir un modèle global
Pour commencer, il est nécessaire d’établir un modèle global qui sera utilisé pour toutes les pages produits.
Commencez par un commentaire PHP indiquant le nom du modèle en haut.
Créez un fichier template-custom-product.php et placez-le dans le thème activé.
| <?php /*Template Name: Customize Product*/ ?> |
Ce modèle utilise la page produit par défaut de WooCommerce. Voici le code.
| $params = array('posts_per_page' => 5, 'post_type' => 'produit'); $wc_query = nouveau WP_Query($params); ?> have_posts()) : ?> have_posts()) : $wc_query->the_post(); ?> |
C'est un modèle de base. Même si cela fonctionne, vous pouvez faire plus avec WooCommerce.
WooCommerce propose plusieurs fonctions pour personnaliser les pages d'affichage de vos produits qui incluent un large éventail d'informations :
| the_permalink() – Affiche l'URL du produit. the_content() – Affiche la description complète du produit. the_excerpt() – Affiche une brève description du produit. the_ID() – Affiche l'ID du produit. the_title() – Affiche le nom du produit. the_post_thumbnail() – Affiche l'image du produit. |
Étape 2 : Ajouter des fonctionnalités dans le fichierfunctions.php du thème activé
Afficher les catégories de produits WooCommerce
Les catégories sont l'endroit où vous catégorisez vos produits. Activez le thème et importez cet extrait dans le fichier function.php pour indiquer la catégorie d'un produit.
if ( ! défini( 'ABSPATH' ) ) { exit; } $produit global ; ?> get_sku() || $product->is_type( 'variable' ) ) ) : ?> get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?> get_id(), ', ', ' ' . _n( 'Catégorie :', 'Catégories :', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> get_id(), ', ', ' ' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> |
Afficher les vignettes des catégories de produits
Une vignette est disponible pour chaque catégorie de produits. Lorsque vous êtes prêt à configurer l'affichage de votre produit personnalisé, ajoutez ce code au template.php ou aux fonctions.php de votre thème.
| function cwresponse_get_thumbnail(){ if(is_page(205)){ $args = array( 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'slug' ) ) ); $random_products = get_posts( $args ); foreach ( $random_products as $post ) : setup_postdata( $post ); ?> finpourchaque ; wp_reset_postdata(); } } add_action('wp_footer', 'cwresponse_get_thumbnail'); |
Supprimez l’en-tête de description.
Lorsque vous utilisez Woocommerce, décochez simplement le champ de description de chaque onglet de produit et modifiez le fichier function.php pour inclure le code suivant.
| add_filter( 'woocommerce_product_description_heading', '__return_null' ); |
Supprimer le titre du produit
Voici comment éliminer le titre dans les onglets de produits uniques de woocommerce : mettez ce code dans Functions.php.
| Remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' ); |
Étape 3 : Modification des modèles WooCommerce
Mettez le code ci-dessous dans le fichier content-single-product.php ou dans le répertoire du produit unique sous woocommerce/templates. Il vaut mieux utiliser function.php.
$image_caption = get_post( get_post_thumbnail_id() )->post_excerpt; $image_link = wp_get_attachment_url( get_post_thumbnail_id() ); $image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array( 'title' => get_the_title( get_post_thumbnail_id() ) ) ); $attachment_count = count( $product->get_gallery_attachment_ids() ); if ( $attachment_count > 0 ) { $gallery = '[product-gallery]'; } else { $gallery = ”; } echo apply_filters( 'woocommerce_single_product_image_html', sprintf( ' } else { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( ' } ?> |
Alternativement, vous pouvez simplement écrire du code CSS.
.images { float : c'est vrai ! important; }
Enfin! Vous avez terminé.
En savoir plus : Comment ajouter l'expédition à WooCommerce ?
Conclusion
La création de pages et de modèles de produits WooCommerce uniques et visuellement attrayants améliore l'expérience d'achat des clients.
L'utilisation de remplacements, de hooks, de filtres et de personnalisation CSS vous permettra de personnaliser vos pages de produits pour répondre aux attentes de vos clients et les aligner sur l'identité de votre marque.
Optimisez la réactivité mobile de votre boutique en ligne basée sur WooCommerce et personnalisez-la pour améliorer l'expérience utilisateur globale. Commencez à mettre en œuvre des pratiques de personnalisation et faites en sorte que votre magasin obtienne la meilleure valeur.
Vous recherchez une aide professionnelle pour personnaliser WooCommerce ? Contactez-nous dès aujourd'hui !
