Share
Ce que vous allez créerWooCommerce vous donne quelques options pour ce que vous pouvez afficher sur vos pages d'archives:
Lorsque je crée un magasin, je sélectionne normalement la troisième option: produits et catégories / sous-catégories. Cela signifie que les visiteurs de mon magasin peuvent sélectionner des produits directement à partir de la page d'accueil ou affiner leur recherche en accédant à une archive de catégories de produits..
Cependant, cette approche a échoué: elle affiche les catégories / sous-catégories ensemble, sans séparation entre les deux. Cela signifie que si les images de votre produit ont des dimensions différentes de celles de votre produit, la mise en page peut paraître un peu en désordre. Même si vos images ont la même taille, si l’une des lignes de la page d’archive comprend à la fois des catégories et des produits, l’absence de bouton "Ajouter au panier" pour les catégories rend cette ligne désordonnée, car tous ses éléments ne possèdent pas les mêmes propriétés. mêmes dimensions.
Dans ce tutoriel, je vais vous montrer comment afficher les catégories dans une liste séparée avant d'afficher les produits..
Pour ce faire, nous suivrons quatre étapes:
Mais avant de commencer, vous aurez besoin d’une installation WooCommerce avec l’ajout de certains produits et la configuration de catégories et de sous-catégories de produits..
Pour suivre, vous aurez besoin de:
Voyons ce que WooCommerce nous donne par défaut.
J'ai commencé par ajouter des images à mes catégories et sous-catégories de produits, car les données factices WooCommerce ne les incluent pas. J'ai simplement utilisé une image de l'un des produits de chaque catégorie ou sous-catégorie, comme vous pouvez le voir sur la capture d'écran:
Voyons maintenant comment WooCommerce affiche les catégories de produits et les produits dans les pages d'archives..
Si vous ne l'avez pas déjà fait, allez à WooCommerce> Paramètres, sélectionnez le Des produits onglet, puis choisissez le Afficher option. Pour chacun des Affichage de la page de magasin et Affichage de la catégorie par défaut options, sélectionnez Montrer les deux:
Clique le Sauvegarder les modifications bouton pour enregistrer vos paramètres et visiter la page de la boutique de votre site. Le mien ressemble à ceci:
Il se trouve que, étant donné que j'ai trois catégories de produits et que les images de mes catégories ont la même taille que celles de mes produits, le résultat est plutôt soigné. Mais voici l'une des archives de catégories de produits:
Comme cette catégorie comporte deux sous-catégories, le premier produit est affiché à côté, dans une grille de trois éléments. Je souhaite mettre davantage en évidence mes catégories et sous-catégories et les présenter simplement séparément des listes de produits. Alors faisons ça.
La première étape consiste à identifier comment WooCommerce génère les catégories et sous-catégories. Alors, explorons le code source de WooCommerce pour trouver la fonction correspondante.
Le fichier utilisé par WooCommerce pour afficher les pages d'archive est archive-product.php, qui est dans le des modèles dossier.
Dans ce fichier, vous pouvez trouver ce code, qui affiche les catégories et les produits:
Donc il y a un woocommerce_product_subcategories () fonction qui sort les catégories ou les sous-catégories avant d'exécuter la boucle qui sort les produits.
La fonction est connectable, ce qui signifie que nous pouvons la remplacer dans notre thème. Malheureusement, cela ne fonctionne pas très bien car WooCommerce a un style intégré pour effacer les éléments, ce qui apparaîtrait au début d'une ligne avec l'affichage par défaut..
Ainsi, au lieu de cela, nous désactivons l'affichage des catégories et des sous-catégories sur nos pages d'archives, afin que seuls les produits soient affichés. Ensuite, nous allons créer une nouvelle fonction qui sort les catégories de produits ou les sous-catégories et la relier à la woocommerce_before_shop_loop action, en s'assurant que nous utilisons une priorité élevée pour qu'il se déclenche après les fonctions déjà liées à cette action.
Remarque: WooCommerce ajoutant des effacements à chaque troisième liste de produits, nous ne pouvons pas utiliser le woocommerce_product_subcategories () fonction ou une version modifiée de celle-ci pour afficher les catégories. En effet, cela effacera les troisième, sixième (et ainsi de suite) catégories ou produits répertoriés, même lorsque nous utilisons cette fonction pour afficher les catégories séparément. Nous pourrions essayer de passer outre cela, mais il est plus simple d'écrire notre propre fonction.
Créons donc un plugin qui fait ça.
Dans ton wp-content / plugins répertoire, créez un nouveau dossier et attribuez-lui un nom unique. J'appelle le mien tutsplus-separé-produits-catégories-en-archives. À l'intérieur de cela, créez un nouveau fichier, à nouveau avec un nom unique. J'utilise le même nom: tutsplus-separ-products-categories-in-archives.php.
Ouvrez votre fichier et ajoutez-y ce code:
Vous voudrez peut-être modifier les détails de l'auteur car il s'agit de votre plugin que vous écrivez. Enregistrez votre fichier et activez le plugin via l'administrateur WordPress.
Ecrire notre fonction
Maintenant écrivons la fonction. Mais avant de commencer, désactivez les listes de catégories dans les écrans d’administrateur. Aller à WooCommerce> Paramètres, sélectionnez le Des produits onglet, puis choisissez le Afficher option. Pour chacun des Affichage de la page de magasin et Affichage de la catégorie par défaut options, sélectionnez Montrer les produits. Enregistrez vos modifications.
Votre page de magasin ressemblera à quelque chose comme ceci:
Dans votre fichier plugin, ajoutez ceci:
function tutsplus_product_subcategories ($ args = array ()) add_action ('woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50);Ajoutez maintenant ce code dans la fonction:
$ parentid = get_queried_object_id (); $ args = array ('parent' => $ parentid); $ terms = get_terms ('product_cat', $ args); if ($ terms) echo '
Regardons ce que cette fonction fait:
Accentsconagua
$ parentid.get_terms () pour identifier les termes avec l'élément actuellement interrogé comme parent. S'il s'agit de la page principale de la boutique, les catégories de premier niveau seront renvoyées. s'il s'agit d'une archive de catégorie, elle renverra des sous-catégories.pour chaque boucle et un ul élément.li élément, puis affiche l'image de la catégorie à l'aide de woocommerce_subcatgeory_thumbnail (), suivi du nom de la catégorie dans un lien vers ses archives.Enregistrez maintenant votre fichier et actualisez la page principale de la boutique. Le mien ressemble à ceci:
Les catégories sont affichées, mais elles nécessitent un certain style. Faisons ça ensuite.
Pour que nous puissions ajouter un style, nous avons besoin d’une feuille de style à l’intérieur de notre plugin, que nous devrons mettre en file d'attente..
Dans votre dossier de plug-in, créez un dossier appelé css, et à l'intérieur de cela, créez un fichier appelé style.css.
Maintenant, dans votre fichier de plugin, ajoutez ceci au dessus de la fonction que vous avez déjà créée:
function tutsplus_product_cats_css () / * enregistrer la feuille de style * / wp_register_style ('tutsplus_product_cats_css', plugins_url ('css / style.css', __FILE__)); / * met en file d'attente la feuille de style * / wp_enqueue_style ('tutsplus_product_cats_css'); add_action ('wp_enqueue_scripts', 'tutsplus_product_cats_css');Ceci met correctement la feuille de style que vous venez de créer dans la file d'attente.
Ouvrez maintenant votre feuille de style et ajoutez le code ci-dessous. WooCommerce utilise le style d'abord mobile, c'est ce que nous allons aussi utiliser.
ul.product-cats li list-style: none; marge gauche: 0; marge inférieure: 4.236 m; text-align: center; position: relative; ul.product-cats li img margin: 0 auto; Écran @média et (largeur minimale: 768 pixels) ul.product-cats marge gauche: 0; clarifier les deux; ul.product-cats li width: 29.4117647059%; float: gauche; marge droite: 5,88823529412%; ul.product-cats li: nième de type (3) margin-right: 0;
J'ai copié les largeurs et marges exactes du style utilisé par WooCommerce.
Maintenant, vérifiez à nouveau votre page principale de la boutique. Voilà le mien:
Ici se trouve le La musique archive de catégorie:
Et voici à quoi cela ressemble sur des écrans plus petits:
Les catégories de produits sont une fonctionnalité intéressante de WooCommerce, mais leur affichage n’est pas toujours idéal. Dans ce didacticiel, vous avez appris à créer un plug-in permettant de créer des catégories de produits ou des sous-catégories séparément des listes de produits. Vous avez ensuite stylisé vos listes de catégories..
Vous pouvez utiliser ce code pour générer une liste de catégories ou de sous-catégories ailleurs sur la page (par exemple, sous les produits), en reliant la fonction à un autre point d’action dans le fichier de modèle WooCommerce..
Si vous exploitez actuellement un magasin que vous souhaitez étendre ou si vous recherchez des plugins supplémentaires à étudier en ce qui concerne WooCommerce, n'hésitez pas à consulter les plugins disponibles sur Envato Market..
