Comment personnaliser les pages produits de WooCommerce : un guide complet et des considérations clés

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

Exemple de page produit WooCommerce.

Les pages de produits dans WooCommerce sont des pages qui affichent des produits individuels. La page contient tous les détails du produit, tels que sonNom, description, prix, photosrépondre en chantantmorphologie(Des produits à attributs multiples sont disponibles).

Voici quelques-uns des éléments clés d'une page produit WooCommerce :

Nom du produit :Le nom du produit est généralement mis en évidence dans la partie supérieure.
Description du produit :Description détaillée du produit, y compris ses caractéristiques et ses avantages.
Images du produit :Des images de haute qualité du produit, prises sous différents angles, sont essentielles pour aider les clients à visualiser le produit.
Prix du produit :Les prix des produits et les réductions ou promotions sont affichés sur la page. Découvrez quelques-uns des coupons d'hébergement chez Cloudways.
Bouton "Ajouter au panier" :Le bouton Ajouter au panier permet aux clients d'ajouter des produits à leur panier.
Variante du produit :Si le produit est disponible en différentes tailles, couleurs ou autres variantes, ces options sont généralement affichées sur la page du produit.
Revue de produits :Les avis et évaluations des clients peuvent être affichés sur la page du produit pour servir de référence aux autres clients.
Produits apparentés :D'autres produits liés au produit visualisé peuvent être affichés sur la page du produit.

Avantages des pages produits personnalisées

Les facteurs suivants sont quelques-unes des raisons pour lesquelles les administrateurs peuvent envisager de personnaliser les pages de produits de WooCommerce :

Pour différencier la boutique des concurrents qui peuvent utiliser la même mise en page de produit par défaut de WooCommerce.
Renforcez l'image de marque en incorporant les couleurs, les polices et les éléments de conception de la marque dans les pages des produits.
Améliorez l'expérience de l'utilisateur en permettant aux clients de trouver plus facilement les informations dont ils ont besoin. Par exemple, des images de produits peuvent être ajoutées pour inclure des avis de clients ou des produits connexes.

Comment personnaliser les pages produits de WooCommerce

Il existe trois façons de personnaliser les pages produits de WooCommerce.

Méthode 1 : Personnalisez les pages produits de WooCommerce avec des extensions

WooCommerce est une puissante plateforme de commerce électronique. Elle offre un large éventail d'extensions permettant d'ajouter de nouvelles caractéristiques et fonctionnalités aux boutiques, notammentPages de produits personnalisées.

Certaines extensions populaires de WooCommerce aident les administrateurs à personnaliser les pages de produits :

Plug-ins d'application étendue	Fonctionnalité
Compléments de produits WooCommerce	Cette extension ajoute des champs personnalisés aux pages de produits, tels que des cases à cocher, des menus déroulants et des zones de texte.
WooCommerce 360º Image	Cette extension permet de personnaliser la rotation des images.
Vidéo de produit pour WooCommerce	Cette extension ajoute des vidéos aux pages de produits.
Tableau des tailles pour WooCommerce	Cette extension permet d'ajouter des tableaux de tailles aux produits du site web.
Recommandations sur les produits	Cette extension permet d'ajouter une section de témoignages à la page produit.

Méthode 2 : Personnaliser les pages produits de WooCommerce avec CSS

La personnalisation des produits WooCommerce à l'aide de CSS est un excellent moyen de rendre un site de commerce électronique plus soigné et de créer un aspect et une sensation uniques pour vos clients. Avec des connaissances en CSS, vous pouvez simplement écrire du code pour modifier les pages de produits.

s'inscrireTableau de bord WooCommerceAprès le transfert auApparence → Personnalisé.

Allez ensuite à l'adresse suivanteCSS supplémentaireAjoutez une feuille de style CSS personnalisée.

Code CSS pour le CTA noir

Si vous souhaitez remplacer la couleur par défaut du CTA par du noir, dans la section "Attach CSS", vous devez changer la couleur du CTA en noir.Ajoutez le code suivant au fichier

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-colour : #1d1a1a ; }
background-color : #1d1a1a ; border-colour : #3333 ;
couleur : #ffffff ;
}

