Add marketing docs from dotjuice-elementor-tools, dotjuice-elementor-tools-pro, and dotjuice-pagespeed

This commit is contained in:
Johan
2026-07-15 19:14:50 +00:00
parent d5b8c97ec3
commit 0df72afe3a
32 changed files with 554 additions and 0 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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 `<select>` dropdowns — functional, but visually dated compared to the button and swatch-based selectors shoppers expect from modern ecommerce sites.
## How it helps
Woo Add to Cart Transform converts those native dropdowns into a clean row of clickable buttons, fully restyled through Elementor controls — normal, hover, and selected states, spacing, borders, and typography all included. It also cleans up a few default WooCommerce quirks along the way: a clearer "reset selection" link, and per-variation pricing that always shows so shoppers always know exactly what they're about to pay.
## The result
A product options selector that looks and feels current, without touching a line of custom CSS or template code.
*Colour swatches for attributes like colour options are a [Pro](../../../../dotjuice-elementor-tools-pro/documentation/marketing/overview.md) feature — the free version gives you styled buttons.*

View File

@@ -0,0 +1,15 @@
# Woo Categories Transform
Turn WooCommerce's plain category tiles into a genuinely styleable grid.
## The problem it solves
When WooCommerce displays product subcategories — on your shop page, or wherever you list categories — the default markup offers very little styling control: a basic image and a title, with no easy way to add hover effects, overlays, or a polished card layout.
## How it helps
Woo Categories Transform restructures the category tile markup and gives you full control over it: box styling with borders and shadows, image hover transforms and filters, and a positioned content overlay for the category title — including a subtle blur effect behind the text if you want it.
## The result
Category tiles that look like a designed product grid, not a default WooCommerce archive.

View File

@@ -0,0 +1,15 @@
# Woo My Account Transform
Give WooCommerce's My Account area the same design polish as the rest of your store.
## The problem it solves
The My Account page — order history, downloads, account forms — is one of the most-visited parts of any WooCommerce store, but it's usually the most visually neglected, since it's built from WooCommerce's own default markup rather than your page builder.
## How it helps
Woo My Account Transform applies consistent, on-brand button and link styling across the entire My Account area — buttons on forms, order actions, and download links all pick up the same styled look, in normal and hover states.
## The result
An account area that finally looks like it belongs to the rest of your site, not a leftover default template.

View File

@@ -0,0 +1,15 @@
# Woo Page Numbers
Fully styleable pagination for your shop and product archive pages.
## The problem it solves
WooCommerce's default "Previous / 1 2 3 / Next" pagination is functional but plain, and offers very little native styling control — especially for showing which page a shopper is currently on.
## How it helps
Woo Page Numbers wraps WooCommerce's pagination with dedicated styling controls: colours, borders, and spacing for the normal state, the hover state, and — separately — the currently active page, so it's always visually obvious where a shopper is in your catalogue.
## The result
Pagination that matches the rest of your store's design, without writing custom CSS to override WooCommerce's defaults.

View File

@@ -0,0 +1,15 @@
# Woo Taxonomy List
A flexible, fully-styled term list for any taxonomy — categories, tags, product categories, or any custom taxonomy your site uses.
## The problem it solves
Building a "Shop by Category" footer block, a category sidebar, or a sitemap-style navigation list usually means either a rigid built-in widget with few styling options, or custom template code.
## How it helps
Woo Taxonomy List displays terms from any taxonomy on your site — flat (every term as one list) or hierarchical (chosen parent categories with their children nested beneath), with an optional clickable heading, term counts, custom icons, and deep styling control over every part of the list: parent items, child links, spacing, markers, and hover states.
## The result
A polished, on-brand category or taxonomy navigation block, built entirely through Elementor controls.

View File

@@ -0,0 +1,15 @@
# WooCommerce Account Settings
The everyday WooCommerce account-page tweaks every store eventually needs — without a custom code snippet.
## The problem it solves
Every WooCommerce store eventually wants a small adjustment to the default account experience: hiding a tab nobody uses, sending customers straight to their orders instead of a generic dashboard, or keeping certain product categories out of the main shop listing. None of these are hard to do with custom code, but they shouldn't require it either.
## How it helps
WooCommerce Hacks gives you toggle switches for the account-page adjustments stores ask for most often — hiding the Dashboard or Downloads tabs, redirecting straight to order history, a cleaner post-logout destination — plus a category picker for excluding specific product categories from your main shop page.
## The result
The small account-experience refinements that make a store feel deliberately built, available as simple toggles instead of custom development work.