jandieman/dotjuice-plugin-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Expand Woo Products Transform doc into a full section-by-section reference

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Johan
2026-07-23 16:22:46 +00:00
parent cc12c049ce
commit 3cbd7b6bd3
1 changed files with 52 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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.