Comment modifier la page de la boutique WooCommerce par programmation (CSS et PHP)

Publié: 2020-08-27

Vous cherchez des moyens de personnaliser la page de votre boutique ? Dans ce didacticiel, nous allons vous montrer comment modifier la page de la boutique WooCommerce par programmation en utilisant à la fois PHP et CSS .

Dans toute boutique en ligne, il est crucial de modifier et d'optimiser la page de la boutique pour augmenter vos taux de conversion. La page de la boutique est l'endroit où vous affichez vos produits et elle peut faire ou défaire votre entreprise. Si vous exploitez une boutique WooCommerce, nous vous recommandons fortement de personnaliser la page de la boutique et d'en tirer le meilleur parti. Dans ce guide, nous allons vous montrer comment modifier la page de la boutique WooCommerce par programmation .

Pourquoi est-il important de modifier la page de la boutique dans WooCommerce ?

La page de la boutique est l'une des pages les plus importantes de WooCommerce. C'est là que vous présentez vos produits à vos visiteurs, ce qui peut avoir un effet considérable sur les performances de votre magasin. Une bonne page de boutique peut améliorer l'expérience utilisateur, augmenter les taux de conversion et vous aider à générer l'engagement des utilisateurs. Une mauvaise page de boutique, en revanche, peut faire exactement le contraire et étouffer votre entreprise.

C'est pourquoi vous devez l'optimiser pour maximiser vos ventes . Vous pouvez le faire avec des plugins et des constructeurs de pages, mais si vous avez des compétences en codage, créer votre propre solution est la voie à suivre.

Comment modifier la page de la boutique WooCommerce par programmation

Nous avons vu précédemment différentes méthodes pour personnaliser la page boutique. Cependant, dans ce didacticiel, nous allons nous concentrer sur la façon de modifier la page de la boutique WooCommerce par programme en utilisant un peu de code CSS et PHP. Il convient de noter que dans ce guide, nous travaillerons sur un thème enfant et nous modifierons également le modèle de boutique par défaut de WooCommerce. Nous allons nous concentrer sur les fichiers de modèle WooCommerce et sur certaines références au fichier functions.php du thème enfant.

Dans ce didacticiel, vous apprendrez à modifier la page de la boutique WooCommerce par programmation pour :

  1. Désactiver le modèle de page de boutique WooCommerce par défaut
  2. Personnalisez les en-têtes et le contenu
    1. Produits les plus populaires
    2. Produits les plus vendus
    3. Les mieux notés
    4. Afficher les produits par taxonomies
    5. Personnalisez la page de la boutique WooCommerce dans functions.php
  3. Modifier la mise en page de la boucle des produits et appliquer la feuille de style CSS
    1. Modifier le nombre de colonnes par défaut par ligne
    2. Appliquer le style CSS à la page de la boutique
  4. Modifier les fichiers de boucle de la page de la boutique WooCommerce
    1. Remplacer le texte "vente" par défaut pour un gif animé
    2. Supprimer les options de tri et la pagination

Avant de commencer

Veuillez noter que le guide suivant implique un codage avancé, donc si vous n'avez pas de compétences techniques, nous vous recommandons de suivre cet autre tutoriel à la place.

Avant de commencer, nous vous recommandons également d'installer un thème enfant. Vous pouvez consulter notre guide sur la façon de créer un thème enfant ou utiliser un plugin pour le faire en quelques clics. En plus de cela, comme vous allez modifier les fichiers principaux, c'est une bonne idée de faire une sauvegarde complète de votre site.

Alors maintenant, voyons comment personnaliser la page de la boutique dans WooCommerce avec le codage.

1. Désactiver le modèle de page de boutique WooCommerce par défaut

Pour personnaliser la page boutique, deux approches sont possibles :

  1. Vous pouvez écraser le fichier WooCommerce responsable de l'impression de la page de la boutique
  2. Ajoutez des scripts personnalisés au fichier functions.php de votre thème enfant à l'aide des crochets WC

