Comment personnaliser les pages de produits WooCommerce

Points clés

• WooCommerce La personnalisation de la page du produit utilise des opérations et des crochets de filtre pour modifier directement le fichier de thème sans modifier la marque du fichier de modèle.
• Personnalisez la page du produit en chargeant le fichier single-product.php et en copie le modèle dans le thème, toutes les modifications sont apportées à une copie, garantissant que les modifications personnalisées ne sont pas affectées lors de la mise à jour du thème et du plug-in.
• Créez une page de produit ou une catégorie de produit personnalisée en ajustant les modèles personnalisés pour ces pages et en vous assurant que les nouveaux produits ou catégories que vous êtes ajoutés sont à la fin du fichier content-single-product.php.
• Utilisez des plugins tels que Elementor et Beaver Builder pour personnaliser les pages de produits WooCommerce sans codage de connaissances.

Lorsque vous planifiez un magasin WooCommerce, vous devez répondre à de nombreuses questions à l'avance qui affecteront sérieusement le succès futur du magasin. La configuration du magasin est un défi sérieux car une fois terminé, il est toujours difficile de modifier la configuration et la conception du magasin. Pour personnaliser la page WooCommerce, vous devez considérer les options disponibles, que je couvrirai dans cet article.

Maintenant, après la mise en ligne du magasin, le prochain défi est le désordre sur la page du produit. WooCommerce Une page de produit unique a de nombreux éléments qui ne contribuent pas directement à la conception et à la configuration personnalisées du magasin. Deux coupables communs sont les catégories de produits et les cotes d'étoiles. Tous les magasins ne doivent pas afficher ces deux éléments sur une seule page de produit. De même, d'autres éléments doivent également être repositionnés pour s'adapter à la conception personnalisée du magasin.

Tous ces défis peuvent être facilement résolus avec les opérations WooCommerce et les crochets filtrants. J'ai créé cette courte liste pour montrer ce que vous pouvez personnaliser dans la page du produit.

Page de produit WooCommerce personnalisée

La première chose que vous voudrez peut-être faire est d'afficher le produit dans un modèle différent de celui par défaut. Le fichier

doit être chargé, qui contrôle le fichier de modèle qui affiche les informations du produit à l'extrémité frontale. single-product.php

La pratique courante (généralement recommandée) pour personnaliser des pages de modèles pour les thèmes et plugins parents est de copier des modèles dans le thème. Maintenant, apportez toutes les modifications à la copie. De cette façon, si vous mettez à jour le thème et le plugin, vos modifications personnalisées resteront les mêmes.

Plusieurs plugins et thèmes fournissent un grand nombre d'actions personnalisées et de crochets filtrants qui permettent une modification directe des fichiers de thème. L'avantage de tout cela est que vous n'avez pas à modifier les balises du fichier de modèle. Le résultat est un code plus propre sans duplication de fichier désordonnée.

J'utiliserai

pour appeler des fichiers de modèle qui contrôlent le format des informations sur le produit et la façon dont les informations du produit sont affichées sur la page du produit. De même, single-product.php est un modèle de produit, la modification peut modifier les informations et le style de la page du produit. Ouvrez maintenant content-single-product.php et ajoutez le code suivant pour modifier le modèle pour une seule page de produit: single_template

function get_custom_post_type_template($single_template) {
 global $post;

 if ($post->post_type == 'product') {
      $single_template = dirname( __FILE__ ) . '/single-template.php';
 }
 return $single_template;
}
add_filter( 'single_template', 'get_custom_post_type_template' );

以及以下包含在模板 _include 中的代码
add_filter( 'template_include', 'portfolio_page_template', 99 );

function portfolio_page_template( $template ) {

    if ( is_page( 'slug' )  ) {
        $new_template = locate_template( array( 'single-template.php' ) );
        if ( '' != $new_template ) {
            return $new_template ;
        }
    }

    return $template;
}

Créer des produits WooCommerce personnalisés / catégorie

À ce stade, je suppose que vous avez une boutique WooCommerce active et que vous connaissez très bien le processus de mise en place des pages de produits et des catégories de produits. Il existe toujours des situations où vous devez personnaliser votre page de produit ou personnaliser votre page de catégorie de produits. Cela se fait en ajustant les modèles personnalisés pour ces modèles.

