Afficher la legende des images produits

WordPress :6.7
Statut : résolu

Ce sujet contient 6 réponses, 2 participants et a été mis à jour pour la dernière fois par ferman, le il y a 3 semaines et 4 jours.

7 sujets de 1 à 7 (sur un total de 7)

Auteur

Messages
15 avril 2025 à 13 h 00 min #2487951
1formanet
Participant

Padawan WordPress
51 contributions
Bonjour,

Ma configuration WP actuelle
- Version de PHP/MySQL :
- Thème utilisé : thème enfant Astra
- Extensions en place :
- Nom de l’hébergeur : O2switch
- Adresse du site : trap-access.com
Problème(s) rencontré(s) :

Bonjour, je ne trouve pas de solution pour afficher la légende de mes images produits … (donc sur la page produit) … Y a t’il un réglage possible ? J’ai sans succès essayé de modifier le functions.php, mais de toute façon je préfère les solutions natives pour la « solidité’ dans le temps …
Merci
15 avril 2025 à 15 h 12 min #2487952
ferman
Modérateur

Maître WordPress
7577 contributions
Bonjour,

Je ne connais pas de solution native mais pour moi ce snippet fonctionne:
```
function add_caption_below_product_image() {

    echo '<p style="text-align: center;" class="image-caption">';
    $caption = get_post( get_post_thumbnail_id() )->post_excerpt;
    echo $caption;
    echo '</p>';
}
add_action( 'woocommerce_product_thumbnails', 'add_caption_below_product_image' );
```
15 avril 2025 à 16 h 06 min #2487954

1formanet
Participant

Padawan WordPress
51 contributions

Merci @Ferman, sans succès pour moi … C’est bizarre car c’est la 3e version de code que j’utilise, et rien ne change

15 avril 2025 à 16 h 59 min #2487957
1formanet
Participant

Padawan WordPress
51 contributions
Ah et bien si … je l’ai à présent à des endroits un peu bizarre, je vais essayer de le placer sous l’image, je reviendrai poster ma solution complète
- Cette réponse a été modifiée le il y a 3 semaines et 6 jours par 1formanet.
- Cette réponse a été modifiée le il y a 3 semaines et 6 jours par 1formanet.
15 avril 2025 à 17 h 41 min #2487963

ferman
Modérateur

Maître WordPress
7577 contributions

Ah et bien si … je l’ai à présent à des endroits un peu bizarre, je vais essayer de le placer sous l’image

Si vous avez créé votre légende dans la médiathèque, le code la place automatiquement sous l’image en position centrée. En tout cas c’est ce que j’observe.

17 avril 2025 à 9 h 16 min #2488032
1formanet
Participant

Padawan WordPress
51 contributions
Alors finalement voici ce que j’ai pû faire (rien ne fonctionnait après plein d’essais et mix de code, je pense que Astra outrepasse le code classique) :

1) en functions.php (du theme enfant) j’ai finalement mis du java car rien ne fonctionnait
```
// JavaScript pour injecter la légende sous l’image principale
add_action('wp_footer', 'legende_js_desi');
function legende_js_desi() {
    if ( ! is_product() ) return;

    global $product;
    $attachment_id = $product->get_image_id();
    $caption = wp_get_attachment_caption($attachment_id);

    if ( ! $caption ) return;

    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function () {
        var galleryImage = document.querySelector('.woocommerce-product-gallery__image');
        if (galleryImage) {
            var caption = document.createElement("p");
            caption.className = "image-caption";
            caption.innerText = <?php echo json_encode($caption); ?>;
            galleryImage.appendChild(caption);
        }
    });
    </script>
    <?php
```
2) en CSS (theme enfant) j’ai dû positionner en fixe
```
.image-caption {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
max-width: 90%;
text-align: center;
z-index: 10;
}
```
- Cette réponse a été modifiée le il y a 3 semaines et 4 jours par 1formanet.
- Cette réponse a été modifiée le il y a 3 semaines et 4 jours par 1formanet.
17 avril 2025 à 23 h 41 min #2488078
ferman
Modérateur

Maître WordPress
7577 contributions
Je ne comprenais pas bien pourquoi ça fonctionnait chez moi et pas chez vous. La réponse est ICI. Je n’utilisais pas de galerie; seulement une image produit. Et donc il faut du js. Il y avait un peu plus simple (sans avoir à ajouter du CSS) mais votre solution est tout à fait bonne. Donc, pour info:
```
function add_caption_below_product_image() {

    echo '<p style="text-align: center;" class="image-caption">';
    $caption = get_post( get_post_thumbnail_id() )->post_excerpt;
    echo $caption;
    echo '</p>';
	?>	<script>	
	$=jQuery; $('.woocommerce-product-gallery__image a .wp-post-image, .image-caption').wrapAll('<div class="layout-bis"></div>')
	</script>
	<?php
}
add_action( 'woocommerce_product_thumbnails', 'add_caption_below_product_image');
```
- Cette réponse a été modifiée le il y a 3 semaines et 4 jours par ferman.
Auteur

Messages