Vous pouvez modifier le modèle HTML WooCommerce tout comme le fichier functions.php du thème enfant, en écrasant les fichiers principaux pour empêcher la suppression lors d'une mise à jour. Cependant, comme les choses ne fonctionnent pas exactement comme dans le fichier functions.php si WooCommerce décide de mettre à jour ces fichiers, vos personnalisations pourraient ne plus fonctionner.

Mais ce n'est pas inquiétant. WooCommerce en est conscient et met rarement à jour les fichiers de modèle d'une manière qui peut casser vos scripts. Le problème de travailler avec le fichier functions.php est que la page de boutique WooCommerce par défaut s'affichera toujours après l'ajout de vos crochets.

Donc, tout d'abord, vous devez désactiver la page de boutique de modèles WooCommerce par défaut pour créer votre modèle à partir de zéro .

Le fichier archive-product.php

Dans WooCommerce, le fichier responsable de la sortie sur la page de la boutique s'appelle archive-product.php , et vous pouvez le trouver dans le dossier des modèles WooCommerce ( WooCommerce > Templates > archive-product.php ). Modifier la page de la boutique WooCommerce par programme - Désactiver le modèle de page de la boutique

Pour écraser ce fichier, vous devez le copier et le coller dans le dossier WooCommerce de votre thème enfant comme indiqué ci-dessous :

Maintenant, regardons le fichier archive-product.php afin que vous puissiez voir comment WooCommerce affiche la page de la boutique. Pour ce faire, ouvrez votre environnement de développement intégré (IDE) préféré, accédez au dossier des modèles du plugin WooCommerce et ouvrez le fichier. Vous pouvez le modifier et jouer avec, de la même manière que vous pouvez personnaliser n'importe quel autre fichier de modèle de WC.

Avant de faire cela, assurez-vous d'avoir une sauvegarde du fichier d'origine pour annuler toute modification si nécessaire.

Dans le fichier archive-product.php , vous verrez plusieurs fonctions do_action() . Ces fonctions sont utilisées pour créer des crochets WooCommerce actuellement disponibles pour la page de la boutique. Pour désactiver complètement la page boutique WooCommerce, il suffit de supprimer la boucle responsable de l'impression des produits :

 si (wc_get_loop_prop('total')) {
    tandis que (avoir_posts()) {
        la poste();
        faire_action('woocommerce_shop_loop');
        wc_get_template_part('contenu', 'produit');
    }
}

Vous pouvez apporter d'autres modifications ici, mais pour simplifier, nous ne supprimerons que la boucle et laisserons tout le reste tel quel. Si vous décidez d'apporter d'autres modifications, gardez à l'esprit que si vous supprimez certaines des fonctions do_action() , le shortcode correspondant ne fonctionnera plus sur aucune page du site Web.

Après avoir supprimé la boucle d'impression des produits, le fichier archive-product.php ressemblera à ceci :

 défini('ABSPATH') || sortir;
get_header('boutique');
do_action('woocommerce_before_main_content');
si (woocommerce_product_loop()) {
    faire_action('woocommerce_before_shop_loop');
    // ici nous avons supprimé la boucle
    do_action('woocommerce_after_shop_loop');
} autre {
    do_action('woocommerce_no_products_found');
}
do_action('woocommerce_after_main_content');
faire_action('woocommerce_sidebar');
get_footer('boutique');

C'est ça! Vous avez désactivé le modèle de page de boutique par défaut et modifié la page de boutique WooCommerce par programmation ! Vous avez maintenant une page de boutique vide pour que vous puissiez commencer à concevoir la vôtre.

2. Personnalisez les en-têtes et le contenu de la page de la boutique WooCommerce par programmation

