Home » WooCommerce » Comment ajouter du texte sous la liste des produits dans les pages de catégories de WooCommerce

Comment ajouter du texte sous la liste des produits dans les pages de catégories de WooCommerce

Il existe un moyen très répandu d’améliorer la visibilité des catégories de produits dans Google et d’autres moteurs de recherche. C’est très simple : les pages des catégories ont besoin d’un contenu plus utile pour se démarquer.

Par exemple, si vous possédez un magasin de vêtements et que vous souhaitez mettre en valeur la catégorie des accessoires, vous pouvez intégrer des conseils et des astuces sur la manière d’associer des vêtements à différents accessoires. Ajoutez ensuite ce tutoriel à la page de la catégorie Accessoires.

L’idée est claire, mais il y a un problème. Ce type de contenu doit être long, et un contenu long n’aura pas fière allure s’il est ajouté au champ de description régulier dans la catégorie de produit de WooCommerce. C’est pourquoi nous allons ajouter ce texte au bas de la page de la catégorie, juste en dessous de la liste des produits. De cette façon, il sera visible pour les lecteurs, mais il ne sera pas gênant pour ceux qui parcourent la liste des produits à la recherche d’un article spécifique.

Comment ajouter un champ de texte supplémentaire au formulaire de catégorie de produit de WooCommece ?

Afin d’ajouter un champ supplémentaire au champ Catégorie de produit dans WooCommece, allez dans Apparence >> Editeur de fichiers de thème (ou Outils >> Editeur de fichiers de thème) dans le panneau d’administration de WordPress. Cliquez ensuite sur le fichier functions.php sur le côté droit de l’écran.

Une fois que vous avez ouvert le fichier functions, faites défiler jusqu’au bas de son contenu et ajoutez ce code :

function rocksolid_edit_bottom_description($term) {
	$bottom_description = get_term_meta($term->term_id, 'bottom_description', true);
	$settings = array( 'media_buttons' => false );
    ?>
 <tr class="form-field">
        <th scope="row" valign="top"><label for="bottom_description">Bottom description</label></th>
        <td>
            <?php wp_editor( $bottom_description , 'bottom_description', $settings ); ?>
        </td>
    </tr>
    <?php
}
add_action('product_cat_edit_form_fields', 'rocksolid_edit_bottom_description', 10, 1);

function rocksolid_save_bottom_description($term_id) {
	$bottom_description = filter_input(INPUT_POST, 'bottom_description');
	update_term_meta($term_id, 'bottom_description', $bottom_description);
}
add_action('edited_product_cat', 'rocksolid_save_bottom_description', 10, 1);

Ce que fait ce code :

  1. La première fonction rocksolid_edit_bottom_description ajoute un champ WYSIWYG nommé Bottom description au champ Product Category dans WooCommerce.
  2. La deuxième fonction rocksolid_save_bottom_description enregistre la valeur du texte de la description du bas dans la base de données de WordPress.

Après avoir ajouté ce code au fichier functions.php et sauvegardé les modifications, vous trouverez un nouveau champ de texte riche dans le formulaire d’édition de la catégorie de produit de WooCommerce. Comme ici :

how to add additional fields to woocommerce cateogry form

Maintenant que le champ est prêt, nous devons afficher le contenu dans le site web actuel.

Comment afficher du texte sous la liste des produits dans les pages de catégories de WooCommerce

Puisque nous avons déjà un contenu prêt à être affiché sous la liste des produits, rendons-le visible pour les visiteurs de la boutique.

Best WordPress hosting 2024

Une fois de plus, ouvrez le fichier function.php du thème WordPress comme précédemment, et ajoutez ce code à la fin du fichier :

function rocksolid_show_bottom_description(){
	$bottom_description = get_term_meta(get_queried_object_id(), 'bottom_description', true);	
	if (!empty($bottom_description)) {
		echo '<div class="bottom-category-description">'.nl2br($bottom_description).'</div>';
	}	
}
add_action( 'woocommerce_after_shop_loop', 'rocksolid_show_bottom_description' );

Cette fonction prend le contenu du champ Bottom Description dans le formulaire Woo Category, et l’affiche sous la liste des produits dans les pages WooCommerce Product Cateogory. Comme ici :

woocommerce add seo description under products in category pages

Si vous souhaitez ajouter un style supplémentaire à ce texte, vous pouvez ajouter un style css à la classe nommée bottom-category-description.

C’est tout – maintenant vous avez un champ pour ajouter du texte supplémentaire au formulaire de catégorie de WooCommerce, et vous pouvez afficher ce texte sous la liste des produits dans les pages de catégorie sans aucun plugin supplémentaire.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK