删除 WooCommerce 缩略图链接

Question

我正在使用 jquery 脚本在主产品图像框中显示产品缩略图。

jQuery(document).on('mousedown','.thumbnails .zoom', function(){
      var photo_fullsize =  jQuery(this).find('img').attr('src').replace('-100x100','');
      jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
      return false;
    }); 

问题是，如果我点击缩略图，它会在主产品图像框中打开，但也会在灯箱中打开。如何从缩略图链接中删除灯箱？我根本不想要任何链接。我只想要主产品图片框中的灯箱。

我从 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 );

但是如何改变它只显示图片而不显示链接呢？

谢谢！

Answer 1

您可以通过删除所有<a href=""> 标记来实现此目的，除了最后一个%s 和删除$image_link, $image_class, $image_title,。代码行将从改变：

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( '%s', $image ), $attachment_id, $post->ID, $image_class );

编辑： 要移除灯箱，您可以执行以下操作之一：

改变

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 href="%s"> %s</a>', $image_link, $image ), $attachment_id, $post->ID, $image_class );

或

转到您的仪表板 -> Woocommerce -> 设置 -> 常规 -> 脚本（在页面底部）并取消选中“启用灯箱”选项，但关闭该选项将关闭所有图像的灯箱在 woocommerce 中。

执行上述任一操作都会导致图像在新标签页中打开。

Answer 2

我花了很长时间才找到关于如何删除 LINKS 但不破坏将图片插入主图像区域的能力的答案，这与 woocommerce 的当前设置一致。

要删除链接，首先确保您已将 product-thumbnails.php 复制到您自己的主题中，以防止更新时覆盖。

其次，在该文件的第 53 行找到这个

echo apply_filters(
            'woocommerce_single_product_image_thumbnail_html',
            sprintf(
                '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>',
                esc_url( $props['url'] ),
                esc_attr( $image_class ),
                esc_attr( $props['caption'] ),
                wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $props )
            ),
            $attachment_id,
            $post->ID,
            esc_attr( $image_class )

在那段代码中，删除 href="%s" 然后删除 esc_url( $props['url'] )，对于：

            echo apply_filters(
            'woocommerce_single_product_image_thumbnail_html',
            sprintf(
                '<a class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>',
                esc_attr( $image_class ),
                esc_attr( $props['caption'] ),
                wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $props )
            ),
            $attachment_id,
            $post->ID,
            esc_attr( $image_class )

工作完成。使用另一段代码，我能够将鼠标悬停在拇指上，仍然将它们放在主图像区域中而不会被点击。

Answer 3

如果您只想删除灯箱，您可以删除data-rel 属性，否则如果您不希望缩略图中的任何链接，您可以将您的 php 页面更改为：

echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '%s', $image_title, $image ), $attachment_id, $post->ID, $image_class );

唯一的问题是如果你使用带有 CSS 代码的 a 类，在这种情况下我认为你应该清空 href 值。