Add Woo Products Transform doc (incl. Image Rollover)

The Products Transform widget was undocumented; add a user guide covering
image transforms, colour swatches, content tweaks, and the new Image
Rollover (Pro) feature. Link it from getting-started.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docs/dotjuice-elementor-tools/getting-started.md

@@ -32,6 +32,7 @@ In your WordPress admin menu, under **Dotjuice**:
 - [Dark Mode Toggle](widgets/dark-mode-toggle.md)
 - [Keyword Linker](widgets/keyword-linker.md)
 - [Markdown Widget](widgets/markdown-widget.md)
+- [Woo Products Transform](widgets/woo-products-transform.md)
 - [Woo Add to Cart Transform](widgets/woo-add-to-cart-transform.md)
 - [Woo Categories Transform](widgets/woo-categories-transform.md)
 - [Woo My Account Transform](widgets/woo-my-account-transform.md)

docs/dotjuice-elementor-tools/widgets/woo-products-transform.md

@@ -0,0 +1,62 @@
+# Woo Products Transform
+
+Found in the Elementor panel under **Dotjuice → Woo Products Transform**. Requires WooCommerce and Elementor Pro's Products widget.
+
+## How it works
+
+Place this widget on the same page or template as an Elementor Pro **Products** widget (your Shop archive, a product-category template, or any page with a product loop). It restructures each product's markup into styleable wrapper sections and applies the effects you configure to every product in that loop — image hover effects, colour swatches, title/price tweaks, and an optional image rollover.
+
+This widget has no Content tab — every setting lives under Style, mirroring the product loop it transforms.
+
+## Image transform
+
+Hover effects for the product image: transform (rotate, scale, offset), opacity, CSS filters, and box shadow, each with separate Normal and Hover states. Use these to build subtle zoom-in or fade effects as a shopper hovers a product.
+
+At the top of this section is the **Enable Image Rollover** toggle — see below.
+
+## Image Rollover (Pro)
+
+Instead of transforming the product image on hover, show a **second image** — perfect for showing the same garment on a different model, or a front/back view.
+
+Turn on **Enable Image Rollover** (in the Image transform section) to switch the widget into rollover mode. Rollover and the image-transform effects are **mutually exclusive**: when rollover is on, the transform, opacity, filter and shadow controls are hidden and disabled, so the two features never fight. Turn it off and those effects return.
+
+**Where the second image comes from**, per product:
+
+1. A dedicated **Rollover Image** — set it on the product edit screen (Product → **Rollover Image (Hover)** box in the sidebar). This takes priority.
+2. Otherwise the product's **first gallery image** is used automatically (a handy fallback). You can switch this fallback off with **Disable Gallery Fallback**, so only products with an explicit Rollover Image roll over.
+
+You can also tick **Disable rollover for this product** on any product to opt it out entirely.
+
+**Rollover styling** (in the Image transform section, once rollover is on):
+
+| Control | What it does |
+|---|---|
+| **Effect** | How the second image enters: Fade, Zoom In/Out, or Slide Up/Down/Left/Right. |
+| **Duration (ms)** | How long the crossfade/slide takes. |
+| **Easing** | The transition curve — Ease, Linear, the Ins/Outs, plus Smooth and Back / Overshoot. |
+| **Disable Gallery Fallback** | Only roll over products that have an explicit Rollover Image set. |
+
+On hover the featured image crossfades out as the rollover crossfades in. Second images use lazy loading, and on touch devices (no hover) products simply show their featured image.
+
+## Variation swatches
+
+For variable products, show clickable colour swatches under each product in the loop (driven by a product attribute such as `pa_color`), with size, spacing, alignment, border and radius controls across Normal / Hover / Active states. Clicking a swatch swaps the product image to that variation.
+
+## Content transform
+
+- **Change title tag** — output the product title as H2–H6 instead of the default.
+- **Hide Prices / Hide Star Ratings** — remove those elements from the loop.
+- **Disable Default Add to Cart** — remove WooCommerce's default loop add-to-cart button (e.g. if you add your own).
+
+## Setting it up
+
+1. Add the widget to the same template/page as your Elementor Pro Products widget.
+2. Decide between hover **image transforms** or **Image Rollover** (Pro) — you can only use one at a time.
+3. If using rollover, set a **Rollover Image** on the products that need one (or rely on the gallery fallback), then pick an Effect, Duration and Easing.
+4. Configure swatches, title tag and the hide toggles to taste.
+
+## Good to know
+
+- Most settings preview live in the Elementor editor. Rollover images and the transform effects are best confirmed on the live front end by hovering a product.
+- Rollover, swatches and the transform effects all continue to work on products loaded by the Dotjuice AJAX product filter.
+- The Image Rollover controls only appear when Dotjuice Elementor Tools **Pro** is active — deactivating Pro removes the rollover feature (the rest of the widget keeps working).