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

您可以通过删除除{0}}之外的所有<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 );

或

转到信息中心 - ＆gt; Woocommerce - ＆gt;设置 - ＆gt;一般 - ＆gt;脚本（在页面底部）并取消勾选＆＃34;启用Lightbox＆＃34;选项，但关闭该选项将关闭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代码的类，在这种情况下我认为你应该清空href值。

删除WooCommerce缩略图链接

3 个答案: