Aujourd'hui, Woocommerce a pris d'assaut l'industrie du commerce électronique grâce à sa flexibilité et à ses options de personnalisation révolutionnaires. Dans le monde du commerce électronique, il occupe une place de choix. À l'heure actuelle, il détient 27 % des parts de marché du commerce électronique.
Mais les modèles et les pages de produits prédéfinis ne répondent pas aux besoins de toutes les entreprises. Il y a beaucoup d'options de personnalisation dans WooCommerce.
Pour être performant, votre magasin doit suivre les meilleures pratiques de personnalisation. Un élément clé de la personnalisation réside dans les pages produits et les modèles. Une stratégie de personnalisation bien mise en œuvre peut réduire le nombre de paniers abandonnés.
Comme 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 de 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 offre des tonnes d'options de personnalisation. Vous pouvez tout personnaliser, de la caisse aux pages de la boutique, en passant par les pages de catégories, les pages de remerciement, etc. Cela permet à votre boutique de se démarquer de la masse, mais pour être vraiment distinctif, la personnalisation des modèles WooCommerce peut être 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 à 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 en ligne à jour en approfondissant l'édition des modèles WooCommerce. Lisez la suite pour découvrir comment éditer les modèles WooCommerce.
Lire: Comment mettre à jour ma carte de débit sur WooCommerce
Personnaliser les 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 de manière programmatique.
Les deux méthodes suivantes permettent de personnaliser les modèles de manière programmatique :
- Modèles d'écrasement
- Avec crochets
Les deux méthodes fonctionnent, choisissez celle qui vous convient le mieux. Vous devez comprendre les principales différences entre ces méthodes afin de déterminer quand utiliser chacune d'entre elles.
Crochets et écrasement des modèles
Les crochets permettent d'effectuer des modifications simples à l'aide d'actions et de filtres. En écrasant les fichiers modèles, vous pouvez effectuer des personnalisations plus complexes.
En outre, il convient de ne pas écraser un fichier de modèle avec un crochet utilisé dans un fichier de modèle spécifique. L'écrasement du modèle entraînera le remplacement des crochets utilisés dans ce fichier et leur perte d'efficacité.
Choisissez la méthode qui vous convient le mieux après avoir déterminé vos besoins.
Modifier les modèles WooCommerce en les écrasant
Lors de personnalisations complexes, il est préférable d'écraser vos modèles plutôt que d'utiliser des crochets.
De même, l'édition du fichier functions.php est très similaire. Les fichiers principaux du modèle WooCommerce doivent être édités à la place des fichiers du thème.
Cliquez sur Plugins > Plugin Editor, choisissez WooCommerce dans le menu déroulant et choisissez templates pour voir les fichiers de template.
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 des fichiers modèles à plusieurs endroits, tels que le panier, la caisse et l'e-mail.
Les fichiers du modèle WooCommerce comportent de nombreux éléments 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.
Ajouter des shortcodes aux modèles WooCommerce.
Les shortcodes sont un moyen courant de personnaliser le code de WooCommerce. Pour éditer les modèles, WordPress et WooCommerce vous offrent un grand nombre de shortcodes.
Vous trouverez ci-dessous 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.
| <?php if ( ! defined( ‘ABSPATH’ ) ) { exit; // Exit if accessed directly } get_header( ‘shop’ ); while ( have_posts() ) : the_post(); wc_get_template_part( ‘content,’ ‘single-product’ ); endwhile; // end of the loop. do_action( ‘woocommerce_sidebar’ ); $t= ‘<div id=”myacc”><h4>My Account</h4>’; $t.= do_shortcode(“[woocommerce_my_account]”); $t.=”</div>”; echo $t; get_footer( ‘shop’ ); |
Le tableau de bord apparaît une fois que vous avez prévisualisé les pages du produit.
S'assurer que le client sait qu'il a déjà acheté ce produit
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( ‘shop’ ); while ( have_posts() ) : the_post(); wc_get_template_part( ‘content’, ‘single-product’ ); endwhile; // end of the loop. $current_user = wp_get_current_user(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ): echo ‘<div class=”user-bought”>♥ Hey ‘ . $current_user->first_name . ‘, you\’ve purchased this before. Buy again using this coupon: <b>PURCHASE_AGAIN_21</b></div>’; endif; get_footer( ‘shop’ ); |
Les clients verront le message de paiement après avoir consulté un produit qu'ils ont déjà acheté.
Explorer: Magento vs. WooCommerce : Quel est le meilleur choix en 2023 ?
Modifier les modèles WooCommerce à l'aide de crochets
Les hooks sont également utiles pour personnaliser les modèles WooCommerce si l'écrasement des fichiers de modèle n'est pas votre truc. Vous pouvez ajouter des hooks en tant qu'actions ou filtres à votre site web pour augmenter sa fonctionnalité rapidement et faire des changements simples.
En outre, vous pouvez modifier les modèles de votre boutique à l'aide des crochets de WooCommerce. Cette approche n'est recommandée que pour les personnalisations simples. Il est préférable d'écraser les modèles pour les modifications complexes.
Ouvrez votre fichier functions.php dans Appearance > Theme Editor et copiez et collez l'extrait de code avec vos crochets d'action ou de filtre.
Voici quelques exemples de crochets disponibles pour l'édition de modèles WooCommerce.
Ajouter des informations à l'image d'un seul produit
Si vous souhaitez afficher des informations supplémentaires sur le produit au-dessus de l'image, insérez le code suivant dans le fichier functions.php.
| // Add custom function function quadlayers_before_single_product() { echo ‘<h2>Everything is 25% off for this week!</h2>’; } // Add the action add_action( ‘woocommerce_before_single_product’, ‘quadlayers_before_single_product’, 11 ); |
Ce message apparaît sur les pages consacrées à un seul produit.
Personnaliser le modèle WooCommerce avec des plugins
Vous avez des difficultés avec les aspects liés au codage ? Pas de problème. Vous pouvez toujours personnaliser les modèles WooCommerce avec des plugins. Au fur et à mesure que l'industrie se développe, il y a 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 facile à utiliser qui vous permet de personnaliser les modèles de votre thème. En quelques clics, vous pouvez changer de modèle et restaurer les paramètres par défaut à tout moment.
Voici quelques-uns des plugins WooCommerce supplémentaires 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 produits de 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 dans WooCommerce.
Connaître: Comment configurer WooCommerce Bookings ?
Personnaliser les pages produits de WooCommerce : Pourquoi est-ce essentiel ?
La personnalisation des pages produits de WooCommerce est cruciale, vous ne pouvez donc pas la manquer. Les bénéfices et avantages de la personnalisation des pages produits de WooCommerce sont infinis. Grâce à cela, il est possible d'éliminer les inquiétudes des clients, d'établir une présentation distinctive et d'améliorer la satisfaction des clients.
Voici quelques avantages cruciaux 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 options de recherche et de filtrage. Ainsi, les clients trouveront et achèteront les produits plus facilement, avec moins de points de friction.
Le rendre plus attrayant
L'objectif de la personnalisation est souvent de concevoir et de mettre en page des pages de produits qui suscitent l'intérêt des clients. L'intérêt des clients peut être suscité par des images attrayantes, des descriptions de produits séduisantes et des éléments esthétiques.
L'interface utilisateur 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 vivent une expérience agréable. Cela augmentera les conversions et vous permettra de fidéliser vos clients.
Connaître: Meilleures extensions de produits WooCommerce
Comment personnaliser les pages produits
Pour maintenir l'attrait visuel de votre boutique, vous devez personnaliser vos pages produits. Voici trois méthodes essentielles pour personnaliser les pages produits avec succès :
- Améliorer les pages produits de WooCommerce avec des 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 de produits.
La personnalisation des pages produits avec les plugins WooCommerce est facile :
Plugins
- Compléments de produits WooCommerce: Ce plugin vous permet d'ajouter des cases à cocher, des menus déroulants et des zones de texte à vos pages de produits.
- WooCommerce 360º Image: En utilisant ce plugin, vous pouvez faire pivoter les images à votre guise.
- Vidéo de produit pour WooCommerce: Le plugin permet d'ajouter des vidéos de produits.
- Tableau des tailles pour WooCommerce: Ce plugin permet d'ajouter facilement des tableaux de tailles à vos produits.
- Recommandations de produits: Ce plugin vous permet d'ajouter une section de recommandation à votre page produit.
En rapport avec: 40+ Meilleurs Plugins WooCommerce [Gratuits+Payants]
- Personnaliser les pages produits de 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 à vos clients une expérience unique. Pour modifier vos pages de produits, écrivez le code CSS.
Lorsque vous êtes connecté, allez dans Apparence → Personnaliser.
Code CSS pour le CTA noir
L'ajout de ce code à la feuille de style complémentaire (CSS) modifiera la couleur par défaut du CTA, qui deviendra noire.
| button.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 le CTA bleu
En outre, pour convertir le noir en bleu, utilisez le code CSS suivant.
| button.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 de WooCommerce
Si vous avez des connaissances techniques, vous pouvez facilement mettre en œuvre la personnalisation de la page produit par le biais d'un code personnalisé.
Apprendre: 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 de produits.
Commencez par un commentaire PHP indiquant le nom du modèle en haut de la page.
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.
| <?php $params = array(‘posts_per_page’ => 5, ‘post_type’ => ‘product’); $wc_query = new WP_Query($params); ?> <?php if ($wc_query->have_posts()) : ?> <?php while ($wc_query->have_posts()) : $wc_query->the_post(); ?> <?php the_title(); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php else: ?> <p> <?php _e( ‘No Products’); ?> </p> <?php endif; ?> |
Il s'agit d'un modèle de base. Bien qu'il fasse l'affaire, vous pouvez faire plus avec WooCommerce.
WooCommerce offre plusieurs fonctions pour personnaliser les pages d'affichage de vos produits qui comprennent 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 fichier functions.php du thème activé
Afficher les catégories de produits WooCommerce
Les catégories sont l'endroit où vous classez vos produits. Activez le thème et importez cet extrait dans le fichier functions.php pour indiquer la catégorie d'un produit.
<?php if ( ! defined( ‘ABSPATH’ ) ) { exit; } global $product; ?> <div class=”product_meta”> <?php do_action( ‘woocommerce_product_meta_start’ ); ?> <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( ‘variable’ ) ) ) : ?> <span class=”sku_wrapper”><?php esc_html_e( ‘SKU:’, ‘woocommerce’ ); ?> <span class=”sku”><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( ‘N/A’, ‘woocommerce’ ); ?></span></span> <?php endif; ?> <?php echo wc_get_product_category_list( $product->get_id(), ‘, ‘, ‘<span class=”posted_in”>’ . _n( ‘Category:’, ‘Categories:’, count( $product->get_category_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?> <?php echo wc_get_product_tag_list( $product->get_id(), ‘, ‘, ‘<span class=”tagged_as”>’ . _n( ‘Tag:’, ‘Tags:’, count( $product->get_tag_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?> <?php do_action( ‘woocommerce_product_meta_end’ ); ?> </div> |
Afficher les vignettes des catégories de produits
Une vignette est disponible pour chaque catégorie de produit. Lorsque vous êtes prêt à mettre en place votre affichage personnalisé des produits, ajoutez ce code au fichier template.php ou functions.php de votre thème.
| <?php 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 ); ?> <div><a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail(); ?></a></div> <?php endforeach; wp_reset_postdata(); } } add_action(‘wp_footer’, ‘cwresponse_get_thumbnail’); |
Éliminez la rubrique de description.
Si vous utilisez 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.
| 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 : Modifier les modèles de WooCommerce
Placez le code ci-dessous dans le fichier content-single-product.php ou dans le répertoire single product sous woocommerce/templates. Il est préférable d'utiliser le fichier functions.php.
| <div class=”images”> <?php if ( has_post_thumbnail() ) { $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( ‘<a href=”%s” itemprop=”image” class=”woocommerce-main-image zoom” title=”%s” data-rel=”prettyPhoto’ . $gallery . ‘”>%s</a>’, $image_link, $image_caption, $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 également vous contenter d'écrire du code CSS.
.images { float: right! 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 d'overrides, de hooks, de filtres et de CSS vous permettra de personnaliser vos pages produits afin de répondre aux attentes de vos clients et de vous aligner sur l'identité de votre marque.
Optimisez la réactivité mobile de votre boutique en ligne alimentée par WooCommerce et personnalisez-la pour améliorer l'expérience globale de l'utilisateur. Commencez à mettre en œuvre des pratiques de personnalisation et mettez votre boutique en ligne en valeur.
Vous cherchez une aide professionnelle pour personnaliser WooCommerce ? Contactez nous dès aujourd'hui !
