如何在WooCommerce产品说明中显示所有图像

debugcn 发表于 Dev

卡利宝

我想用单个产品页面中的描述+所有产品图像（包括变体产品图像）代替我的产品描述。

我可以使用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;
    }

LoicTheAztec

您可以使用如下WC_Product get_image()方法：

echo $product->get_image( 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() ) {

        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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。