Guide d’introduction au développement de thèmes WooCommerce : Créez votre site de commerce électronique à partir de zéro.

Si vous êtes déjà familier avec le développement de thèmes pour WordPress, créer un thème pour WooCommerce sera une étape logique pour vous. WooCommerce, en tant que plugin d’e-commerce pour WordPress, présente ses fonctionnalités principales grâce à une série de modèles de page personnalisés, de boucles de traitement des données et de codes courts (shortcodes). Un thème pour WooCommerce doit utiliser correctement ces modèles et s’assurer que tous les styles et les scripts soient intégrés sans aucun problème.

Pour développer un thème pour WooCommerce, il vous faut d’abord disposer d’un thème WordPress de base. Il peut s’agir d’un thème personnalisé que vous créez de zéro, ou bien d’un thème pré-existant que vous modifiez en utilisant un cadre de travail comme Underscores ou Storefront. L’essentiel est que votre thème indique clairement qu’il prend en charge WooCommerce ; c’est ainsi que les plugins pourront intégrer leurs fichiers de template dans la structure de votre thème.

L’ensemble du processus comprend plusieurs étapes clés : la mise en place d’un environnement de développement, la compréhension de la structure des templates de WooCommerce, la création des fichiers thèmes nécessaires, la personnalisation des fonctionnalités à l’aide d’actions et de hooks de filtre, ainsi que les tests et l’optimisation finale du produit. Nous allons maintenant analyser ces étapes une par une.

Lectures recommandées Guide de début pour le développement de thèmes WordPress : Construire votre premier thème à partir de zéro。

Installation de l'environnement de développement et structure du thème

Avant de commencer à écrire le moindre code, il est essentiel disposer d’un environnement de développement local fiable. Il est recommandé d’utiliser des outils tels que Local, XAMPP ou Docker pour mettre en place rapidement un environnement comprenant PHP, MySQL, ainsi que Apache ou Nginx. Vérifiez que votre version de PHP répond aux exigences les plus récentes de WooCommerce (généralement PHP 7.4 ou une version ultérieure), et assurez-vous d’avoir installé WordPress ainsi que les plugins requis par WooCommerce.

Hébergement WordPress par UltraHost

Garantie de remboursement dans les 30 jours, bande passante illimitée et base de données, protection gratuite contre les attaques DDoS. Avantage de 501 TP4T pour les achats sur 3 ans.

page d'accès

Créez un nouveau répertoire de thèmes, par exemple… my-woocommerce-themeEt placez-le à… wp-content/themes/ Dans le répertoire des thèmes, un thème de base prenant en charge WooCommerce doit contenir au moins les fichiers essentiels suivants :

• style.cssLe fichier de style du thème doit contenir les commentaires de tête standard de WordPress.
• index.phpLe fichier du modèle principal pour le thème.
• functions.phpCe fichier est essentiel pour ajouter la fonctionnalité des thèmes, les scripts de registration, les styles, ainsi que pour déclarer le support de WooCommerce.

Tout d’abord, style.css Dans les commentaires en tête du document, il est nécessaire de définir clairement l’information thématique.

/*
Theme Name: My WooCommerce Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Description: 一个为 WooCommerce 定制的现代电商主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-woocommerce-theme
*/

Ensuite, functions.php Dans le fichier, la première et la plus importante chose à faire est de déclarer que votre thème prend en charge WooCommerce. Cela se fait en… add_action Les crochets et add_theme_support La fonction est mise en œuvre par… (The function is implemented by…)

<?php
/**
 * 主题功能文件
 */
function my_woocommerce_theme_setup() {
    // 声明主题支持 WooCommerce
    add_theme_support( 'woocommerce' );
    // 可选：支持 WooCommerce 的特定功能，如产品画廊缩放、轮播等
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'my_woocommerce_theme_setup' );

// 注册主题的样式和脚本
function my_woocommerce_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入 WooCommerce 样式
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_style( 'woocommerce-theme', get_template_directory_uri() . '/css/woocommerce.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_woocommerce_theme_scripts' );
?>

Comprendre et modifier les templates de WooCommerce

