diff --git a/docs/dotjuice-elementor-tools/widgets/woo-products-transform.md b/docs/dotjuice-elementor-tools/widgets/woo-products-transform.md index 292067e..98b88b3 100644 --- a/docs/dotjuice-elementor-tools/widgets/woo-products-transform.md +++ b/docs/dotjuice-elementor-tools/widgets/woo-products-transform.md @@ -4,59 +4,87 @@ Found in the Elementor panel under **Dotjuice → Woo Products Transform**. Requ ## 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. +Drop this widget onto the same page or template as an Elementor Pro **Products** widget — your Shop archive, a product-category template, or any page showing a product loop. It restructures each product in that loop into styleable wrapper sections (an image wrapper and a content wrapper) and applies the effects you configure to **every product in the loop**: image hover effects, colour swatches, title/price tweaks, an optional image rollover, and overflow control. -This widget has no Content tab — every setting lives under Style, mirroring the product loop it transforms. +It doesn't render a product grid of its own — it *transforms* the grid rendered by Elementor Pro's Products widget. So you always use the two together: the Products widget for the grid, this widget for the styling and behaviour. + +There's no Content tab — every setting lives under **Style**, grouped into the four sections below. Most settings preview live in the Elementor editor; hover-based effects (transforms, rollover, swatch image swaps) are best confirmed on the live front end. ## 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. +Controls the product image and its hover behaviour. -At the top of this section is the **Enable Image Rollover** toggle — see below. +| Setting | What it does | +|---|---| +| **Disable Default Add to Cart** | Removes WooCommerce's default loop "Add to cart" button (useful if you add your own, or want a cleaner grid). | +| **Overflow** | `overflow` for the image wrapper — set to **Hidden** to clip a scaled/zoomed image to its frame. | +| **Border** (Style / Colour / Width / Radius) | A border around the product image, with rounded-corner control. | + +Below those, **Normal** and **Hover** tabs each expose the same image effects, so you can animate between a resting state and a hover state: + +- **Transform** — a popover with **Rotate**, **Scale**, and **Offset X/Y**. Set a subtle scale/offset on Hover for a zoom-on-hover effect. +- **Opacity** — fade the image (e.g. dim on hover, or fade in). +- **CSS Filters** — blur, brightness, contrast, saturation, hue. +- **Box Shadow** — a shadow on the image. + +At the very top of this section is the **Enable Image Rollover** toggle (Pro) — see [Image Rollover](#image-rollover-pro) below. When rollover is on, the transform/opacity/filter/shadow controls above are hidden and disabled, because rollover and those hover effects are mutually exclusive. ## 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. +Instead of transforming the product image on hover, show a **second image** — ideal for 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. +Turn on **Enable Image Rollover** (top of the Image transform section) to switch the widget into rollover mode. The featured image crossfades out as the second image crossfades in. -**Where the second image comes from**, per product: +**Where the second image comes from**, per product, in priority order: -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. +1. A dedicated **Rollover Image** — set it on the product edit screen (Product → **Rollover Image (Hover)** box in the sidebar). +2. Otherwise the product's **first gallery image**, used automatically as a fallback. -You can also tick **Disable rollover for this product** on any product to opt it out entirely. +You can 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): +**Rollover controls** (shown once rollover is on): -| Control | What it does | +| Setting | 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. | +| **Disable Gallery Fallback** | Only roll over products that have an explicit Rollover Image. Products relying on the gallery fallback keep their featured image untouched. | -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. +Second images use native 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. +For **variable** products, show clickable colour swatches under each product in the loop. Clicking a swatch swaps the product image to that variation's image — shoppers preview colours without opening the product. + +- **Show colour swatches** — the master toggle (off by default). +- **Swatch taxonomy** — which product attribute drives the swatches (e.g. `Colour` / `pa_color`). Swatch colours come from the attribute term's colour (see the WooCommerce Hacks attribute colour manager). +- **Swatch Gap** and **Alignment** — spacing and horizontal alignment of the swatch row. +- **Normal / Hover / Active** tabs — **Swatch Size**, **Border**, and **Border Radius** for each state (Active = the currently selected swatch). ## 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). +Styles the block holding the product title and price, and offers a few content tweaks. + +- **Change title tag** — output the product title as **H2–H6** instead of the default (a second dropdown, **Title heading tag**, appears when this is on). +- **Hide Star Ratings** / **Hide Prices** — remove those elements from the loop. +- **Content wrapper styling** — **Background Colour**, **Blur** (a backdrop-blur behind the content, e.g. for an overlay over the image), **Padding**, **Border** (Style / Colour / Width / Radius), and **Box Shadow**. + +## Box Transform + +- **Show Overlay** — the `overflow` of each product tile (`li.product`). Set to **Hidden** to clip child content (like a scaled image or an absolutely-positioned content overlay) to the tile. ## 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. +2. Decide between hover **image transforms** and **Image Rollover** (Pro) — you can only use one at a time. +3. If using transforms, set a resting state on the **Normal** tab and the effect on **Hover**. +4. 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. +5. For variable products, enable **Show colour swatches** and pick the driving attribute. +6. Use **Content transform** for the title tag and to hide price/rating, and **Box Transform** to clip overflow. ## 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). +- Rollover, swatches and the transform effects all keep working 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. +- Because the widget restyles Elementor Pro's Products loop, it only has a visible effect on pages that actually render that loop.