Ajuster le fichier de modèle WooCommerce

N'oubliez pas que lorsque vous utilisez le fichier content-single-product.php, modifiez-le pour que tout produit ou catégorie que vous ajoutez doit être à la fin du fichier. Une autre bonne habitude est de le nommer pour qu'il se démarque et est facile à identifier. Par exemple, si vous avez une catégorie appelée "Books", modifiez le nom du fichier en content-single-product-books.php. Ce changement simple garantira que vous pouvez immédiatement identifier les fichiers corrects pour une catégorie spécifique. Ce fichier est utilisé pour apporter diverses modifications (ajouter ou supprimer les barres latérales, les modifications des boucles, etc.) pour s'assurer que la page de catégorie de produit ou de produit répond pleinement à vos besoins.

Le travail suivant consiste à modifier le fichier single-product.php. Ce fichier contient une boucle qui détermine les modèles à charger pour afficher le produit.

J'ajouterai une condition IF qui vérifie si le produit tombe dans une catégorie spécifique, puis charge le single-product.php pertinent dans le modèle personnalisé. Maintenant, il n'est pas nécessaire de renommer le fichier. Pour y ajouter du code, ouvrez le fichier et trouvez l'extrait de code suivant:

woocommerce_get_template_part( 'content', 'single-product' );

Vous devez le remplacer par le code suivant:

global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;

if ( in_array( 'YOURCATEGORY', $categories ) ) {
    woocommerce_get_template_part( 'content', 'single-product-YOURCATEGORY' );
} else {
    woocommerce_get_template_part( 'content', 'single-product' );
}

Dans le code, trouvez votre catégorie et remplacez-la par la catégorie Slug de votre choix. De plus, vous devez remplacer content-single-product.php par le nouveau nom du fichier. Utilisez l'exemple utilisé ci-dessus, où le limace de catégorie est "livres" et content-single-product.php est renommé content-single-product-books.php. À ce stade, le code ressemble à ceci:

global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;
if ( in_array( 'books', $categories ) ) {
    woocommerce_get_template_part( 'content', 'single-product-books' );
} else {
    woocommerce_get_template_part( 'content', 'single-product' );
}

À ce stade, tous les fichiers ont été modifiés avec succès et / ou renommés. L'étape suivante consiste à télécharger ces fichiers dans la boutique WooCommerce. Pour vous assurer que tout se passe bien, assurez-vous qu'il y a un sous-dossier nommé /woocommerce/ dans le répertoire de thème. N'oubliez pas que ces deux fichiers (content-single-product.php et single-product.php) seront dans le même dossier. Il est préférable de modifier les éléments de code dans ce dossier du thème afin que vous puissiez empêcher les erreurs de débogage difficiles, c'est-à-dire écraser le fichier woocommerce d'origine.

La dernière étape consiste à vérifier les pages de la catégorie des produits et des produits pour s'assurer que toutes les modifications apportées dans le code de modèle personnalisé sont appliquées et affichées parfaitement.

Conclusion

Apprendre à personnaliser la page de produit WooCommerce et la page de catégorie de produits consiste à ajouter et à modifier les crochets. Il est important de comprendre que tous ces changements affectent directement la façon dont ces deux pages sont présentées à l'avant du magasin. Si vous avez besoin d'aide avec le code ou tout autre aspect de cette idée, veuillez laisser un commentaire et je vous répondrai.

FAQ sur la personnalisation des pages de produits WooCommerce

Quelles sont les étapes de base pour personnaliser ma page de produit WooCommerce?

La personnalisation de votre page de produit WooCommerce implique plusieurs étapes. Tout d'abord, vous devez installer et activer le plugin WooCommerce sur votre site Web WordPress. Ensuite, accédez aux paramètres WooCommerce et sélectionnez l'onglet Produits. Ici, vous pouvez ajuster les paramètres d'affichage de la page du produit. Vous pouvez également utiliser des plugins tels que des sous-thèmes ou Elementor pour personnaliser davantage la disposition et la conception de votre page de produit. N'oubliez pas de toujours prévisualiser les changements avant d'être mis en ligne.

Puis-je personnaliser ma page de produit WooCommerce sans codage?

