diff --git a/marketing/dotjuice-elementor-tools-pro/documentation/marketing/espocrm-integration.md b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/espocrm-integration.md new file mode 100755 index 0000000..cd3352d --- /dev/null +++ b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/espocrm-integration.md @@ -0,0 +1,15 @@ +# EspoCRM Lead Capture + +Send Elementor form submissions straight into EspoCRM — no manual re-entry, no separate integration tool. + +## The problem it solves + +A contact or lead form on your site is only half the job — those submissions need to end up in your CRM to actually be followed up on. Without a direct integration, that usually means either manually copying leads across from an email inbox, or paying for a third-party automation tool just to bridge two systems that should talk to each other directly. + +## How it helps + +Add "EspoCRM Webhook" as a submit action on any Elementor Pro Form, point it at your EspoCRM Lead Capture endpoint, and every submission is sent straight through in real time — no separate integration platform, no delay. Paste an example payload from EspoCRM and field mapping is worked out automatically. UK phone numbers are formatted consistently before they arrive, so your CRM data stays clean without any manual tidying. + +## The result + +Leads land in EspoCRM the moment a form is submitted, formatted consistently, with nothing manual in between. diff --git a/marketing/dotjuice-elementor-tools-pro/documentation/marketing/overview.md b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/overview.md new file mode 100755 index 0000000..b904190 --- /dev/null +++ b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/overview.md @@ -0,0 +1,29 @@ +# Dotjuice Elementor Tools Pro + +The premium widget set for serious WooCommerce stores — AJAX product filtering, a fully custom cart, quick view, custom product tabs, frontend ACF forms, and watermark-free screenshots. + +## Built for stores that have outgrown the basics + +The free Dotjuice Elementor Tools plugin covers the everyday styling gaps in WooCommerce. Pro goes further, adding the kind of advanced shopping-experience features that used to mean custom development: faceted filtering with clean bookmarkable URLs, a cart widget with instant AJAX quantity updates, a quick-view modal that keeps shoppers on the page, and a fully rebuilt product tabs system with deep styling reach into your reviews section. + +## What's included + +**Woo Product Filter** — a genuine faceted filtering system: category, tag, brand, or any custom attribute, with list or colour-swatch display, AJAX-refreshed results, and clean, bookmarkable, shareable filtered URLs — the kind of filtering shoppers expect from major ecommerce sites. + +**Woo Cart** — a complete, from-scratch cart widget with a two-column layout, an optional instant AJAX quantity-update mode with no page reload, and dozens of styling controls reaching every part of the cart, coupon box, and totals panel. + +**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 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. + +**Watermark-free screenshots** — every Screenshot Capture widget from the free plugin renders clean, with no Dotjuice watermark. + +**EspoCRM Lead Capture** — send Elementor Pro Form submissions straight into EspoCRM in real time, with automatic field mapping and UK phone number formatting. + +## The result + +The advanced WooCommerce shopping-experience features that turn a functional store into a genuinely modern one — filtering, cart, and quick view that feel like they were custom-built, without the custom development cost. diff --git a/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/acf-frontend-form.md b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/acf-frontend-form.md new file mode 100755 index 0000000..7c8d76c --- /dev/null +++ b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/acf-frontend-form.md @@ -0,0 +1,15 @@ +# ACF Frontend Form + +Let visitors edit Advanced Custom Fields content from the front end — no admin access, no wp-admin, just a form on your page. + +## The problem it solves + +Advanced Custom Fields is one of the most powerful tools in WordPress for structured content, but editing it has always meant going into wp-admin. For membership sites, directories, community-submitted content, or client self-service portals, that's a real barrier. + +## How it helps + +ACF Frontend Form renders ACF's own native form interface — the same tabs, repeaters, and field layouts you're used to from the admin edit screen — directly on any front-end page, for the post or page currently being viewed. Choose exactly which field groups are editable, and whether the post title and content are included too. + +## The result + +Genuine front-end content editing, using ACF's real, familiar form fields — not a simplified imitation. diff --git a/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-add-product-tab.md b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-add-product-tab.md new file mode 100755 index 0000000..e97715a --- /dev/null +++ b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-add-product-tab.md @@ -0,0 +1,17 @@ +# 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).* diff --git a/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-cart.md b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-cart.md new file mode 100755 index 0000000..9142a8c --- /dev/null +++ b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-cart.md @@ -0,0 +1,15 @@ +# Woo Cart + +A complete, from-scratch cart widget — with instant AJAX quantity updates and deep styling control, no Elementor Pro required. + +## The problem it solves + +A store's cart page is one of the last steps before checkout, and default cart styling rarely matches the rest of a carefully designed store. Elementor Pro has its own cart widget, but if you're not on Elementor Pro, or you want more granular styling control than it offers, there's a gap. + +## How it helps + +Woo Cart is a ground-up cart widget: item rows with thumbnail, name, variation details, a quantity stepper, and pricing; a coupon box; and a totals panel with checkout button — all restyled through more than a dozen dedicated style sections. Switch on AJAX quantity updates and shoppers can adjust amounts without a page reload at all, with the totals panel updating live, including coupon and discount rows. + +## The result + +A cart experience that feels instant and looks exactly like the rest of your store, without needing Elementor Pro. diff --git a/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-custom-product-tabs.md b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-custom-product-tabs.md new file mode 100755 index 0000000..678d83f --- /dev/null +++ b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-custom-product-tabs.md @@ -0,0 +1,15 @@ +# Woo Custom Product Tabs + +A complete rebuild of your product tabs — styleable down to the reviews and rating form, with a built-in mobile accordion. + +## The problem it solves + +WooCommerce's default product tabs (Description, Additional Information, Reviews) are functional but offer minimal styling control, and turn into an awkward stacked layout on mobile with no accordion behaviour built in. + +## How it helps + +Woo Custom Product Tabs replaces the entire tabs area with a fully restyled desktop-tabs / mobile-accordion component. Hide any of the default tabs you don't need, add as many custom tabs as you like — rich text, or an entire embedded Elementor template — and reach deep into the reviews section itself: avatar styling, star ratings, review cards, and the review submission form all get their own dedicated controls. + +## The result + +A product tabs section that looks genuinely custom-built, with reviews that finally match the rest of your store's design — and a proper accordion on mobile, not just a cramped stack. diff --git a/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-product-filter.md b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-product-filter.md new file mode 100755 index 0000000..068ce7f --- /dev/null +++ b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-product-filter.md @@ -0,0 +1,17 @@ +# Woo Product Filter + +Genuine faceted product filtering — category, attribute, brand, or tag — with instant AJAX results and clean, shareable URLs. + +## The problem it solves + +Shoppers expect to filter by colour, size, brand, or category and see results update instantly, with a URL they can bookmark or share. Building that properly — with correct product counts, dependent filters, and URLs that still work when shared or reloaded — is normally a serious development project. + +## How it helps + +Woo Product Filter gives you as many filter groups as you need, each pulling from a category, tag, brand, or any custom attribute, displayed as a list or as clickable buttons — including real colour swatches for attributes like colour. Results refresh instantly via AJAX (or update the page URL directly, your choice), term counts update live so shoppers always see what's actually available, and every filtered view has a clean, bookmarkable URL that reproduces the exact same results when shared or reloaded — even with JavaScript disabled. + +You can even set up dependent filters — a "Size" group that only appears once a category is chosen, for example — for a genuinely guided filtering experience. + +## The result + +The kind of faceted filtering shoppers expect from major ecommerce sites, built entirely through Elementor controls. diff --git a/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-quick-view.md b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-quick-view.md new file mode 100755 index 0000000..1c9d180 --- /dev/null +++ b/marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-quick-view.md @@ -0,0 +1,15 @@ +# Woo Quick View + +Let shoppers preview a product without ever leaving your shop grid. + +## The problem it solves + +Every click away from a product grid is a chance for a shopper to lose momentum — and browsing a busy category means a lot of back-and-forth between the grid and individual product pages just to check details, sizes, or images. + +## How it helps + +Woo Quick View adds a button to every product in your grid that opens the full product view in a popup — sizes, images, description, add to cart — without navigating away. The button appears automatically across your product loops once switched on, including on variable products where it can replace the "Select options" link entirely. Hovering a button quietly preloads the popup content in the background, so by the time a shopper actually clicks, it feels instant. + +## The result + +A faster, more fluid browsing experience that keeps shoppers on your grid, discovering more products instead of clicking in and out of individual pages. diff --git a/marketing/dotjuice-elementor-tools/documentation/marketing/overview.md b/marketing/dotjuice-elementor-tools/documentation/marketing/overview.md new file mode 100755 index 0000000..7914cb3 --- /dev/null +++ b/marketing/dotjuice-elementor-tools/documentation/marketing/overview.md @@ -0,0 +1,31 @@ +# Dotjuice Elementor Tools + +Free, practical Elementor widgets built for real WordPress and WooCommerce sites — screenshot capture, dark mode, WooCommerce styling fixes, and small utilities that solve problems the native widgets don't. + +## Why these widgets exist + +Elementor's own widget library, and even Elementor Pro's, leaves gaps — especially around WooCommerce, where the native shop and product widgets often need extra work to look and behave the way a real store needs. Dotjuice Elementor Tools fills those gaps with a set of focused, well-built widgets, each solving one specific problem well rather than trying to be a do-everything mega-plugin. + +## What's included + +**Screenshot Capture** — drop a live, auto-updating screenshot of any URL onto your page, styled and cached like a normal image. + +**Dark Mode Toggle** — a site-wide light/dark mode switch that works with your existing Elementor Global Colors, no redesign required. + +**Keyword Linker** — automatically turn chosen keywords across your content into links, without manually editing every post. + +**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 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. + +## Built to work with what you already have + +Every widget in this plugin is designed to sit alongside your existing theme, Elementor Pro, and WooCommerce setup rather than fight it — extending native functionality where possible instead of replacing it wholesale. + +## Free forever, with a Pro upgrade path + +Every widget listed here is free, permanently. [Dotjuice Elementor Tools Pro](../../../dotjuice-elementor-tools-pro/documentation/marketing/overview.md) adds advanced WooCommerce widgets (AJAX product filtering, a full cart widget, quick view, custom product tabs), ACF frontend forms, and watermark-free screenshots for stores and sites that need to go further. diff --git a/marketing/dotjuice-elementor-tools/documentation/marketing/product-attribute-colours.md b/marketing/dotjuice-elementor-tools/documentation/marketing/product-attribute-colours.md new file mode 100755 index 0000000..b01dfe0 --- /dev/null +++ b/marketing/dotjuice-elementor-tools/documentation/marketing/product-attribute-colours.md @@ -0,0 +1,17 @@ +# Product Attribute Colours + +A proper colour manager for your product attributes — the missing piece behind real colour swatches on your store. + +## The problem it solves + +WooCommerce doesn't have a built-in way to say "this Red attribute term is actually this exact shade of red" — so building colour swatches for variable products usually means custom development or a dedicated (often paid) swatches plugin. + +## How it helps + +Product Attribute Colours gives every term in any of your product attributes (Colour, Material, or any custom attribute) its own colour picker, with support for multiple terms sharing the same swatch colour — perfect for near-identical shades like "Ash", "Carbon Grey", and "Slate" that should all display the same swatch. + +## The result + +A central place to define your product colours once, ready to power colour swatches anywhere on your store that supports them. + +*Configuring colours here is free. Displaying them as clickable swatches on your product pages uses the [Woo Add to Cart Transform](widgets/woo-add-to-cart-transform.md) widget's swatch mode, which is a [Pro](../../../dotjuice-elementor-tools-pro/documentation/marketing/overview.md) feature.* diff --git a/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/dark-mode-toggle.md b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/dark-mode-toggle.md new file mode 100755 index 0000000..be5e92a --- /dev/null +++ b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/dark-mode-toggle.md @@ -0,0 +1,17 @@ +# Dark Mode Toggle + +A one-click, site-wide dark mode switch — using the color palette you've already built in Elementor. + +## The problem it solves + +Dark mode is one of the most-requested features on modern websites, but building it properly usually means maintaining a whole second stylesheet, or wiring up custom CSS variables by hand across every template. + +## 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. + +## The result + +A genuine site-wide dark mode, built entirely from colors you already control through Elementor — no separate stylesheet 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.* diff --git a/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/extended-product-loop.md b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/extended-product-loop.md new file mode 100755 index 0000000..501b4e1 --- /dev/null +++ b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/extended-product-loop.md @@ -0,0 +1,15 @@ +# 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. diff --git a/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/image-carousel-transform.md b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/image-carousel-transform.md new file mode 100755 index 0000000..50e6ce5 --- /dev/null +++ b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/image-carousel-transform.md @@ -0,0 +1,17 @@ +# 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.* diff --git a/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/keyword-linker.md b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/keyword-linker.md new file mode 100755 index 0000000..6f74650 --- /dev/null +++ b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/keyword-linker.md @@ -0,0 +1,15 @@ +# Keyword Linker + +Turn chosen keywords into links automatically, across every post and page — without editing content by hand. + +## The problem it solves + +Internal linking (and the occasional important external link) is one of those SEO and UX basics that's simple in theory but tedious in practice: every time you mention a term you want linked, you have to remember to add the link manually, in every post, every time. + +## How it helps + +Define a keyword once, tell it where to link, and Keyword Linker automatically turns every matching mention of that word across your site's content into a link — with control over how many times per page it should link, whether to bold the result, and whether the link opens in a new tab or carries a "nofollow" attribute. + +## The result + +Consistent internal (or external) linking across your whole site, maintained from one central list instead of hunting through old posts by hand. diff --git a/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/markdown-widget.md b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/markdown-widget.md new file mode 100755 index 0000000..cd4028d --- /dev/null +++ b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/markdown-widget.md @@ -0,0 +1,15 @@ +# Markdown Widget + +Embed a live Markdown file directly into your page — always showing the current version, with no copy-pasting. + +## The problem it solves + +Documentation, changelogs, and README files usually live in Markdown format in a repository, separate from your WordPress site. Keeping a WordPress page in sync with them means manually copying the content across every time it changes. + +## How it helps + +Point the Markdown Widget at any publicly accessible Markdown file URL — a GitHub README, a changelog, a docs page — and it fetches and renders the file's content live in the visitor's browser, styled as proper HTML headings, lists, code blocks, and links. + +## The result + +A documentation or changelog page on your WordPress site that's always current, sourced directly from wherever the Markdown file actually lives. diff --git a/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/screenshot-capture.md b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/screenshot-capture.md new file mode 100755 index 0000000..a905619 --- /dev/null +++ b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/screenshot-capture.md @@ -0,0 +1,17 @@ +# Screenshot Capture + +A live, always-current screenshot of any website — dropped onto your page like a normal image, with full styling control. + +## The problem it solves + +Showcasing another website — a client's project, a partner site, a "before" example — usually means manually taking a screenshot, uploading it, and remembering to update it whenever the target page changes. It's tedious, and the image goes stale the moment the source page is updated. + +## How it helps + +Screenshot Capture fetches a real screenshot of any URL you give it, on desktop, tablet, or phone dimensions, full-page or single-viewport, and displays it exactly like an image widget — with the same transform, hover, box-shadow, and filter controls you'd expect from a premium Elementor widget. Screenshots are cached automatically, so your page stays fast, and a one-click refresh in the editor lets you pull a fresh capture whenever you need one. + +## The result + +A portfolio, case study, or partner showcase page that always shows a real, current view of the site it's linking to — without a manual screenshot workflow. + +*Free version screenshots include a small watermark. [Dotjuice Elementor Tools Pro](../../../../dotjuice-elementor-tools-pro/documentation/marketing/overview.md) removes it.* diff --git a/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/woo-add-to-cart-transform.md b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/woo-add-to-cart-transform.md new file mode 100755 index 0000000..9d1fe49 --- /dev/null +++ b/marketing/dotjuice-elementor-tools/documentation/marketing/widgets/woo-add-to-cart-transform.md @@ -0,0 +1,17 @@ +# Woo Add to Cart Transform + +Turn WooCommerce's plain variation dropdowns into clickable buttons — the way a modern product page should look. + +## The problem it solves + +WooCommerce's default variable-product selector is a set of `