如何在 WooCommerce 产品描述中显示所有图像

我想用单个产品页面中的描述+所有产品图片(包括变体产品图片)替换我的产品描述。


我可以使用 Magento 做到这一点,但现在当更改为 Woocommerce 时我不能。


经过研究,我尝试使用过滤钩,但没有成功。


我可以将文本添加到产品描述中,但我一直在思考如何使用函数wp_get_attachment_image_url()或wp_get_attachment_image().


据我所知,显示图像的示例代码:


echo wp_get_attachment_image( get_the_ID(), array('700', '600'), "", array( "class" => "img-responsive" ) ). 

如何在我的代码中应用?


    // 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() ) {


            // Image id

            $attachment_ids = $product->get_gallery_image_ids();


            $image_content = "";

            foreach( $attachment_ids as $attachment_id ) {


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


            }


            $image_content .= '<p> TEST Image content </p>';


            // Inserting the custom content at the end

            $content .= $image_content;

        }


        return $content;

    }


侃侃尔雅
浏览 113回答 1
1回答

子衿沉夜

您可以使用如下WC_Product get_image()方法:echo $product->get_image( array('700', '600'), array( "class" => "img-responsive" ), '' );然后,在您的代码中,您可以缓冲所有回显的自定义代码以及主产品图像(在产品描述内容的末尾),如下所示:// Display description tab when emptyadd_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 descriptionadd_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;}
打开App,查看更多内容
随时随地看视频慕课网APP