L'apparence du CTA est la suivante.

C'est ce qui se passe en WooCommerce Une façon d'utiliser les éléments de conception des pages de produits dans la page

Méthode 3 : Personnaliser les pages produits de WooCommerce avec un code personnalisé

Les pages produits de WooCommerce peuvent être personnalisées à l'aide d'un code personnalisé si vous disposez des bases techniques et de codage nécessaires.

Étape 1 : Créer un modèle global

La première étape consiste à créer un modèle global identique pour toutes les pages de produits.

Écrivez un commentaire PHP ouvert en haut du fichier en indiquant le nom du modèle.
Créez un fichier dans le dossier du thème activé appeléFichier modèle pour template-custom-product.php

<?php /*模板名称：定制产品*/ ?>

Ce modèle est basé sur la page produit par défaut de WooCommerce. Il contient le code suivant.

5, 'post_type' =&gt; 'product') ;
$wc_query = new WP_Query($params) ; ?
? &gt;
have_posts()) : ? &gt;
have_posts()) : ?
$wc_query-&gt;the_post() ; ? &gt;
<p>
<?php _e( 'No Products'); ?>
</p>
<?php endif; ?>

Il s'agit d'un modèle très basique. Bien qu'il fasse le travail, les fonctionnalités de cette page peuvent être étendues grâce à plusieurs fonctions WooCommerce intégrées.

La liste suivante est une sélection limitée de fonctionnalités de WooCommerce qui contiennent des informations détaillées sur la personnalisation des pages d'affichage des produits :

the_permalink() - affiche l'URL du produit.
the_content() - Affiche une description complète du produit.
the_excerpt() - Affiche une brève description 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 une fonction dans le fichier functions.php du thème activé

2.1 Afficher les catégories de produits WooCommerce

Les catégories sont un moyen important de classer plusieurs produits dans la boutique. Si vous souhaitez afficher les catégories de produits sur une page, placez cet extrait dans la sectiondans le fichier functions.php.

<?php
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
global $product;
?>
<div class="product_meta">
get_sku() || $product-&gt;is_type( 'variable' ) ) : ? &gt;
<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>
get_id(), ', ', '<span class="posted_in">' . _n('Catégorie:', 'Catégories:', count( $product-&gt;get_category_ids() ), 'woocommerce') . ' ', '</span>' ) ; ? &gt;
get_id(), ', ', '<span class="tagged_as">' . _n('Tag:', 'Tags:', count( $product-&gt;get_tag_ids() ), 'woocommerce') . ' ', '</span>' ) ; ? &gt;
</div>

2.2 Vignettes montrant les catégories de produits

Chaque catégorie de produits possède sa propre vignette. Si vous avez besoin de l'inclure dans un affichage de produit personnalisé, placez cet extrait dans la sectionfunctions.phppeut-êtrefichier template.php.

2.3 Supprimer le titre de la description

Si vous souhaitez supprimer le titre de la description dans l'onglet des produits individuels de Woocommerce, activez l'optionfunctions.phpAjoutez le code suivant au fichier.

add_filter('woocommerce_product_description_heading', '__return_null' ) ;

2.4 Suppression des titres de produits

Si vous souhaitez supprimer un titre de produit d'un onglet de produit individuel Woocommerce, activez la fonctionfunctions.phpAjoutez le code suivant au fichier

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' ) ;

Étape 3 : Personnaliser les modèles Woocommerce dans le plugin WooCommerce

commutateur àwoocommerce\templateset insérez le code suivant dans le fichiercontent-single-product.phpou le dossier d'un seul produit. Toutefois, il est recommandé d'utiliser la fonctionfunctions.phpDocumentation.

<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>

Si vous ne voulez pas écrire de code, écrivez simplement du code CSS.

.images { float : right !important ; }

Principaux éléments à prendre en compte pour les pages de produits

La personnalisation des pages produits est essentielle pour améliorer l'expérience de l'utilisateur. Voici quelques éléments clés à prendre en compte lors de la personnalisation des pages produits :

