[Résolu] Changer les balises HTML des produits sur la page Boutique (Créer un compte)

  • WordPress :5.4
  • Statut : résolu
12 sujets de 1 à 12 (sur un total de 12)
  • Auteur
    Messages
  • #2352808
    Zelph14
    Participant
    Initié WordPress
    11 contributions

    Ma configuration WP actuelle :

    • – Version de WordPress : 5.5.1
    • – Version de PHP/MySQL : 7.3.20 / 5.5.5
    • – Thème utilisé : OceanWP Child
    • – Thème URI : https://oceanwp.org/
    • – Extensions en place : AddToAny Share Buttons (1.7.42), Classic Editor (1.6), Conditionally display featured image on singular pages and posts (2.3.1), Easy Table of Contents (2.0.11), Elementor (3.0.6), Forget About Shortcode Buttons (2.1.2), Forum_wordpress_fr (4.2), Inline Spoilers (1.5.1), Insert Headers and Footers (1.4.6), Jetpack by WordPress.com (8.9), Ocean Extra (1.6.5), Redirection (4.8), Sticky Menu (or Anything!) on Scroll (2.21), Visual Portfolio (2.5.0), WooCommerce (4.4.1), WooCommerce Stripe Gateway (4.5.2), WPForms Lite (1.6.2.2), WP Maintenance (5.1.0), Yoast SEO (14.9)
    • – Adresse du site :
    • – Nom de l’hébergeur : Apache

    Bonjour,

    Sur ma page Boutique, le titre “Boutique” est balisé en H1, mais mes produits sont simplement introduits par un lien. Je souhaiterais donner la balise H2 à tous les produits qui se situent sur ma page boutique, de façon à optimiser mon référencement. Je voudrais également conserver ce titre H2 en lien cliquable vers mon produit

    Quelqu’un saurait m’aider ?

    Merci d’avance

    Bonne soirée

    • Ce sujet a été modifié le il y a 1 semaine par Zelph14.
    #2352812
    ferman
    Participant
    Maître WordPress
    2802 contributions

    Bonjour,

    Vous avez bien vérifié? Normalement, par défaut, les produits sur la page boutique ont la balise h2. Si ce n’est ps le cas pour vous  c’est que quelque chose a été modifié.

    La fonction pour mettre la balise h2 pour les produits est la suivante à mettre dans functions.php de votre thème enfant.

    if ( ! function_exists( 'woocommerce_template_loop_product_title' ) ) {
    
    	/**
    	 * Show the product title in the product loop. By default this is an H2.
    	 */
    	function woocommerce_template_loop_product_title() {
    		echo '<h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h2>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
    	}
    }

    La fonction d’origine se trouve dans woocommerce/includes/wc-template-functions.php

    #2352868
    Zelph14
    Participant
    Initié WordPress
    11 contributions

    Bonjour ferman et merci pour votre réponse.

    J’ai copié et collé le code que vous m’avez donné. Cependant, je n’ai malheureusement pas constaté de changement.

    Le titre de mes produits est toujours sous forme de lien, sans titrage, au sein de ma page Boutique.

    #2352869
    ferman
    Participant
    Maître WordPress
    2802 contributions

    Bonjour,

    Avez-vous vérifié avec l’inspecteur de votre navigateur ? Normalement ça doit fonctionner (si les titres sont bien générés par woocommerce). Est-ce le cas? Sion il serait intéressant qu’on puisse voir la boutique de votre site. En vrai; pas une copie d’écran.

    #2352870
    Zelph14
    Participant
    Initié WordPress
    11 contributions

    Bonjour,

    Oui, j’ai vérifié. Le produit est en balise “a href” simple. Malheureusement je ne peux pas vous communiquer l’adresse du site sur lequel je travaille.

    Par contre, je me demandais si l’emplacement du code dans le fichier functions.php pouvait avoir une influence sur le résultat ?

    #2352871
    ferman
    Participant
    Maître WordPress
    2802 contributions

    Par contre, je me demandais si l’emplacement du code dans le fichier functions.php pouvait avoir une influence sur le résultat ?

    Non, vous vous contentez de le mettre à la suite de ce que vous avez déjà dans le fichier. Que vous n’ayez pas la balise h2 d’origine est déjà surprenant mais que vous ne puissiez pas la mettre avec cette fonction l’est encore plus.

    Avez-vous bien placé le titre avec woocommerce et non elementor ou un autre plugin? Quelle classe avez-vous pour ce titre? A titre d’information j’ai:

    “<h2 class=”woocommerce-loop-product__title”>”.  Quelle classe avez-vous pour votre <a class=” ???” href =?

    #2352945
    Zelph14
    Participant
    Initié WordPress
    11 contributions

    Merci pour votre aide.

    Oui, le titre a été placé automatique avec Woocommerce, je n’ai touché à rien.

    Je ne suis pas très à l’aise avec l’HTML, mais je n’ai pas de h2 dans le code.

    Je vous laisse en pièce-jointe une capture d’écran de mon inspecteur d’élément.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2352969
    ferman
    Participant
    Maître WordPress
    2802 contributions

    Bon, c’est effectivement différent avec le thème Ocean-wp. En premier, je contacterais le support du thème pour leur poser la question. Pour eux la modification à faire est simple. Autrement il existe plusieurs solutions. Je crois que la meilleure est la suivante: dans votre thème enfant, vous copiez le dossier woocommerce du thème et vous enlevez tout sauf le fichier owp-archive-product.php. Vous éditez ce fichier dans notepad ++ et modifiez les lignes 52 à 65 de la manière ci-dessous (le mieux est de remplacer ces lignes en copiant-collant le code). Normalement ça doit fonctionner.

    // Title.
    	if ( 'title' === $element ) {
    
    		do_action( 'ocean_before_archive_product_title' );
    
    		echo '<li class="title">';
    			do_action( 'ocean_before_archive_product_title_inner' );
    			echo '<a href="' . esc_url( get_the_permalink() ) . '"><h2>' . esc_html( get_the_title() ) . '</h2></a>';
    			do_action( 'ocean_after_archive_product_title_inner' );
    		echo '</li>';
    
    		do_action( 'ocean_after_archive_product_title' );
    
    	}

    Mais posez d’abord la question au support  Ocean-wp. Ce serait beaucoup mieux qu’ils proposent leur solution.

    #2353268
    ferman
    Participant
    Maître WordPress
    2802 contributions

    Bonjour,

    Si vous êtes toujours dans les environs, juste pour vous donner la réponse de OceanWP que j’ai contactés. Après essai, je pense que la meilleure méthode et la plus simple est celle que je vous avais donnée dans la réponse précédente.

    #2353308
    Zelph14
    Participant
    Initié WordPress
    11 contributions

    Bonjour,

    Merci pour votre réponse. Malheureusement je ne sais pas comment réaliser la manipulation de votre message du 8 septembre. Je ne sais pas où se trouvent les fichiers WooCommerce et j’ai peur de faire une erreur irréparable dans les codes.

    J’ai essayé le code fournit par l’assistance WooCommerce dans mon fichier functions.php mais il génère un message d’erreur.

    Edit : pour finir, j’ai bien réussi à obtenir un titre balisé h2 grâce au code qu’ils vous ont fourni. Néanmoins, n’étant pas à l’aise avec l’HTML et le CSS, pouvez-vous m’expliquer comment vous avez réussi à supprimer le titre par défaut ? Également, le code fixe le titre au dessus du produit en grande taille de police, est-il possible de modifier son emplacement et sa taille en le mettant en dessous de l’image du produit ?

    Dîtes moi si ce n’est pas clair 🙂

    • Cette réponse a été modifiée le il y a 1 jour et 12 heures par Zelph14.
    #2353311
    ferman
    Participant
    Maître WordPress
    2802 contributions

    Bonjour,

    Malheureusement je ne sais pas comment réaliser la manipulation de votre message du 8 septembre. Je ne sais pas où se trouvent les fichiers WooCommerce et j’ai peur de faire une erreur irréparable dans les codes.

    Il fallait demander, c’est très simple et comme avez un thème enfant, vous ne pouvez pas faire d’erreur irréparable dans les codes.

    Ce n’est pas l’assistance Woocommerce qui a fourni le code mais le support OceanWP. C’est eux qui déterminent (personnalisent ) le format original du titre; (d’origine, chez Woocommerce,  ce titre est  par défaut en h2).

    Je continue de penser que la meilleure méthode est celle qui consiste à dupliquer un fichier de OceanWp dans le thème enfant et à le modifier légèrement. Pour cela pas besoin de connaître PHP, ou CSS ou HTML…etc. Il faut simplement savoir copier/coller. Je vous détaille la procédure:

    1.  Créer un dossier dans votre thème enfant et le nommer woocommerce (1 dans la pièce jointe).
    2. Aller dans les dossiers du thème parent (vous savez faire ça?, sinon demandez) ou alors pour être encore plus sûre et encore plus simple, vous téléchargez OceanWP (pas depuis votre tableau de bord, bien sûr), et vous cherchez dans les dossiers du thème le dossier woocommerce (2 dans la pièce jointe).
    3. Vous copiez (sans l’ouvrir) le fichier owp-archive-product  (3 dans la pièce jointe) et le collez dans le dossier woocommerce du thème enfant et là vous remplacez la partie “TITLE” comme dit précédemment.

    Vous ne pouvez pas faire d’erreur et de toute façon s’il y a le moindre problème, vous demandez.

    Si vous préférez travailler dans  functions.php. Voici le code que j’avais préparé. Il ressemble au code fourni par OceanWP (normal) mais: il met le nouveau titre sous l’image et il supprime l’ancien. Cette partie n’a pas été facile à trouver car dans le tableau de bord OceanWP (personnaliser), vous avez la possibilité de placer le titre sous ou après  le prix, sous ou après la catégorie etc. Donc pour que l’ancien titre disparaisse dans tous les cas il faut  des CSS un peu spéciales. Je passe sur les détails sauf si ça vous intéresse.

    function titleh2(){
    // Title.
    	
    		echo '<li class="title1">';			
    		echo '<a href="' . esc_url( get_the_permalink() ) . '"><h2>' . esc_html( get_the_title() ) . '</h2></a>';			
    		echo '</li>';		
    		echo '<style> li.title {display:none;}
    		ul.woo-entry-inner a{display:none;}
    		ul.woo-entry-inner li[class*="e"] a{display:block;}
    		</style>';
    }
    
    add_action( 'ocean_after_archive_product_title_inner','titleh2' );

    Voilà, vous avez le choix et vous avez mon avis. N’hésitez pas à poser des questions.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2353389
    Zelph14
    Participant
    Initié WordPress
    11 contributions

    Bonjour,

    Je viens de voir votre message. J’ai finalement essayé la seconde méthode, avec le code dans functions.php, c’était plus simple pour moi.

    Je n’en demandais pas plus : c’est parfait ! Un grand merci pour votre aide et votre patience.

12 sujets de 1 à 12 (sur un total de 12)
  • Vous devez être connecté pour répondre à ce sujet.