WooCommerce utilise un système de templates qui peut être personnalisé. Tous les fichiers de templates par défaut se trouvent dans le répertoire des plugins. templates/ Dans le dossier. Pour personnaliser ces modèles dans votre thème, vous devez créer un fichier nommé… (le nom du fichier n’est pas spécifié dans le texte original) dans le répertoire de votre thème. woocommerce Dans le dossier correspondant, copiez les fichiers de modèle en fonction de la structure de chemin identique présente dans le plugin, puis modifiez-les.

Lectures recommandées Guide ultime pour le développement de thèmes WordPress : Construire votre premier thème personnalisé de zéro à un。

Par exemple, si vous souhaitez modifier le modèle d’une page de produit spécifique, la route par défaut de WooCommerce est… plugins/woocommerce/templates/single-product.phpVous devez créer les éléments suivants dans votre thème :themes/my-woocommerce-theme/woocommerce/single-product.phpLorsque ce fichier existe, WooCommerce chargera en priorité la version correspondante présente dans le thème.

Le niveau des templates est un autre concept clé. WooCommerce intègre de manière astucieuse le système de niveaux de templates standard de WordPress. Par exemple, pour la page du magasin (Shop Page), WordPress recherche les templates dans l’ordre suivant :archive-product.php > archive.php > index.phpPar conséquent, il est nécessaire de créer… archive-product.php C'est la méthode la plus directe et la plus efficace pour afficher la liste des magasins personnalisés.

Les fichiers de modèle de base couramment utilisés et qu'il est recommandé de remplacer en priorité comprennent :
- single-product.phpPage de détail d'un produit unique.
- archive-product.phpPage d'archivage des produits (page d'accueil du magasin).
- cart/cart.phpPage du panier d’achat.
- checkout/form-checkout.phpPage de règlement.
- myaccount/my-account.phpMa page de compte.

hosting.com Hébergement partagé

Hautes performances avec les CPU AMD EPYC, stockage SSD NVMe et LiteSpeed, support interne expert 24h/24 et 7j/7, mesures de sécurité avancées, notamment SSL, protection contre la force brute, les logiciels malveillants et le DDoS, économies pouvant aller jusqu'à 73%.

page d'accès

Lors de la modification d’un modèle, la meilleure pratique consiste à copier d’abord le fichier de modèle d’origine fourni par le plugin WooCommerce dans le répertoire correspondant à votre thème, avant de procéder aux modifications. Cela permet de éviter tout risque de perturbation des fonctionnalités essentielles du système.

Utiliser des hooks pour personnaliser les fonctionnalités.