Le contenu et les en-têtes peuvent être n'importe quel balisage HTML pouvant inclure des images, des tableaux ou des liens. Ou même quelque chose comme un conteneur vide pour exécuter un fichier JavaScript externe. Pour cela, vous aurez besoin d'une connaissance de base des shortcodes WooCommerce, puisque vous allez les utiliser pour afficher les produits sur la page de la boutique. Si vous n'êtes pas familier avec les shortcodes WC, consultez ce guide.

Maintenant, modifions la page de la boutique WC et affichons les produits les plus populaires, les plus vendus, les mieux notés et les taxonomies. De plus, nous vous montrerons comment ajouter des titres et du contenu en dehors de la boucle.

2.1 Afficher les produits les plus populaires

Pour afficher les produits les plus populaires, vous devez éditer le fichier archive-product.php de votre thème enfant. Tout d'abord, utilisez le shortcode suivant

 [ products orderby="popularity" ]

Là où se trouvait la boucle avant de la supprimer. # afficher les produits les plus populaires : 2 produits sur 2 colonnes

 faire_action('woocommerce_before_shop_loop');
echo '<h1>LE PLUS POPULAIRE !!</h1>' ;
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

Dans le shortcode, vous ajouterez une classe appelée m-popular , que vous pourrez utiliser ultérieurement lors de l'application de styles. Dans l'exemple ci-dessus, nous l'avons configuré pour afficher 2 produits dans une seule ligne de 2 colonnes (columns=”2″ limit=”2″) . Notez que vous ne pouvez pas utiliser de shortcodes ici de la même manière que vous les utilisez dans un article ou une page.

Vous devez utiliser la fonction do_shortcode() pour que les shortcodes fonctionnent. Si tout s'est bien passé, vous devriez maintenant voir ceci sur la page de la boutique : page de boutique personnalisée

2.2 Produits les plus vendus

Une autre façon de personnaliser la boutique WooCommerce par programmation consiste à trier les produits par best-sellers. Pour cela, en plus de faire écho au shortcode, vous ajouterez du contenu à l'aide d'un simple balisage HTML ( <h1> ). Ici, vous pouvez ajouter tout autre type de contenu correspondant au format HTML approprié.

Affichons les produits les plus vendus, cette fois dans une mise en page de 2 lignes et 3 colonnes. Pour ce faire, collez simplement ceci juste après la echo do_shortcode() que vous avez insérée à l'étape 2.1 précédente :

 echo '<h1>Meilleures ventes</h1>' ;
do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

Et ce que vous obtenez est ceci: page de boutique personnalisée Si vous souhaitez uniquement ajouter les meilleures ventes au lieu des produits les plus populaires, remplacez simplement la ligne echo de 2.1 par celle de 2.2.

2.3 Produits les mieux notés

Maintenant, jouons un peu plus avec les shortcodes et affichons les produits les mieux notés. Cette fois, nous allons utiliser un shortcode sans plus d'attributs qu'une classe.

 echo '<h1>Les mieux notés</h1>' ;
do_shortcode('[ top_rated_products class="t-rated" ]');

Voyons ce qui se passe après ceci : page de boutique personnalisée Comme vous pouvez le constater, la mise en page par défaut de WooCommerce comporte 4 colonnes. Laissons ça comme ça pour l'instant, on y reviendra plus tard.

2.4 Afficher les produits par taxonomies sur la page boutique

En plus d'afficher les produits les plus vendus ou les mieux notés, vous pouvez également les afficher par taxonomies. Par exemple, le code suivant imprimera des produits pour les catégories Affiches et Vêtements, en utilisant les mêmes attributs que vous avez utilisés auparavant, mais en modifiant le nombre de colonnes à 5.

 echo '<h1>Taxonomie des vêtements :</h1>' ;
do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Taxonomie des affiches :</h1>' ; echo '<h2>Apportez les meilleures affiches à votre mur</h2>' ; do_shortcode('[ products category="Posters" limit="4" class="t-posters" ]');