Oui, vous pouvez personnaliser votre page de produit WooCommerce sans aucune connaissance de codage. Plusieurs plugins sont disponibles, tels que Elementor et Beaver Builder, qui fournissent une interface glisser-déposer pour une personnalisation facile. Ces outils vous permettent de modifier les dispositions, d'ajouter ou de supprimer des éléments et de régler la conception de votre page de produit en quelques clics.

Comment ajouter des champs personnalisés à ma page de produit WooCommerce?

Les champs personnalisés peuvent être ajoutés à votre page de produit WooCommerce à l'aide de plugins tels que des champs personnalisés avancés ou des champs personnalisés WooCommerce. Ces plugins vous permettent d'ajouter des informations supplémentaires à votre page de produit, telles que des graphiques de taille, des informations de livraison ou des vidéos de produits. Une fois le plugin installé et activé, vous pouvez créer des champs personnalisés et les ajouter à votre page de produit.

Comment modifier la disposition de ma page de produit WooCommerce?

Vous pouvez utiliser un plugin sous-thème ou de génération de page pour modifier la disposition de vos pages de produits WooCommerce. Ces outils vous permettent de réorganiser des éléments sur les pages de produits, d'ajouter de nouvelles sections ou de supprimer des éléments inutiles. Vous pouvez également ajuster la largeur de la page du produit, modifier la position de l'image du produit ou ajouter une barre latérale pour plus d'informations.

Comment ajouter des variantes de produit à ma page de produit WooCommerce?

Les variations de produit peuvent être ajoutées à votre page de produit WooCommerce via la section des données du produit dans les paramètres WooCommerce. Ici, vous pouvez créer différentes variations pour votre produit, telles que la taille, la couleur ou le matériau. Chaque variante peut avoir son propre prix, SKU et statut d'inventaire. Vous pouvez également ajouter des images à chaque variante pour aider les clients à comprendre leurs choix intuitivement.

Comment améliorer la réactivité mobile de ma page de produit WooCommerce?

Les thèmes réactifs ou les plug-ins d'optimisation mobile peuvent être utilisés pour améliorer la réactivité mobile des pages de produits WooCommerce. Ces outils garantissent que vos pages de produits s'affichent et fonctionnent bien sur tous les appareils, quelle que soit la taille de l'écran. Vous pouvez également utiliser le personnalisateur WordPress pour ajuster la vue mobile de la page du produit.

Comment ajouter une description de produit personnalisée à ma page de produit WooCommerce?

Des descriptions de produits personnalisées peuvent être ajoutées à votre page WooCommerce dans la section Données du produit des paramètres WooCommerce. Ici, vous pouvez rédiger une description détaillée du produit, y compris ses fonctionnalités, avantages et spécifications. Vous pouvez également utiliser HTML pour formater votre description et ajouter des liens, des images ou des vidéos.

Comment ajouter des avis clients à ma page de produit WooCommerce?

Les avis clients peuvent être ajoutés à votre page de produit WooCommerce dans la section Données du produit des paramètres WooCommerce. Ici, vous pouvez activer les avis de votre produit. Vous pouvez également améliorer les avis en utilisant des plugins tels que Yith WooCommerce Advanced Review ou WooCommerce Product Review Pro, tels que l'ajout de rappels de commentaires, de notes d'étoiles ou de filtres de commentaires.

Comment optimiser ma page de produit WooCommerce pour le référencement?

Optimisation de votre page de produit WooCommerce pour le référencement comprend plusieurs étapes. Tout d'abord, vous devez rédiger un titre et une description de produit uniques et descriptifs à l'aide de mots clés pertinents. Vous pouvez également ajouter des balises Meta et du texte alternatif aux images de produit. De plus, vous pouvez utiliser des plugins SEO tels que Yoast SEO pour optimiser davantage vos pages de produits, telles que la création d'URL conviviales, l'ajout de balises de schéma ou la génération de sitemaps XML.

Comment ajouter des produits connexes à ma page de produit WooCommerce?

Les produits connexes peuvent être ajoutés à votre page de produit WooCommerce dans la section Données du produit des paramètres WooCommerce. Ici, vous pouvez sélectionner l'onglet Produits de liaison et ajouter des produits pertinents dans les champs de vente ascellants ou transférer. Vous pouvez également utiliser des plugins tels que les produits liés à WooCommerce ou Yith WooCommerce achètent souvent ensemble pour afficher des produits connexes de manière plus dynamique et engageante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!