如何在woocommerce产品详情页的描述里自动调用产品图，包括主图和缩略图

最新推荐文章于 2024-11-04 17:31:45 发布

fobwebs

最新推荐文章于 2024-11-04 17:31:45 发布

阅读量579

点赞数

文章标签： woocommerce 产品描述里显示产品图

本文链接：https://blog.youkuaiyun.com/fobweb/article/details/133209081

版权

本文介绍了如何在WooCommerce产品页面中使用WordPress函数添加详细描述并展示产品图片，包括自定义图片大小和换行显示。通过`display_description_product_tabs`和`add_product_image_woocommerce_description`过滤器，开发者可以增强产品的描述体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以在functions里添加如下代码：

// Display description tab when empty
add_filter( 'woocommerce_product_tabs', 'display_description_product_tabs' );
    function display_description_product_tabs( $tabs ) {

    $tabs['description'] = array(
        'title'    => __( 'Description', 'woocommerce' ),
        'priority' => 10,
        'callback' => 'woocommerce_product_description_tab',
    );

    return $tabs;
}

// Add image to description
add_filter( 'the_content', 'add_product_image_woocommerce_description' );
function add_product_image_woocommerce_description( $content ) {
    global $product;

    // Single product pages (woocommerce)
    if ( is_product() ) {

        ob_start(); // Start buffering

        // HERE your main image
        echo $product->get_image( array('700', '600'), array( "class" => "img-responsive" ), '' );

        $image_content = "";

        // Loop through gallery Image Ids
        foreach( $product->get_gallery_image_ids() as $image_id ) {

            echo '<img src="'. wp_get_attachment_image_url($image_id, 'full') . '" alt="image_content" width="500" height="600">';
        }

        echo '<p> TEST Image content </p>'; // Testing text

        // Inserting the buffered content after
        $content .= ob_get_clean();
    }

    return $content;
}

如果每张产品图要换行显示，则修改下面这行代码：

 echo '<img src="'. wp_get_attachment_image_url($image_id, 'full') . '" alt="image_content" width="500" height="600">';

在<img> 前后加上<br>:

 echo '<br><img src="'. wp_get_attachment_image_url($image_id, 'full') . '" alt="image_content" width="500" height="600"><br>';