Et voici à quoi votre archive-product.php devrait ressembler maintenant :

 <header class="woocommerce-products-header">
       <h1 class="woocommerce-products-header__title page-title"></h1>	
</header>
<?php
si (woocommerce_product_loop()) {
	do_action( 'woocommerce_before_shop_loop' );		
	
	echo '<h1>LE PLUS POPULAIRE !!</h1>' ;
        do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); echo '<h1>Meilleures ventes</h1>' ; do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]'); echo '<h1>Les mieux notés</h1>' ; do_shortcode('[ top_rated_products class="t-rated" ]'); echo '<h1>Taxonomie des vêtements :</h1>' ; do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Taxonomie des affiches :</h1> ; echo '<h2>Apportez les meilleures affiches à votre mur</h2>' ; do_shortcode('[ products category="Posters" columns="2" limit="4" class="t-posters" ]'); do_action( 'woocommerce_after_shop_loop' ); } else { do_action( 'woocommerce_no_products_found' ); } do_action( 'woocommerce_after_main_content' ); do_action( 'woocommerce_sidebar' ); get_footer( 'boutique' );

À ce stade, vous devriez être en mesure de comprendre comment utiliser tous les codes abrégés WooCommerce et leurs attributs pour créer une page de boutique personnalisée pouvant répondre à toutes les exigences de conception.

2.5 Personnaliser la page de la boutique WC dans functions.php

Si vous souhaitez personnaliser la page de la boutique WooCommerce par programme, vous pouvez également modifier le fichier functions.php . Pour le contenu en dehors de la boucle de produits, vous pouvez utiliser certains des crochets vus dans le fichier archive-product.php , en les exécutant à partir du fichier functions.php du thème enfant. De cette façon, vous vous assurez que vos scripts fonctionneront toujours même si WC décide de mettre à jour ses fichiers de modèles.

Pour cet exemple, ajoutons un en-tête personnalisé avec un titre, un sous-titre, une description et une bannière. Collez ce script dans le fichier functions.php du thème enfant :

 add_action('woocommerce_before_shop_loop','shop_main_heading');
fonction shop_main_heading(){
	$contenu = '';
	$content.='<h1>Bienvenue sur ma fabuleuse page boutique !</h1>'; 
	$content.='<h2>Construit avec amour par moi-même</h2>' ;
	$content.='<p>Merci d'être passé et de visiter la page de ma boutique en ligne, veuillez parcourir vos produits les plus appréciés et les acheter tous</p>' ;
	$content.='<img src="https://www.carpetright.co.uk/globalassets/static-pages/useful-links/samples/sample-banner.jpg"/>' ;
	echo $contenu;
}

Voici à quoi ressemblera votre page de boutique : page de boutique personnalisée De la même manière, vous pouvez utiliser le crochet woocommerce_after_shop_loop pour afficher du contenu à la fin de la page de la boutique.

3. Modifiez le nombre de produits par ligne et appliquez une feuille de style CSS à la page de la boutique WC

À présent, vous devriez être en mesure d'afficher les produits, de les trier par vedette, taxonomies, meilleures ventes et de toute autre manière que vous souhaitez en utilisant les codes abrégés WooCommerce. En plus de cela, vous devriez pouvoir insérer n'importe quel type de contenu à n'importe quel endroit de votre choix sur la page de votre boutique. Et si vous pouviez aller encore plus loin et faire passer votre page boutique au niveau supérieur ? Vous pouvez modifier la mise en page du modèle et ajouter des styles CSS pour personnaliser encore plus votre page de boutique WooCommerce par programmation.

3.1 Modifier le nombre de colonnes par défaut par ligne

Si vous spécifiez l'attribut de colonne du shortcode WC, vous pouvez définir le nombre de produits que chaque ligne affichera. De plus, vous pouvez définir le nombre total de produits pour le shortcode avec l'attribut limit :

 [ product orderby=”popularity” columns=”3” limit=”3” ]

