This guide explains how to create a custom filter to modify image URLs to use a CDN only on WooCommerce product pages that have the Smart Variations Images (SVI) plugin active. This ensures that the image URL replacement only happens in the specific context where both WooCommerce and the SVI plugin are being used.

Steps

1. 1. Open your theme’s functions.php file:
      • Navigate to your WordPress theme’s directory.
      • Open the functions.php file in a code editor.
   2. Add the custom filter function:
      • Copy and paste the following code snippet into the functions.php file.

      function svi_cdn_image_url($image, $attachment_id, $size, $icon)
      {
      // Check if it's a WooCommerce product page and the SVI plugin is active
      if (is_product() && class_exists('Smart_Variations_Images_Public')) {
      $url = $image[0];
      $types = ["gif", "png", "jpg"];
      $type = strtolower(pathinfo($url, PATHINFO_EXTENSION));
      if (in_array($type, $types)) {
      $site = get_site_url();
      $cdn = "{Insert cdn url here}";
      $image[0] = str_replace($site, $cdn, $url);
      }
      }
      
      return $image; // Return the whole array, not just the URL
      }
      add_filter('wp_get_attachment_image_src', 'svi_cdn_image_url', 10, 4);

Explanation

1. Function Definition:
   • svi_cdn_image_url is the custom function that will be hooked to the wp_get_attachment_image_src filter.
   • It accepts four parameters:
     • $image: An array of image data.
     • $attachment_id: The image attachment ID.
     • $size: The requested image size.
     • $icon: Whether the image should be treated as an icon.
2. Check Conditions:
   • The function first checks if the current page is a WooCommerce product page using is_product().
   • It then checks if the SVI plugin is active by verifying the existence of its main class using class_exists('Smart_Variations_Images_Public').
3. Modify Image URL:
   • The function extracts the URL from the $image array.
   • It checks if the image file type is one of the specified types (gif, png, jpg) using pathinfo to get the file extension.
   • If the file type matches, it replaces the site URL with the CDN URL in the image URL using str_replace.
4. Return the Modified Image Array:
   • The function returns the modified $image array, preserving the structure expected by the wp_get_attachment_image_src filter.
5. Add the Filter:
   • add_filter('wp_get_attachment_image_src', 'svi_cdn_image_url', 10, 4) hooks the custom function to the wp_get_attachment_image_src filter, ensuring it runs with the correct priority and number of arguments.

Customization

Replace {Insert cdn url here} with your actual CDN URL. You can adjust the $types array to include any other image file types you want to handle.

Conclusion

By following these steps, you can ensure that your WooCommerce product pages with the SVI plugin use CDN URLs for images, improving the performance and loading times of your site. This custom filter function is a targeted and efficient way to apply CDN URLs only where needed.