WooCommerce donne à chaque opérateur de site web la liberté de construire une plateforme de commerce électronique, et de concevoir une interface et des fonctionnalités qui correspondent au ton de la marque, d'utiliser l'interface de l'entreprise et d'utiliser la technologie de l'Internet.sous-thèmeC'est une méthode très pratique.sous-thèmeIl vous donne la liberté de personnaliser les styles et conserve toutes les modifications lorsque le thème est mis à jour. Cet article vous permettra de découvrir le fonctionnement pratique des thèmes enfants de WooCommerce, de la création à l'application, étape par étape.

Qu'est-ce qu'un sous-thème ?

Un thème enfant est une extension basée sur le thème principal (parent) qui hérite de toutes les fonctionnalités du thème principal et vous permet d'ajouter ou de modifier le code, les styles et les fichiers de modèles qu'il contient. De cette manière, le thème parent est mis à jour sans affecter les personnalisations que vous avez effectuées.

Pour utiliser une analogie : le thème parent est comme une maison toute faite, et le thème enfant est la maison que vous redécorez pour l'adapter à votre style.

Etapes pour créer un thème enfant WooCommerce

étape 1 : Création d'un dossier sous-thème

Dans le site WordPress /wp-content/themes/ créer un nouveau dossier appelé par exemple my-woocommerce-child. Ce dossier est l'emplacement de votre thème enfant.

étape 2 : Ajouter le fichier de feuille de style style.css

Dans le dossier du thème enfant, créez un nouveau fichier style.css papiers

et ajouter ce qui suit :

/* Nom du thème : My WooCommerce Child
Nom du thème : My WooCommerce Child
Modèle : storefront
Version : 1.0
*/

Parmi ceux-ci Modèle doit correspondre au nom du dossier du thème parent que vous utilisez actuellement (par exemple, si vous utilisez un thème Storefront, écrivez vitrine).

étape 3 : Ajouter le fichier functions.php

Afin de charger correctement les styles du thème parent, vous devez créer un fichier functions.php et ajoutez le code suivant :

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' ) ;
function my_child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ) ;
}

Ceci complète la structure de base du sous-thème.

Activation des sous-thèmes

Une fois créé, connectez-vous WordPress Backend, allez dans "Appearance > Themes", vous verrez le thème "My WooCommerce Child", cliquez sur "Enable" pour terminer l'activation du thème enfant. pour activer le thème enfant.

Si le thème enfant est correctement configuré, le site ne changera pas du tout, mais vous serez désormais libre de modifier le code sans craindre que le thème parent ne soit mis à jour pour l'écraser.

Pratique 1 : style de page produit personnalisé

Page produit WooCommerceLa mise en page par défaut d'un thème peut ne pas correspondre à votre style de marque. Vous pouvez copier la mise en page par défaut du thème parent content-single-product.php à l'emplacement correspondant dans le thème enfant, par exemple :

/my-woocommerce-child/woocommerce/single-product/content-single-product.php

N'hésitez pas à modifier HTML WooCommerce donnera la priorité au chargement de ce fichier dans votre thème enfant par rapport à la version originale du thème parent.

Pratique 2 : modifier les couleurs et les styles de police

Dans la rubrique style.css en ajoutant l'élémentCSS personnalisé.Les effets visuels tels que la couleur, l'espacement et la police peuvent être rapidement ajustés.

.woocommerce .product .price {
  couleur : #e60023 ;
  color : #e60023 ; font-size : 18px ;
}

Ces types de modifications sont s?rs et faciles à réaliser, et peuvent rendre l'ensemble de l'interface de la boutique plus conforme à l'éthique de la marque.

Pratique 3 : ajouter des modules fonctionnels

En plus des modifications de style, vous pouvez également ajouter un nouveau style à la section functions.php Ajoutez quelques petites fonctionnalités au fichier. Par exemple, afficher la balise "Hot" après chaque titre de produit :

add_filter( 'the_title', 'add_hot_label_to_product_title', 10, 2 );
function add_hot_label_to_product_title( $title, $id ) {
    if ( get_post_type( $id ) === 'product' ) {
        $title .= ' ??熱銷';
    }
    return $title;
}

Un morceau de code comme celui-ci peut rendre le titre d'un produit plus attrayant.

Considérations relatives à l'élaboration des sous-thèmes

• Lorsque vous modifiez le modèle, veillez à ce que la structure du fichier WooCommerce soit cohérente, sinon les modifications risquent de ne pas être prises en compte.
• Il n'est pas recommandé de copier trop de fichiers de modèles WooCommerce dans un thème enfant, essayez de les modifier si nécessaire pour la maintenance future.
• Avant chaque modification, n'oubliez passauvegarderafin d'éviter les erreurs de fonctionnement.
• L'utilisation d'un outil de contr?le de version tel que Git pour gérer le contenu des sous-sujets est un excellent moyen de rendre le développement plus efficace.

résumés

Le sous-thème est Personnaliser WooCommerce Apparence du magasinLa méthode la plus fiable. Il vous permet de modifier la structure des pages, de contr?ler les styles et d'étendre les fonctionnalités tout en conservant la liberté de mettre à jour le thème parent. Tant que vous ma?trisez la structure de base et que vous travaillez avec les CSS et les PHPMême des besoins de conception simples peuvent donner à votre boutique WooCommerce un aspect distinctif et professionnel.

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.