ImagePipe Pro and WooCommerce work together with no theme-side configuration needed: once the plugin is active, it automatically detects WooCommerce and covers product grids, the product page gallery, and the cart and checkout. The settings covered here (automatic replacement, watermark, output quality) are Pro-only: the free ImagePipe Lite tier doesn't include them.
Step 1 : Check WooCommerce compatibility
The plugin's Compatibility page (ImagePipe Pro → Compatibility) confirms at a glance that WooCommerce is detected and active, alongside the PHP version, the available image processing engine (Imagick or GD), and each output format's real support across browsers. Nothing to configure here: it's a read-only diagnostic page, worth checking whenever you're in doubt before digging further.
Step 2 : Turn on automatic replacement
Automatic replacement (ImagePipe Pro → Automatic replacement) is the single switch that does all the work: once enabled, every relevant <img> tag, including WooCommerce product images, gets rewritten into a <picture> element with browser-side format negotiation (AVIF, then WebP, then JPEG/PNG as a last resort). No theme changes are needed, and no image needs to be re-uploaded: the first visit to a product page triggers generation of the missing variant, which is then cached for every visitor after that.
Step 3 : Set the output quality
Quality settings (ImagePipe Pro → Settings) apply per format: JPEG, PNG, WebP, and AVIF each get their own compression slider, on a 1 to 100 scale. The defaults (82 for JPEG, 80 for PNG and WebP, 60 for AVIF) work well for most catalogs, since AVIF can go lower than the other formats for an equivalent visual result thanks to a more efficient compression algorithm. No cache clearing is needed after a change: only newly generated variants use the new setting, older ones stay cached until they expire or are cleared manually.
Step 4 : Watermark on product images (optional)
The watermark (ImagePipe Pro → Watermark) protects your visuals against theft: logo or text, position, opacity, and scale are all adjustable, with a live preview on a sample image. The "Other attachment images (e.g. WooCommerce products)" checkbox decides whether the watermark also applies to product photos, independently from the other families (content, site logo, featured images). This feature stays optional: turning it off doesn't affect anything else in the configuration.
Step 5 : The result on your store
On the visitor's side, there's no visual difference to expect compared to unoptimized images, just lighter files served in whatever format the browser can display. On the store grid, every product thumbnail goes through the same automatic replacement as the product page: no separate setup needed for category listings.
Step 6 : The result on the product page
On the product page, the same image also gets the watermark configured in step 4: visible in the bottom right corner, applied automatically to every generated variant, with no manual edit of the source file in the media library.
Step 7 : The result in the cart
The cart and checkout are covered by the same mechanism, through WooCommerce's Store API: the product thumbnail added to the cart is already served in its optimized format, with no extra processing at this stage of the purchase flow.
For more detail on how ImagePipe picks the format served to each visitor, see the guide "How to activate WebP/AVIF automatically on WooCommerce".