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

我最终使用了这个函数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 );

Answer 2

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

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

    function content_add_below_prod_gallery() {
       echo 'Hello';
    }

另外，您还可以编辑woocommerce/templates/single-productproduct-image.php中的product-image.php文件

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