Cependant, si vous ne définissez pas l'attribut columns, vous pouvez définir le nombre de produits que vous souhaitez imprimer pour chaque ligne à l'aide de ce script dans le fichier functions.php du thème enfant.

 add_filter('loop_shop_columns', 'loop_columns', 999);
si (!function_exists('loop_columns')) {
    fonction loop_columns() {
        retour 4 ;//4 produits par ligne
    }
}

Cela modifiera le nombre par défaut de produits affichés par ligne uniquement s'il n'y a pas d'attribut de colonne dans le shortcode WooCommerce.

3.2 Appliquer des styles CSS à la page de la boutique

Pour appliquer du CSS à la page de la boutique WooCommerce, vous pouvez simplement ajouter vos scripts dans le fichier modèle comme ceci :

 <style>
* {
    couleur de fond :#a2bcff ;
}
</style>

C'est acceptable pour les petits morceaux de CSS, mais ce n'est pas une pratique recommandée. Pour appliquer le style CSS à la manière de WordPress, vous devez utiliser le crochet wp_enqueue_scripts pour charger vos scripts à partir d'un fichier différent.

Pour cet exemple, nous allons nommer ce fichier shop_style.css et nous le stockerons dans le dossier principal de notre thème enfant, au même niveau de hiérarchie que le fichier style.css par défaut. Après avoir créé ce fichier, collez le script suivant dans votre fichier functions.php :

 add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css' );
fonction quadlayers_enqueue_css(){    
    if( is_shop() ) :
    wp_enqueue_style( 'checkout_style',
        get_stylesheet_directory_uri() . '/shop_style.css'
    );
    fin si;
}

Comme vous pouvez le voir, la if(is_shop()): doit être vraie pour mettre en file d'attente le fichier shop_style.css . Dans ce fichier, vous aurez tous les scripts de style que vous souhaitez appliquer uniquement à la page boutique . Ceci est différent du fichier style.css dans le thème enfant qui appliquera les scripts à l'intégralité de l'interface du site Web. Pour ce guide, nous utiliserons le fichier shop_style.css suivant mais n'hésitez pas à utiliser vos scripts CSS ou à modifier celui-ci :

 div.storefront-sorting:nth-child(2){
	text-align:center;
} 
#main div.storefront-sorting h1{
	style de police : normal ;
}
#main h1,#main h2{
	poids de la police : plus gras ;
	style de police : oblique ;
	text-align:center;
}
#main > .m-popular,#main > .b-sellers,#main > .t-rated,#main > .t-clothing,#main > .t-posters{	
	bordure : solide #b8b8b8 1px ;
	rayon de bordure : 25 px ;
	marge inférieure : 25px ;
	rembourrage haut : 35 px ;	
	rembourrage à gauche : 20 px ;
	rembourrage à droite : 20 px ;	
} 
#main > .m-populaire{
	couleur de fond :#dbad97 ;	
}
#main > .b-vendeurs {
	couleur de fond :#b4e6a3 ;
}
#main > .t-rated {
	couleur de fond :#f0f695 ;	
}
#main > .t-vêtements {
	couleur de fond :#95b4f6 ;	
}
#main > .t-affiches {
	couleur de fond :#c88fe5 ;	
}

Dans le fichier CSS, vous trouverez des sélecteurs contenant des classes personnalisées. Nous les avons créés avant de créer les shortcodes. Par exemple, nous avons ajouté la classe "b-sellers" dans le shortcode comme ceci :

 do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

