Woocommerce 替换单个产品页面中的产品图片

Question

我正在尝试用视频替换单个产品页面中的产品图像。我使用了这段代码，但问题是我的视频出现了两次。

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'replace_product_image_with_video', 10, 2 );
function replace_product_image_with_video( $html, $attachment_id ) {
global $product;
    $productID = $product->get_id();  // get current product ID
   // replace 11 to your specific product id 
     if( $productID == 11 ) {
         $html = '<iframe width="650" height="420" src="https://www.youtube.com/embed/U5sLA74nAt0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
   }
   return $html;

}

我怀疑会发生这种情况，因为我使用的默认 WordPress 主题在 /templates/single-product/product-thumbnails.php 中有此代码

echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_html( $attachment_id ), $attachment_id ); 

我不想覆盖它或创建子主题。有没有办法用代码以某种方式删除这个过滤器？

Answer 1

您可以通过注入脚本来替换图像，然后从拇指中删除视频来轻松解决此问题，而无需子主题。

function add_custom_product_video_script() {
    if ( is_product() ) {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                var productID = <?php global $product; echo $product->get_id(); ?>;
                if (productID == 11) {
                    var videoHTML = '<iframe width="650" height="420" src="https://www.youtube.com/embed/U5sLA74nAt0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
                    $('.woocommerce-product-gallery__image').html(videoHTML);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_custom_product_video_script');

function remove_product_video_filter() {
    remove_filter('woocommerce_single_product_image_thumbnail_html', 'replace_product_image_with_video', 10);
}
add_action('wp', 'remove_product_video_filter');

我知道你没有问，但如果你打算经常这样做（在几种不同的产品上）并且不想最终得到意大利面条式代码，那么你应该为 ProductID 设置一个键：值对和 videoID，然后参数化视频 ID，因为其他所有内容都应保持不变。