Add marketing docs from dotjuice-elementor-tools, dotjuice-elementor-tools-pro, and dotjuice-pagespeed
This commit is contained in:
31
marketing/dotjuice-elementor-tools/documentation/marketing/overview.md
Executable file
31
marketing/dotjuice-elementor-tools/documentation/marketing/overview.md
Executable 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.
|
||||
@@ -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.*
|
||||
@@ -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.*
|
||||
@@ -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.
|
||||
@@ -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.*
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.*
|
||||
@@ -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.*
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
Reference in New Issue
Block a user