Ainsi, après avoir ajouté le style CSS à la page de la boutique WooCommerce, vous obtiendrez quelque chose comme ceci (cliquez sur l'image pour la voir en taille réelle) : Cliquez sur l'image pour la voir en taille réelle

Cliquez sur l'image pour la voir en taille réelle.

De plus, gardez à l'esprit que nous avons le thème StoreFront actif et, comme vous le savez peut-être, les sélecteurs CSS peuvent être différents sur chaque site Web même s'ils ont le même thème. Donc, pour que ce fichier fonctionne, vous devrez peut-être modifier les sélecteurs de votre site spécifique.

BONUS : Comment changer le nombre de produits par page

Supposons maintenant que vous souhaitiez modifier le nombre de produits que vous affichez par page sur la page de la boutique. Si vous souhaitez afficher 10 produits par page par exemple, ajoutez simplement le code suivant dans le fichier functions.php :

 add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

function new_loop_shop_per_page( $cols ) {
  $cols = 10 ;
  retourner $cols ;
}

Où $cols contient le nombre de produits par page qui prend la valeur de Options -> Lecture et renvoie le nombre de produits que vous souhaitez afficher sur chaque page.

4. Modifier les fichiers de boucle de la page de la boutique WooCommerce

Jusqu'à présent, nous avons vu comment modifier le fichier de modèle archive-product.php pour personnaliser la page de la boutique WooCommerce par programme. Ce fichier est l'endroit où la boucle WC s'exécute pour afficher tous les produits de la page. Maintenant, ouvrez le dossier du plugin WooCommerce dans l'éditeur de plugin ou votre IDE, et ouvrez le dossier de la boucle. Vous le trouverez au même niveau que le fichier archive-product.php .

Dans le dossier de la boucle, vous trouverez des fichiers que vous pouvez également modifier pour personnaliser encore plus la page de la boutique. Pour écraser ce fichier, vous devez créer un dossier et un fichier clonés dans votre thème enfant. Créez un nouveau dossier appelé loop sous votre dossier WooCommerce précédemment créé.

Après cela, copiez le fichier original sale-flash.php à partir des modèles de plugin et collez-le dans ce dossier de boucle dans votre thème enfant. Nous allons utiliser le fichier sale-flash.php pour ajouter un gif animé à tous les produits en vente. Si vous regardez le fichier, vous verrez qu'il s'agit du script chargé d'afficher le message « VENTE » lorsqu'un produit est en solde.

4.1 Remplacer le texte "vente" par défaut d'un gif animé

Dans cette section, nous allons vous montrer comment désactiver le message de mise en vente par défaut et le remplacer par un gif animé. Vous devez éditer le fichier flash-sale.php de votre thème enfant pour qu'il ressemble à ceci :

 défini('ABSPATH') || sortir;
global $post, $product ;
if ( $product->is_on_sale() ) { 
   $an_gif = '<img src="https://i1.wp.com/tamingchaos.net/wp-content/uploads/2020/04/Sale-Gif.gif" width="100px" height="60px"/ >' ;
   echo $an_gif;
}

Là, vous pouvez remplacer le fichier gif par n'importe quel autre gif que vous aimez.

4.2 Supprimer les options de tri et la pagination

Voyons maintenant comment désactiver le sélecteur "trier par" et la fonctionnalité de pagination sur la page de la boutique WooCommerce. Semblable à ce que vous avez fait avec le fichier sale-flash.php , vous pouvez y parvenir en enregistrant simplement un fichier vide avec le même nom.

Créez les deux fichiers dans le dossier loop et appelez-les orderby.php et pagination.php . Pour désactiver complètement les deux fichiers, vous ne devez mettre que ce script dans chacun des fichiers :

 défini('ABSPATH') || sortir;

Après cela, vous aurez un en-tête et un pied de page plus propres sur la page de votre boutique. En plus de cela, la pagination peut ne pas être très utile puisque vous affichez un grand nombre de produits. modifier la page de la boutique WooCommerce par programmation - Tri et pagination Notez que dans le fichier sale-flash.php , nous avons supprimé le comportement par défaut de WooCommerce et ajouté le nôtre affichant un gif animé. C'est une tâche très basique, mais cette technique offre un large éventail de possibilités pour les développeurs avancés.

NOTES FINALES

  • Les fichiers de modèle WC du thème enfant n'empêchent pas les écrasements si WooCommerce décide de publier une mise à jour des modèles. Cependant, cela arrive rarement.
  • Ce sont des exemples de scripts et ne doivent pas être mis en production, ils sont uniquement destinés à des fins didactiques.

Bonus : affichez les catégories sur la page de la boutique WooCommerce

Enfin, voyons comment vous pouvez ajouter des catégories à la page de la boutique WooCommerce en utilisant un peu de code. Cette méthode est recommandée pour les utilisateurs ayant des compétences en codage. Outre PHP, il est recommandé de connaître également un peu de CSS pour pouvoir styliser le code.

NOTE : Avant de commencer, assurez-vous de sauvegarder votre site et de créer un thème enfant si vous n'en avez pas déjà.

Ajouter des catégories à la page Boutique

Dans votre tableau de bord, allez dans Apparence > Éditeur de thème et ouvrez le fichier functions.php du thème enfant. Cliquez sur le fichier functions.php dans la barre latérale de droite Fichiers de thème et collez les scripts suivants pour ajouter vos fonctions personnalisées.

La fonction ci-dessous ajoutera vos catégories de produits avant de charger les autres éléments de votre page Boutique. Cela signifie que les acheteurs verront toutes vos catégories de produits avant le catalogue de produits.

 function product_subcategories( $args = array() ) {
$parentid = get_queried_object_id();

$args = tableau(
'parent' => $identifiant parent
);

$terms = get_terms( 'product_cat', $args );

si ( $termes ) {
echo '<ul class="product-cats">' ;

foreach ( $termes comme $terme ) {
echo '<li class="category">' ; 
woocommerce_subcategory_thumbnail( $term );
echo '<h2>' ;
echo '<a href="' . esc_url( get_term_link( $term ) ). '" class="' . $term->slug . '">';
echo $terme->nom ;
echo '</a>';
echo '</h2>' ;
echo '</li>' ;
}

echo '</ul>';
}

}

add_action( 'woocommerce_before_shop_loop', 'product_subcategories', 50 );

Cette fonction ajoutera vos catégories à la page WooCommerce Shop. Cependant, gardez à l'esprit qu'ils peuvent ne pas ressembler exactement à ce que vous souhaitez, vous devrez donc styliser la nouvelle section des catégories avec un peu de CSS. Pour plus d'informations à ce sujet, consultez notre article sur la façon d'afficher et de styliser les catégories sur la page de la boutique.

Conclusion

Dans l'ensemble, la page de la boutique est extrêmement importante et peut faire ou défaire votre boutique. C'est pourquoi si vous avez des compétences en codage, nous vous recommandons de modifier la page de la boutique WooCommerce par programmation et de l'optimiser pour augmenter vos taux de conversion.

Dans ce guide, nous vous avons montré comment ajouter, supprimer et personnaliser différents aspects de votre boutique. Cependant, ce ne sont que quelques exemples et idées qui pourraient vous aider à trouver de l'inspiration et à faire passer votre boutique au niveau supérieur. Il est maintenant temps pour vous de jouer et de développer vos personnalisations.

Pour plus de guides pour personnaliser votre boutique WooCommerce, nous vous recommandons de consulter :

  • Ajouter au panier WooCommerce AJAX
  • Comment ajouter des champs personnalisés à la page de paiement ?
  • WooCommerce ajoute au panier la fonction par programmation

Enfin, si vous souhaitez connecter Facebook Shop à WooCommerce, vous devriez jeter un œil à ce guide complet. Avez-vous personnalisé votre boutique en ligne ? Qu'as-tu changé ? Si vous avez des questions, laissez un commentaire ci-dessous et nous ferons de notre mieux pour vous aider ! Vous pouvez également consulter le code complet dans Github.