Question

我正在尝试删除点击woocommerce产品精选图片中图片的功能，这样您就无法再点击图片并将其变大。

没有太多的css技巧如此简单的解释是值得赞赏的。我打开了product-image.php，我知道如何在我的主题中输入自定义代码。

任何？

Answer 1

在product-image.php

中更改此行

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_title, $image ), $post->ID );

到

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image ), $post->ID );

并在product-thumbnails.php文件中，更改

echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );

到

echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a title="%s">%s</a>', $image_title, $image ), $attachment_id, $post->ID, $image_class );

执行上述操作应该会删除单击图像并使其变大的功能。

Answer 2

完美无缺，但我因此而面临一个问题。我设置了页面，以便在单击缩略图时替换产品图像。当我应用您的规则使产品图像无法点击时，其他js不再起作用。你知道如何让两者一起工作吗？我使用的jquery是

(function($){

    $(document).ready(function(){

        $('.thumbnails a.zoom').click(function(event){
            event.preventDefault();
            var thumb_url =  $(this).find('img').attr('src');

            $('.woocommerce-main-image img').attr('src',  thumb_url );

        });
    });
})(jQuery);

Answer 3

尝试一下

.woocommerce-product-gallery__image { 指针事件：无；

对我来说效果很好。检查主题是否具有自定义CSS部分，然后将其粘贴到其中。

Answer 4

首先，如果要替换single-product.php模板，则必须在自己的主题文件夹中创建一个新模板。示例：wp-content / themes / woocommerce / single-product.php

<?php global $product; echo $product->get_image(); ?>

仅输出不带链接和任何div的img标签。

这可能很有帮助https://docs.woocommerce.com/wc-apidocs/source-class-WC_Block_Featured_Product.html#156-175

Answer 5

我一直在寻找如何在产品图片上禁用缩放和灯箱功能，以下代码（插入在functions.php中）帮助了：

add_action( 'after_setup_theme', 'remove_pgz_theme_support', 100 );
function remove_pgz_theme_support() { 
remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
}

但是，这样做的副作用是仍然允许用户单击图像，将其发送到文件的直接链接。在OceanWP主题上，我发现这可行（将其插入到CSS中）：

img.wp-post-image {
pointer-events:none !important;

这将适用于精选图像，但是如果您在同一产品库中还有其他图像，则仍然可以单击那些图像。要也禁用这些单击，请在CSS中插入以下额外代码：

div.woocommerce-product-gallery__image.flex-active-slide {
pointer-events:none !important;

希望对您有帮助！

删除LinkUrl到图像的Woocommerce产品

5 个答案: