Aujourd'hui, WooCommerce a révolutionné le secteur du e-commerce grâce à sa flexibilité et ses options de personnalisation exceptionnelles. Il occupe une place de choix dans le monde du e-commerce et détient actuellement 27 % des parts de marché .
Cependant, les modèles et pages produits prédéfinis ne répondent pas aux besoins de toutes les entreprises. WooCommerce offre de nombreuses options de personnalisation.
Pour être performante, votre boutique doit adopter les meilleures pratiques de personnalisation. La personnalisation passe notamment par la modification des pages produits et des modèles. Une stratégie de personnalisation bien mise en œuvre permet de réduire les abandons de panier.
É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 votre succès.
Cet article vous montre comment personnaliser les modèles WooCommerce, modifier les modèles de produits et personnaliser les pages produits.
Pourquoi est-il important pour les propriétaires de boutiques de personnaliser les modèles WooCommerce ?
WooCommerce offre une multitude d'options de personnalisation. Vous pouvez tout personnaliser : la page de paiement, les pages boutique, les pages catégories, les pages de remerciement, etc. Cela permet à votre boutique de se démarquer, mais pour une originalité vraiment exceptionnelle, la personnalisation des thèmes WooCommerce peut s'avérer utile.
Il est essentiel de modifier les pages par défaut de votre site pour lui donner une apparence différente de celle de vos concurrents. Vous pouvez également personnaliser les modèles par défaut pour donner un avantage concurrentiel à votre entreprise.
Les modèles que vous utilisez sont personnalisables pour enrichir les fonctionnalités et les détails de votre boutique en ligne. Grâce à ces options, vous offrez une meilleure expérience client. Il est donc essentiel de maintenir votre boutique e-commerce à jour en maîtrisant l'édition des modèles WooCommerce. Poursuivez votre lecture pour découvrir comment les modifier.
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. Avec WooCommerce, vous pouvez modifier les modèles par programmation.
Voici deux façons de personnaliser les modèles par programmation :
- Modèles de remplacement
- Avec des crochets
Les deux méthodes fonctionnent, choisissez celle qui vous convient le mieux. Il est important de comprendre les principales différences entre ces méthodes afin de déterminer quand utiliser l'une ou l'autre.
Crochets vs remplacement de modèles
Les hooks permettent d'effectuer des modifications simples à l'aide d'actions et de filtres. En remplaçant les fichiers de modèles, vous pouvez réaliser des personnalisations plus complexes.
De plus, veuillez noter 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, qui deviendront alors inopérants.
Choisissez la méthode qui vous convient le mieux après avoir déterminé vos besoins.
Explorez : Les meilleurs plugins WooCommerce pour les tableaux de produits
Modification des modèles WooCommerce par écrasement
Lors de la réalisation de personnalisations complexes, il est préférable de remplacer vos modèles plutôt que d'utiliser des hooks.
La modification du fichier functions.php est également très similaire. Il faut modifier les fichiers principaux du modèle WooCommerce et non les fichiers du thème.
Cliquez sur Extensions > Éditeur d'extensions, choisissez WooCommerce dans le menu déroulant, puis sélectionnez Modèles pour afficher les fichiers de modèles.
Cette section contient tous les fichiers principaux à modifier, à savoir archive-product.php, content-product-cat.php et content-product.php. Il est également possible de modifier les fichiers de modèle à plusieurs endroits, comme le panier, la page de paiement et les e-mails.
Les fichiers de modèle WooCommerce offrent de nombreuses possibilités de personnalisation. Vous pouvez ainsi modifier aussi bien les sous-répertoires que les dossiers.
L'étape suivante consiste à examiner les modèles WooCommerce personnalisés.
Ajoutez des codes courts aux modèles WooCommerce.
Les shortcodes sont une méthode courante pour personnaliser le code WooCommerce. WordPress et WooCommerce proposent de nombreux shortcodes pour modifier les modèles.
Voici un script qui affiche le tableau de bord « Mon compte » de WooCommerce sur chaque page produit. Ajoutez-le au fichier single-product.php et mettez-le à jour.
| if ( ! defined( 'ABSPATH' ) ) { exit; // Sortie en cas d'accès direct } get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content,' 'single-product' ); endwhile; // Fin de la boucle. do_action( 'woocommerce_sidebar' ); $t= ' Mon compte';$t.= do_shortcode(“[woocommerce_my_account]”); $t.=” ”; echo $t; get_footer( 'shop' ); |
Le tableau de bord apparaîtra après la prévisualisation des pages produits.
Assurez-vous que le client sait qu'il a acheté ceci avant
Les modèles WooCommerce peuvent également être modifiés pour proposer des réductions aux clients fidèles. Là encore, copiez et collez le code sur la page single-product.php.
| get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content', 'single-product' ); endwhile; // 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 ' ♥ Salut ' . $current_user->first_name . ', vous avez déjà acheté cet article. Achetez-le à nouveau en utilisant ce coupon : PURCHASE_AGAIN_21 ';endif; get_footer( 'shop' ); |
Les clients verront le message de confirmation de commande après avoir consulté un produit qu'ils ont déjà acheté.
Explorez : 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 vous préférez ne pas modifier les fichiers de modèles. Vous pouvez ajouter des hooks comme actions ou filtres à votre site web pour en accroître rapidement les fonctionnalités et effectuer des modifications simples.
De plus, vous pouvez modifier les modèles de votre boutique via les hooks WooCommerce. Cette méthode est recommandée uniquement pour les personnalisations simples. Il est préférable de remplacer les modèles pour les modifications plus complexes.
Ouvrez votre fichier functions.php dans Apparence > Éditeur de thème et copiez-collez l'extrait de code contenant vos hooks d'action ou de filtre.
Voici quelques exemples de hooks disponibles pour modifier les 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.
| // Ajouter la fonction personnalisée function quadlayers_before_single_product() { echo ' Tout est à -25 % cette semaine !';} // Ajouter l'action add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 ); |
Ce message apparaîtra sur les pages produits individuelles.
Personnalisation du modèle WooCommerce avec des plugins
Vous avez des difficultés avec le codage ? Pas de souci. Vous pouvez personnaliser les modèles WooCommerce grâce à des extensions. Avec la croissance du secteur, de nombreuses extensions permettent de personnaliser vos modèles.
Voici l'extension la plus performante : Edit WooCommerce Templates . Gratuite et facile à utiliser, elle vous permet de personnaliser les modèles de votre thème. En quelques clics, vous pouvez changer de modèle et rétablir les paramètres par défaut à tout moment.
Voici quelques plugins WooCommerce supplémentaires qui vous permettent de personnaliser les modèles et d'améliorer les performances de votre boutique.
- WooCommerce Custom Fields : Ce plugin permet aux utilisateurs de créer des champs uniques sur les pages produits, les pages de paiement et plus encore de WooCommerce.
- WooCommerce Customizer : Dédié aux modèles WooCommerce, ce plugin offre diverses 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 dans WooCommerce.
Savoir : Comment configurer les réservations WooCommerce ?
Personnalisation des pages produits WooCommerce : pourquoi est-ce essentiel ?
La personnalisation des pages produits WooCommerce est essentielle ; ne la négligez pas. Les avantages sont innombrables. Elle permet notamment de répondre aux préoccupations des clients, de proposer une présentation unique et d'améliorer leur satisfaction.
Voici quelques avantages essentiels de la personnalisation des pages 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 fonctions de recherche et de filtrage. Ainsi, les clients trouveront et achèteront plus facilement les produits, avec un parcours d'achat simplifié.
Rendez-le plus attrayant
L'objectif de la personnalisation est souvent de concevoir et de mettre en page des pages produits qui captent l'attention et séduisent les clients. L'intérêt du client peut être suscité par des images attrayantes, des descriptions de produits alléchantes et des éléments esthétiques soignés.
L'expérience utilisateur pourrait être améliorée
Veillez à ce que vos choix de design soient clairs et intuitifs, que le chargement soit rapide et la navigation aisée, afin d'offrir une expérience utilisateur optimale. Vous augmenterez ainsi vos conversions et fidéliserez votre clientèle.
À savoir : Les meilleurs modules complémentaires pour produits WooCommerce
Façons de personnaliser les pages produits
Pour que votre boutique conserve une image attrayante, vous devez personnaliser vos pages produits. Voici trois méthodes essentielles pour y parvenir :
- Améliorez les pages produits WooCommerce grâce aux plugins
Avec WooCommerce, vous pouvez facilement créer une boutique en ligne. Différents plugins sont disponibles pour améliorer votre boutique, notamment ceux qui permettent de personnaliser les pages produits.
Personnaliser les pages produits avec les plugins WooCommerce est facile :
Plugins
- Extensions WooCommerce pour produits : Ce plugin vous permet d’ajouter des cases à cocher, des listes déroulantes et des zones de texte à vos pages produits.
- WooCommerce 360º Image : Grâce à ce plugin, vous pouvez faire pivoter les images à votre guise.
- Vidéo produit pour WooCommerce : Ce plugin permet d’ajouter des vidéos de produits.
- Tableau des tailles pour WooCommerce : Ce plugin facilite l’ajout de tableaux des tailles à vos produits.
- Recommandations de produits : Ce plugin vous permet d'ajouter une section de recommandations à votre page produit.
Articles connexes : Plus de 40 plugins WooCommerce de qualité [gratuits et payants]
- Personnalisation des pages produits WooCommerce avec CSS
Personnaliser vos produits WooCommerce avec CSS vous permet de vous démarquer et d'offrir une expérience client unique. Pour modifier vos pages produits, il vous suffit d'écrire le code CSS correspondant.
Une fois connecté(e), allez dans Apparence → Personnaliser.
Code CSS pour un CTA noir
L'ajout de ce code à la section CSS additionnelle modifiera la couleur par défaut du bouton d'appel à l'action en noir.
| bouton.alt, input[type="button"].alt, input[type="reset"].alt, input[type="submit"].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #1d1a1a; border-color: #333333; color: #ffffff; } |
Code CSS pour l'appel à l'action 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.button.alt { background-color: #4f5dd5; border-color: #333333; color: #ffffff; } |
- Ajouter du code personnalisé aux pages produits WooCommerce
Si vous possédez de solides connaissances techniques, vous pouvez facilement mettre en œuvre la personnalisation des pages produits via du code personnalisé.
Apprenez-en plus : Pourquoi les FAQ sont-elles 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' => 'product'); $wc_query = new WP_Query($params); ?> avoir_posts()) : ?> have_posts()) : $wc_query->the_post(); ?> |
C'est un modèle basique. Bien qu'il soit fonctionnel, WooCommerce offre des possibilités bien plus étendues.
WooCommerce offre plusieurs fonctions pour personnaliser vos pages d'affichage de produits, incluant un large éventail d'informations :
| the_permalink() – Affiche l'URL du produit. the_content() – Affiche la description complète du produit. the_excerpt() – Affiche un bref résumé du produit. the_ID() – Affiche l'identifiant 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 fichier functions.php du thème activé
Afficher les catégories de produits WooCommerce
Les catégories vous permettent de classer vos produits. Activez le thème et importez cet extrait de code dans le fichier functions.php pour indiquer la catégorie d'un produit.
if ( ! defined( 'ABSPATH' ) ) { exit; } global $product; ?> 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 serez prêt à configurer l'affichage personnalisé de vos produits, ajoutez ce code au fichier template.php ou functions.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 ); ?> endforeach; wp_reset_postdata(); } } add_action('wp_footer', 'cwresponse_get_thumbnail'); |
Supprimer l'en-tête de description.
Lors de l'utilisation de WooCommerce, il suffit de décocher le champ de description pour chaque onglet de produit et de modifier le fichier functions.php pour y inclure le code suivant.
| ajouter_filtre( 'woocommerce_product_description_heading', '__return_null' ); |
Supprimer le titre du produit
Voici comment supprimer le titre dans les onglets de produits individuels WooCommerce : insérez ce code dans le fichier functions.php.
| supprimer_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' ); |
Étape 3 : Modification des modèles WooCommerce
Insérez le code ci-dessous dans le fichier content-single-product.php ou dans le répertoire du produit unique sous woocommerce/templates. Il est préférable d'utiliser functions.php.
<div class="images"><?php if ( has_post_thumbnail() ) { $image_caption = get_post( get_post_thumbnail_id() )-> extrait_de_l'article; $lien_image = 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( ' <a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a> ', $lien_image, $caption_image, $image ), $post->ID ); } else { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" /> ', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID ); } ?><?php do_action( 'woocommerce_product_thumbnails' ); ?></div>Vous pouvez aussi simplement écrire du code CSS.
.images { float: right! important; }
Enfin ! C'est terminé.
En savoir plus : Comment ajouter la livraison à WooCommerce ?
Conclusion
La création de pages produits et de modèles WooCommerce uniques et visuellement attrayants améliore l'expérience d'achat des clients.
L'utilisation des surcharges, des hooks, des filtres et de la personnalisation CSS vous permettra de personnaliser vos pages produits afin de répondre aux attentes de vos clients et de les aligner sur votre identité de marque.
Optimisez l'affichage mobile de votre boutique en ligne WooCommerce et personnalisez-la pour améliorer l'expérience utilisateur. Mettez en œuvre des pratiques de personnalisation et tirez le meilleur parti de votre boutique.
Besoin d'aide professionnelle pour personnaliser WooCommerce ? Contactez-nous dès aujourd'hui !
