Merge branch 'master' of https://git.koke.estate/jandieman/dotjuice-plugin-docs
This commit is contained in:
@@ -12,9 +12,8 @@ The free Dotjuice Elementor Tools plugin covers the everyday styling gaps in Woo
|
||||
|
||||
**Woo Quick View** — lets shoppers preview a product in a popup without leaving your shop grid, triggered by a button that appears automatically across your product loops, complete with hover-preloading so the popup feels instant.
|
||||
|
||||
**Woo Custom Product Tabs** — a full rebuild of the WooCommerce product tabs area as a styleable desktop-tabs/mobile-accordion component, with the ability to add unlimited custom tabs and deep styling control down into your reviews and rating form.
|
||||
**Woo Custom Product Tabs** — a full rebuild of the WooCommerce product tabs area as a styleable desktop-tabs/mobile-accordion component: add unlimited custom tabs, show or hide any custom tab per product by category, tag, brand or attribute, and style deep into your reviews and rating form.
|
||||
|
||||
**Woo Add Product Tab** — the lightweight option when you just need to bolt one extra tab onto the existing WooCommerce tabs, no rebuild required.
|
||||
|
||||
**ACF Frontend Form** — let visitors edit Advanced Custom Fields content directly from the front end, using ACF's own native form interface, no admin access required.
|
||||
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
# Woo Add Product Tab
|
||||
|
||||
Add one extra tab to your product page's existing tabs — no template rebuild required.
|
||||
|
||||
## The problem it solves
|
||||
|
||||
Sometimes you just need one more tab next to WooCommerce's Description, Additional Information, and Reviews — a sizing guide, a shipping note, a care instructions panel — without rebuilding the entire tabs section.
|
||||
|
||||
## How it helps
|
||||
|
||||
Woo Add Product Tab appends a single, fully-editable tab to WooCommerce's native tabs, with a title, rich-text content, and control over where it sits in the tab order — all visually, in a few clicks.
|
||||
|
||||
## The result
|
||||
|
||||
One extra tab exactly where you want it, without touching the rest of your product tabs setup.
|
||||
|
||||
*Need to rebuild and restyle the whole tabs area, with multiple custom tabs and accordion support on mobile? See [Woo Custom Product Tabs](woo-custom-product-tabs.md).*
|
||||
@@ -16,9 +16,7 @@ Elementor's own widget library, and even Elementor Pro's, leaves gaps — especi
|
||||
|
||||
**Markdown Widget** — embed a live Markdown file (a README, changelog, or documentation page) directly into a page.
|
||||
|
||||
**Image Carousel Transform** — add hover effects, filters, and a cleaner lightbox trigger to Elementor Pro's native Image Carousel.
|
||||
|
||||
**WooCommerce widgets** — a set of five widgets addressing the most common WooCommerce styling and layout gaps: clickable variation buttons instead of dropdowns, styled category tiles, an attribute-driven extended product grid, consistent My Account styling, and styleable pagination.
|
||||
**WooCommerce widgets** — a set of four widgets addressing the most common WooCommerce styling and layout gaps: clickable variation buttons instead of dropdowns, styled category tiles, consistent My Account styling, and styleable pagination.
|
||||
|
||||
**WooCommerce Hacks** — an admin toolkit for the everyday WooCommerce account-page tweaks every store eventually needs (hiding tabs, redirect rules, category exclusions) plus a proper attribute colour-swatch manager.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Dark Mode Toggle
|
||||
|
||||
A one-click, site-wide dark mode switch — using the color palette you've already built in Elementor.
|
||||
A one-click, site-wide dark mode switch — using the colour palette you've already built in Elementor.
|
||||
|
||||
## The problem it solves
|
||||
|
||||
@@ -8,10 +8,17 @@ Dark mode is one of the most-requested features on modern websites, but building
|
||||
|
||||
## How it helps
|
||||
|
||||
Dark Mode Toggle works directly with Elementor's own Global Colors — the primary, secondary, text, and accent colors you've already set up as part of your site's design. Add the toggle anywhere on your site, choose a dark palette for each of those four global colors, and clicking it switches your entire site into dark mode instantly, remembered for that visitor on their next visit too.
|
||||
Dark Mode Toggle works directly with Elementor's own global colours — no separate stylesheet, no custom code. Add the toggle anywhere on your site, choose a dark palette, and one click flips your entire site into dark mode instantly, remembered for that visitor on their next visit too.
|
||||
|
||||
Crucially, it speaks **both** of Elementor's colour systems:
|
||||
|
||||
- The **classic Global Colors** (Primary, Secondary, Text, Accent) that traditional widgets use.
|
||||
- The **newer Elementor 4.x global variables** used by the latest atomic widgets.
|
||||
|
||||
Real sites are increasingly a mix of the two, so the toggle can remap both at once — meaning your dark mode stays complete as you build with newer Elementor widgets, not just the old ones.
|
||||
|
||||
## The result
|
||||
|
||||
A genuine site-wide dark mode, built entirely from colors you already control through Elementor — no separate stylesheet to maintain.
|
||||
A genuine site-wide dark mode, built entirely from colours you already control through Elementor — future-proofed for the newer widget system, with nothing extra to maintain.
|
||||
|
||||
*Note: this widget relies on your theme and Elementor Kit consistently using Elementor's Global Colors throughout your design — the more consistently they're used, the more complete the dark mode effect will be.*
|
||||
*Note: this widget relies on your theme and Elementor Kit consistently using Elementor's global colours and variables throughout your design — the more consistently they're used, the more complete the dark mode effect will be.*
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
# Extended Product Loop
|
||||
|
||||
Show every colour, size, or style variant of a product as its own tile — a "shop by option" grid, not just a shop by product.
|
||||
|
||||
## The problem it solves
|
||||
|
||||
A standard product grid shows one tile per product, no matter how many colours or variants it comes in — a shopper browsing "red items" has to click into a t-shirt product just to discover it comes in red at all.
|
||||
|
||||
## How it helps
|
||||
|
||||
Extended Product Loop builds a grid that includes each individual product variant matching a chosen attribute as its own tile, alongside your regular products — so a t-shirt with three colour options can show as three separate, individually-imaged tiles in a "shop by colour" style layout.
|
||||
|
||||
## The result
|
||||
|
||||
A browsing experience built around the attribute your customers actually shop by, not just the parent product list.
|
||||
@@ -1,17 +0,0 @@
|
||||
# Image Carousel Transform
|
||||
|
||||
Give Elementor Pro's native Image Carousel the hover effects and polish it doesn't have out of the box.
|
||||
|
||||
## The problem it solves
|
||||
|
||||
Elementor Pro's Image Carousel widget is functional but visually plain — no built-in hover transforms, no filter effects, and a lightbox trigger that takes over the whole slide rather than offering a dedicated zoom button.
|
||||
|
||||
## How it helps
|
||||
|
||||
Image Carousel Transform adds a layer of styling on top of the native carousel: hover and normal-state transforms (scale, offset), box-shadow and CSS filter effects, a forced consistent slide height, and the option to move the lightbox trigger into its own small zoom button rather than making the entire slide clickable.
|
||||
|
||||
## The result
|
||||
|
||||
A carousel that looks like it came from a premium page-builder theme, styled entirely through Elementor controls — no custom CSS required.
|
||||
|
||||
*Note: this widget styles Elementor Pro's Image Carousel widget elsewhere on the page — it doesn't render a carousel of its own.*
|
||||
Reference in New Issue
Block a user