点击产品图片网站崩溃，如何移除链接使图片不可点击？

Hey there! Let's fix that frustrating clickable product image problem once and for all. Since you’re using a parent-child theme setup, we’ll stick to safe, update-proof solutions so your fixes don’t get wiped out when the parent theme updates.

This is the best long-term fix because it removes the <a> tag entirely from the HTML structure.

• First, locate the template file that renders your product images. For WooCommerce-based themes, this is usually woocommerce/single-product/product-image.php. For custom themes, check folders like templates/ or parts/ for files named something like product-image.php.
• Create a matching folder structure in your child theme. For example, if the parent theme file is in woocommerce/single-product/, make that exact folder path in your child theme.
• Copy the parent theme's product image file into your child theme's new folder.
• Open the copied file and find the <a> tag wrapping the image. It’ll look something like this:

  <a href="<?php echo esc_url( $image_link ); ?>" class="woocommerce-product-gallery__trigger">
      <?php echo wp_get_attachment_image( $post_thumbnail_id, 'woocommerce_single', false, array(
          'title' => get_post_field( 'post_title', $post_thumbnail_id ),
          'alt'   => get_post_meta( $post_thumbnail_id, '_wp_attachment_image_alt', true ),
      ) ); ?>
  </a>
  

• Delete the opening and closing <a> tags, leaving only the <img> output code. Your modified code will look like this:

  <?php echo wp_get_attachment_image( $post_thumbnail_id, 'woocommerce_single', false, array(
      'title' => get_post_field( 'post_title', $post_thumbnail_id ),
      'alt'   => get_post_meta( $post_thumbnail_id, '_wp_attachment_image_alt', true ),
  ) ); ?>
  

• Save the file, refresh your product page, and the image will no longer be clickable.

If you can’t find the right template file, use filters to strip the <a> tag from the image output:

• Open your child theme’s functions.php file (you can access this via Appearance → Theme File Editor in WordPress admin).
• Add these code snippets:

  // Remove link from main single product image
  add_filter( 'woocommerce_single_product_image_html', 'strip_product_image_link', 10, 2 );
  function strip_product_image_link( $html, $post_id ) {
      // Use regex to replace the <a> tag with just the inner image content
      return preg_replace( '/<a[^>]+>(.*?)<\/a>/i', '$1', $html );
  }
  
  // Optional: Remove links from product gallery thumbnails too
  add_filter( 'woocommerce_single_product_image_thumbnail_html', 'strip_gallery_image_links', 10, 2 );
  function strip_gallery_image_links( $html, $post_id ) {
      return preg_replace( '/<a[^>]+>(.*?)<\/a>/i', '$1', $html );
  }
  

• Save the file, refresh your site, and the links will be gone.

If you need a quick fix while working on the permanent solution, use CSS to block click events:

• Go to Appearance → Customize → Additional CSS in WordPress admin.
• Add this code:

  /* Disable click on product images and gallery thumbs */
  .woocommerce-product-gallery__trigger,
  .woocommerce-product-gallery__image a {
      pointer-events: none;
      cursor: default;
  }
  

• Publish the changes. This won’t remove the <a> tag from the HTML, but users won’t be able to click the image, stopping the site crash issue.

If CSS isn’t enough, use JS to remove the href attribute and block click behavior:

• Create a js folder in your child theme, then make a file named disable-product-image-click.js with this code:

  document.addEventListener('DOMContentLoaded', function() {
      // Target all product image links
      const imageLinks = document.querySelectorAll('.woocommerce-product-gallery__trigger, .woocommerce-product-gallery__image a');
      imageLinks.forEach(link => {
          link.removeAttribute('href'); // Remove the link URL
          // Block any remaining click behavior
          link.addEventListener('click', function(e) {
              e.preventDefault();
              e.stopPropagation();
          });
      });
  });
  

• Add this code to your child theme’s functions.php to load the JS file:

  function enqueue_disable_image_click_script() {
      wp_enqueue_script( 
          'disable-product-image-click', 
          get_stylesheet_directory_uri() . '/js/disable-product-image-click.js', 
          array('jquery'), 
          '1.0', 
          true 
      );
  }
  add_action( 'wp_enqueue_scripts', 'enqueue_disable_image_click_script' );
  

• Save all files, refresh your site, and the images will be unclickable.

内容的提问来源于stack exchange，提问作者anni