En plus de permettre de modifier les fichiers de template, WooCommerce offre également de nombreuses fonctionnalités supplémentaires (actions).action) et les filtres (filterCes outils permettent d’ajouter, de supprimer ou de modifier du contenu et des fonctionnalités sans avoir à modifier les fichiers de template principaux. Cela est généralement plus léger et plus facile à maintenir que de réécrire directement les templates.

Les « hooks d’action » vous permettent d’exécuter du code personnalisé à des emplacements spécifiques. Par exemple, vous pouvez ajouter un bloc personnalisé après les informations résumées du produit.

Lectures recommandées Créer un site web professionnel : Guide complet pour développer votre propre thème WordPress à partir de zéro。

function my_custom_product_message() {
    echo '<p class="my-custom-notice">🎉 Ce produit participe à une offre limitée dans le temps !</p>';
}
add_action( 'woocommerce_single_product_summary', 'my_custom_product_message', 20 );

Ici,woocommerce_single_product_summary C’est le nom du crochet.20 Il s’agit d’un numéro de priorité (qui détermine l’ordre d’exécution).

Les hooks des filtres vous permettent de modifier les données. Par exemple, vous pouvez changer le texte de la bouton “ Ajouter au panier ”.

Hébergement partagé InterServer

Hébergement mutualisé $2.50 USD par mois, premier mois $0.1 USD code promo tryinterserver, 461 scripts cloud apps, installation en un clic.

page d'accès

function my_custom_add_to_cart_text( $text ) {
    if ( is_product() ) {
        $text = __( '立即购买', 'my-woocommerce-theme' );
    }
    return $text;
}
add_filter( 'woocommerce_product_single_add_to_cart_text', 'my_custom_add_to_cart_text' );

Un autre outil puissant est le « template hook ». WooCommerce a intégré de nombreux éléments dans les fichiers de templates. do_action En utilisant ces hooks, vous pouvez contrôler de manière précise la manière dont la structure de la page est affichée. Vous pouvez les appliquer comme suit : remove_action Pour supprimer les éléments indésirables, ou bien… add_action Insérer de nouveaux éléments à des emplacements spécifiques est plus flexible que de modifier directement le fichier de template. Cela est particulièrement avantageux lors de la mise à jour des plugins WooCommerce, car vos modifications ont moins de chances d’être effacées.

Personnalisation des styles et conception responsive

WooCommerce dispose d’un ensemble de styles de base, mais il est nécessaire de les personnaliser en profondeur pour qu’ils soient en accord avec le langage de conception de votre thème. Il est conseillé de créer un fichier CSS distinct pour effectuer ces modifications. woocommerce.css… et également dans functions.php Il se charge selon certaines conditions, comme indiqué dans l'exemple précédent.

L’essence de la personnalisation des styles réside dans la compréhension de la structure HTML et des classes CSS générées par WooCommerce. L’utilisation des outils de développement du navigateur pour examiner les éléments tels que la liste des produits ou le tableau du panier d’achat est une méthode rapide pour se mettre au travail. WooCommerce a ajouté de nombreuses classes CSS riches et sémantiques pour la plupart des éléments. .product、.woocommerce-loop-product__link、.onsale etc.

Par exemple, pour modifier le style de l’étiquette “ Prix spécial ” :

/* 在你的 woocommerce.css 中 */
.onsale {
    background-color: #ff3366;
    color: white;
    border-radius: 0;
    padding: 0.5em 1em;
    font-weight: bold;
    top: 10px;
    right: 10px;
    left: auto; /* 覆盖默认的 left: 0 */
}

Le design responsive est essentiel pour les sites e-commerce. Il est nécessaire de s’assurer que le grid des produits ainsi que les tableaux (comme le panier d’achat et les détails des commandes) s’affichent correctement sur toutes les tailles d’écran. Utilisez les requêtes de médias CSS ainsi que les techniques de mise en page Flexbox ou Grid pour réorganiser l’agencement de la liste des produits.

@media (max-width: 768px) {
    ul.products li.product {
        width: 48%; /* 在平板设备上每行显示两个产品 */
        margin-right: 4%;
    }
    ul.products li.product:nth-child(2n) {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    ul.products li.product {
        width: 100%; /* 在手机上每行显示一个产品 */
        margin-right: 0;
    }
    /* 调整结账表单的输入框 */
    .woocommerce form .form-row {
        width: 100%;
        float: none;
        margin-right: 0;
    }
}

résumés

Le développement de thèmes pour WooCommerce consiste à combiner les connaissances acquises sur les thèmes WordPress avec les besoins spécifiques du commerce électronique. L’essentiel est de comprendre le mécanisme de couverture des templates, ainsi que d’utiliser habilement les actions et les hooks pour personnaliser les fonctionnalités de manière flexible. De la mise en place de l’environnement de développement, à la déclaration des fonctionnalités supportées, en passant par la réécriture des templates clés, jusqu’à l’utilisation des hooks pour effectuer des ajustements finaux et une personnalisation avancée des styles, chaque étape est une pierre angulaire pour construire un magasin en ligne professionnel, unique et efficace. N’oubliez jamais que le développement dans des sous-thèmes, ainsi que l’utilisation prioritaire des hooks plutôt que la modification directe des templates principaux, constituent les meilleures pratiques pour garantir la maintenance du code et sa compatibilité à l’avenir.

FAQ Foire aux questions

Comment supprimer ou réorganiser les éléments de la page de détails du produit dans un thème ?

Vous pouvez utiliser… remove_action Une fonction est nécessaire pour supprimer un élément spécifique de la zone de résumé du produit. Avant toute chose, il vous faut savoir par quel hook cet élément a été ajouté et quel est son niveau de priorité.

Par exemple, pour supprimer le titre d’un produit, vous pouvez consulter… plugins/woocommerce/templates/single-product/title.phpVous remarquerez qu'il passe par un crochet. woocommerce_single_product_summary Ajoutez-le avec une priorité de 5. Donc, dans votre sujet… functions.php Il suffit d'ajouter le code suivant pour le supprimer :

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

Pour réarranger les éléments, vous devez d’abord en supprimer tous les éléments pertinents, puis les réajuster dans l’ordre souhaité. Vous pouvez également modifier leur ordre en modifiant leurs numéros de priorité : plus le numéro est bas, plus l’élément sera exécuté tôt et occupera une position plus élevée dans le résultat final.

Pourquoi les modifications que j’ai apportées à mon thème ont-elles disparu après la mise à jour de WooCommerce ?

Si vous avez modifié directement le répertoire du plugin WooCommerce…wp-content/plugins/woocommerce/Si les modifications sont effectuées dans le fichier de modèle situé en dessous, elles seront automatiquement supprimées à chaque mise à jour du plugin. C’est une pratique fortement déconseillée.

La bonne méthode consiste à suivre le mécanisme de surcouverture des templates de WooCommerce : copiez le fichier de template qui doit être modifié dans le répertoire de votre thème. woocommerce/ Modifiez les fichiers dans les sous-dossiers. De cette façon, WooCommerce chargera en priorité la version de vos thèmes, et les mises à jour des plugins n’affecteront pas vos modifications personnalisées.

Comment créer un layout personnalisé pour les pages d'un magasin WooCommerce ?

Pour créer une mise en page personnalisée pour la page de la boutique, la méthode la plus efficace consiste à réécrire le code. archive-product.php Fichier de modèle. Vous pouvez réorganiser entièrement la structure HTML de ce fichier.

Une autre approche plus modulaire consiste à utiliser des hooks. Le contenu de la page du magasin est principalement fourni par woocommerce_before_main_content、woocommerce_archive_description、woocommerce_before_shop_loop、woocommerce_after_shop_loop Vous pouvez contrôler le fonctionnement en utilisant des « hooks » (points d’interception du code). Vous pouvez supprimer la boucle par défaut et insérer vos propres requêtes personnalisées ainsi que des structures de boucle entre ces hooks, afin de créer des layouts de type grille, liste ou masonry uniques.

En même temps, en utilisant le système de personnalisation (Customizer) de WordPress ou en créant une page d'options pour le thème, vous pouvez permettre aux utilisateurs de changer de layout sans avoir à modifier le code.

Comment ajouter correctement du JavaScript personnalisé à un thème WooCommerce ?

Pour ajouter du JavaScript personnalisé à un thème WooCommerce, il est nécessaire de suivre les meilleures pratiques de mise en file d'attente des scripts WordPress. functions.php Dans le fichier, utiliser… wp_enqueue_script Des fonctions sont utilisées pour enregistrer et charger des scripts.

Assurez-vous d’utiliser… wp_enqueue_script Lorsque vous configurez votre projet, vous pouvez définir des dépendances à l’aide du troisième paramètre, par exemple en indiquant que votre code nécessite jQuery. Pour les scripts spécifiques à WooCommerce, il est parfois possible de dépendre d’autres bibliothèques ou fonctionnalités supplémentaires. wc-add-to-cart-variation(Dédié aux produits personnalisables) Ou wc-checkout(Dédié à la page de paiement.) Utilisé pour effectuer le paiement. wp_localize_script Avec cette fonction, vous pouvez transmettre en toute sécurité des variables PHP (telles que l’URL d’AJAX ou l’adresse du site) à votre fichier JavaScript.

PHP
function my_theme_wc_scripts() {
wp_enqueue_script(
'`'my-woocommerce-script'`,
`get_template_directory_uri()` . 'https://www.likacloud.com/js/my-woocommerce.js',
array( 'jquery', 'wc-add-to-cart-variation' ), // Dépendances
'1.0.0',
true // Chargement dans le pied de page
);
`wp_localize_script('my-woocommerce-script', 'myWooParams', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_wc_scripts' );