WooCommerce：在单个项目页面中的项目下方添加产品描述

Question

我想在每个缩略图的正下方显示每个（变体）产品的产品说明。因此，当我单击每个缩略图并将主图像滑入视图时，它的描述将写在下面，如下图所示。

我认为这是显示说明的代码：

<?php echo $value[‘variation_description’];?>

但是我必须编辑哪个模板？我浏览了WooCommerce文件夹，但找不到所需的模板。

编辑：我认为product-image.php是我需要编辑的模板，但是我应该在上面的行插入哪里？

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
    <figure class="woocommerce-product-gallery__wrapper">
        <?php
        if ( $product->get_image_id() ) {
            $html = wc_get_gallery_image_html( $post_thumbnail_id, true );
        } else {
            $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
            $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
            $html .= '</div>';
        }

        echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

        do_action( 'woocommerce_product_thumbnails' );
        ?>
    </figure>
</div>

Answer 1

没有这样的钩子可以帮助您直接在项目图像下添加说明，但是可以在缩略图下添加。使用这个钩子

 add_action( 'woocommerce_after_single_product_summary' , 'content_add_below_prod_gallery', 5 );

    function content_add_below_prod_gallery() {
       echo 'Hello';
    }

否则，您可以编辑product-image.php文件，该文件位于 woocommerce / templates / single-productproduct-image.php

注意：可以通过将其复制到yourtheme / woocommerce / single-product / product-image.php来覆盖此模板。

Answer 2

我最终使用了此功能created by John Beales。通过显示图像标题（在媒体设置中设置），它以另一种方式解决了该问题。效果很好。

function gcw_insert_captions( $html, $attachment_id ) {
    $captions = '';
    $title = get_post_field( 'post_title', $attachment_id );
    if( !empty( $title ) ) {
        $captions .= '<h5>' . esc_html( $title ) . '</h5>';
    }
    $description = get_post_field( 'post_excerpt', $attachment_id );
    if( !empty( $description ) ) {
        $captions .= '<p>' . $description . '</p>';
    }
    if( !empty( $captions ) ) {
        $captions = '<div class="gcw-caption">' . $captions . '</div>';

        $html = preg_replace('~<\/div>$~', $captions . '</div>', $html );
    }
    return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'gcw_insert_captions', 10, 2 );