Expérience de l'utilisateur :L'élément le plus important à prendre en compte lors de la personnalisation d'une page produit est l'expérience de l'utilisateur. La page doit être facile à parcourir et fournir toutes les informations nécessaires sur le produit.
Informations sur le produit :Les informations sur le produit sont l'élément clé de la page produit. Elles doivent être détaillées et précises et inclure des images, des vidéos, des commentaires, etc.
Optimisation mobile :De plus en plus de clients utilisent leur téléphone portable pour faire des achats en ligne. Il est important de veiller à ce que les pages de produits soient optimisées pour les appareils mobiles, faciles à parcourir, avec de grandes images et des phrases d'appel à l'action claires.
Optimisation du référencement: :Il est important d'optimiser les pages de produits pour les moteurs de recherche afin que les produits soient visibles pour les clients potentiels. Veillez à ce que les pages de produits aient des titres, des méta-descriptions et des mots-clés pertinents et descriptifs.
Personnalisation :Les pages produits personnalisées permettent d'augmenter l'engagement et les ventes. Utilisez les données des clients pour afficher des recommandations de produits personnalisées, des produits connexes et des promotions en fonction de l'historique de navigation et d'achat du client.
Preuve sociale :L'inclusion d'avis de clients, d'évaluations et de témoignages peut contribuer à instaurer un climat de confiance avec les clients potentiels et à augmenter les conversions.
Des informations claires sur les prix et les frais d'expédition :Les clients doivent connaître le prix du produit et les frais d'expédition éventuels avant de prendre une décision d'achat. Veillez à ce que ces informations soient clairement affichées sur la page du produit.
Vente incitative et vente croisée :La personnalisation des pages produits avec des options de vente incitative et de vente croisée permet d'augmenter la valeur moyenne des commandes. Affichez les produits connexes ou complémentaires que les clients pourraient être intéressés à acheter.

résumés

La personnalisation des pages produits dans WooCommerce crée une expérience d'achat unique pour vos clients. Grâce aux fonctionnalités intégrées et à la flexibilité de WooCommerce, il est facile de modifier les mises en page, d'ajouter de nouveaux éléments et de modifier le code CSS et HTML pour rendre les pages produits encore plus uniques.

problèmes courants

Q : Puis-je personnaliser les pages produits de WooCommerce ?
Oui, des thèmes peuvent être utilisés,Elementor et d'autres plugins, ou le personnaliser en modifiant le fichier du modèle et en utilisant les crochets WooCommerce.

Q : Comment modifier la mise en page de la liste des produits dans WooCommerce ?
Modifiez-le via le personnalisateur de thème, utilisez le plugin de construction de pages, appliquez des feuilles de style CSS personnalisées ou modifiez le modèle archive-product.php.

Q) Comment puis-je personnaliser les pages de produits individuels de WooCommerce de manière programmatique ?
Pour personnaliser les pages de produits individuels de WooCommerce de manière programmatique, suivez les étapes suivantes :

Créez d'abord unsous-thèmeafin de s'assurer que les modifications ne sont pas écrasées lors des mises à jour du thème.
Copiez le fichier single-product.php du répertoire du plugin WooCommerce dans le dossier woocommerce du thème enfant.

add_action('woocommerce_after_single_product_summary', 'custom_function', 10 ) ;
function custom_function() {
    echo '<p>Texte personnalisé ou HTML ici</p>';
}

Ajoutez ou supprimez des éléments à l'aide de filtres et de crochets d'action WooCommerce.

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ) ;
add_action('woocommerce_single_product_summary', 'custom_title_function', 5 ) ;
function custom_title_function() {
    echo '<h1>Titre personnalisé</h1>';
}

Personnalisez les données du produit (prix, description, etc.) en modifiant les fonctions du fichier functions.php.
Utilisez des feuilles de style CSS personnalisées pour ajuster davantage l'apparence des pages de produits.

Q) Comment puis-je éditer une page de produit unique dans WooCommerce ?
Vous pouvez utiliser le constructeur de pages, les champs personnalisés, les crochets WooCommerce ou remplacer le modèle single-product.php.

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
① 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.