如何在 WooCommerce 产品描述中显示所有图像 [英] How to show all images in WooCommerce product description
问题描述
我想用我的描述+单个产品页面中的所有产品图片(包括变体产品图片)替换我的产品描述.
I want to replace my product description by my description + all product images (include variation product images) in single product page.
我可以用 Magento 做到这一点,但现在当我改用 Woocommerce 时就不行了.
I can do that with Magento but now when change to Woocommerce I can not.
经过研究,我尝试使用过滤器钩子,但没有成功.
After research I tried with filter hook but not success.
我可以在产品描述中添加文本,但我一直在纠结如何使用函数wp_get_attachment_image_url()
或 wp_get_attachment_image()
.
I can add text to product decscription but I am stucking how to using functions wp_get_attachment_image_url()
or wp_get_attachment_image()
.
据我所知,显示图像的示例代码:
Sample code for display image as I know:
echo wp_get_attachment_image( get_the_ID(), array('700', '600'), "", array( "class" => "img-responsive" ) ).
如何在我的代码中应用?
How to apply in my code?
// 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;
}
推荐答案
您可以使用 WC_Product
get_image()
方法 像:
You can use the WC_Product
get_image()
method like:
echo $product->get_image( array('700', '600'), array( "class" => "img-responsive" ), '' );
然后在您的代码中,您可以缓冲所有回显的自定义代码以及主要产品图像(在产品描述内容的末尾),如下所示:
Then in your code you can buffer all echoed custom code plus the main product image (at the end of your product description content) as follow:
// 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;
}
这篇关于如何在 WooCommerce 产品描述中显示所有图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!