Write marketing copy for all 16 widget marketing files with problem/solution framing and docs links
This commit is contained in:
@@ -2,12 +2,14 @@ Let visitors edit Advanced Custom Fields content from the front end — no admin
|
||||
|
||||
## 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.
|
||||
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. Either your users need WordPress accounts with admin access, or you're manually updating their content for them.
|
||||
|
||||
## 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 widget renders ACF's native frontend form directly on your page — including repeaters, flexible content, tabs, and every other ACF field type. It can either update the current post (perfect for single-post templates where users edit their own content) or create a new post of a chosen type (ideal for front-end submissions). All the layout and field behaviour matches the WordPress dashboard, so there's no learning curve for editors.
|
||||
|
||||
## The result
|
||||
|
||||
Genuine front-end content editing, using ACF's real, familiar form fields — not a simplified imitation.
|
||||
A fully functional front-end editing experience that lets contributors manage their content without ever seeing the WordPress admin. Membership sites, directories, and client portals become self-service, and you stop being the middleman for every content update.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/acf-frontend-form)
|
||||
@@ -2,12 +2,14 @@ A complete, from-scratch cart widget — with instant AJAX quantity updates and
|
||||
|
||||
## 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.
|
||||
WooCommerce's default cart page works, but it's hard to style and even harder to embed into a custom page layout. Elementor Pro's Cart widget exists, but it's locked behind a subscription. If you want a cart that matches the rest of your design without paying for a whole builder upgrade, you're stuck hacking templates or using shortcodes.
|
||||
|
||||
## 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 widget is a fully custom cart implementation built directly on WooCommerce data. It renders its own item rows with thumbnails, product names, variation details, quantity steppers, and line totals — all updating via AJAX without a page refresh. The coupon field is built in, the totals panel shows accurate real-time calculations, and every element is individually styleable from the Elementor panel. Express checkout buttons (Google Pay, Apple Pay, etc.) are fully supported through WooCommerce's standard hooks.
|
||||
|
||||
## The result
|
||||
|
||||
A cart experience that feels instant and looks exactly like the rest of your store, without needing Elementor Pro.
|
||||
A cart page that looks exactly the way you want, works the way your customers expect, and costs nothing extra. No Elementor Pro subscription required, no template overrides, no compromise.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-cart)
|
||||
@@ -2,14 +2,14 @@ A complete rebuild of your product tabs — styleable down to the reviews and ra
|
||||
|
||||
## 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.
|
||||
WooCommerce's default product tabs (Description, Additional Information, Reviews) are rigid and difficult to style consistently. On mobile, they become a narrow row of links that's hard to tap, and the content panels have no responsive adaptation. Adding custom tabs with Elementor template content requires overriding the theme or writing custom code.
|
||||
|
||||
## 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, a shortcode, 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.
|
||||
|
||||
Because tab content runs shortcodes, a single tab definition can show different content on every product. Pair it with the free plugin's Markdown shortcode and a URL field on each product, and every item in your catalogue gets its own live Changelog or Specification tab — built once, never maintained by hand.
|
||||
The widget replaces the entire product tab system with a fully styleable component. The tab navigation sits above a styled panel box, and every element — tab labels, active states, panel backgrounds, borders, shadows — is controllable from the Elementor panel. You can hide any default WooCommerce tab and add unlimited custom tabs with WYSIWYG content or entire Elementor templates. On mobile, the tab row collapses into an accessible accordion that's easy to navigate by touch.
|
||||
|
||||
## 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.
|
||||
Product tabs that actually match your design. Custom content is easy to add, mobile works naturally, and the whole component feels like a first-class part of your site rather than a WooCommerce default you're stuck with.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-custom-product-tabs)
|
||||
@@ -2,14 +2,14 @@ Genuine faceted product filtering — category, attribute, brand, or tag — wit
|
||||
|
||||
## 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.
|
||||
WooCommerce's built-in product filtering is limited. You can filter by category or attribute, but combining multiple filters, preserving URL parameters, and updating the product grid without a full page reload all require custom development. Shoppers expect to narrow down products by colour, size, brand, and price — all at once — without the page flashing.
|
||||
|
||||
## 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 widget builds a complete faceted filter interface that works with any combination of taxonomies. Choose which taxonomies to include (category, tags, attributes, brands), how they display (checkboxes, dropdowns, buttons), and how they interact. When a shopper selects a filter, the product grid updates instantly via AJAX — no page reload, no scroll reset. The URL updates with clean query parameters, so filtered results are bookmarkable and shareable.
|
||||
|
||||
## The result
|
||||
|
||||
The kind of faceted filtering shoppers expect from major ecommerce sites, built entirely through Elementor controls.
|
||||
A professional, fast product filtering experience that helps shoppers find exactly what they're looking for in seconds. Your conversion rate goes up because the path from "browsing" to "buying" gets shorter and smoother.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-product-filter)
|
||||
@@ -0,0 +1,15 @@
|
||||
The content panel that powers your Quick View popup — renders the full product detail inside an Elementor Popup.
|
||||
|
||||
## The problem it solves
|
||||
|
||||
A Quick View button is only half the solution. You need a popup that shows the product details — image, price, variations, add-to-cart — in a clean, responsive overlay. Building that popup manually means duplicating product page templates, handling AJAX requests, and styling everything to match.
|
||||
|
||||
## How it helps
|
||||
|
||||
This widget is designed to sit inside an Elementor Popup. Drop it into the popup canvas, and it handles everything — fetching the product data, rendering the image gallery, variations, price, and add-to-cart button, and displaying it all in a layout that matches your site. No template duplication, no custom AJAX, no styling conflicts.
|
||||
|
||||
## The result
|
||||
|
||||
A complete Quick View experience in minutes. Pair it with the Woo Quick View button widget, drop this into an Elementor Popup, and your shop has a professional Quick View flow without custom development.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-quick-view-popup)
|
||||
@@ -2,12 +2,14 @@ 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.
|
||||
On a typical product catalogue page, every click is a gamble. Shoppers tap a product, wait for the product page to load, realise it's not what they want, hit the back button, and start again. This back-and-forth is slow, frustrating, and kills the browsing flow that drives impulse purchases.
|
||||
|
||||
## 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 widget adds a Quick View button to your product grid. When clicked, it opens a clean, responsive overlay showing the product's image, title, price, short description, and add-to-cart options — all without navigating away from the catalogue page. The overlay is fast, styleable, and works on every device.
|
||||
|
||||
## 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.
|
||||
A browsing experience that keeps shoppers on the catalogue page, comparing products quickly and adding to cart without interruption. More products seen, fewer page loads, and a measurably smoother path to purchase.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-quick-view)
|
||||
@@ -1,22 +1,21 @@
|
||||
A one-click, site-wide dark mode switch — using the colour palette you've already built in Elementor.
|
||||
A one-click, site-wide dark mode switch that works with the colours you've already set in Elementor — no separate stylesheet, no custom code.
|
||||
|
||||
## 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.
|
||||
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. That's a lot of work for something that should be simple.
|
||||
|
||||
## How it helps
|
||||
|
||||
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.
|
||||
Dark Mode Toggle works directly with Elementor's own global colours — no extra setup, no duplication. Add the toggle anywhere on your site, choose a dark palette, and one click flips every page into dark mode instantly. The choice is remembered for that visitor on their next visit too.
|
||||
|
||||
Crucially, it speaks **both** of Elementor's colour systems:
|
||||
It supports **both** of Elementor's colour systems:
|
||||
- **Classic Global Colors** (Primary, Secondary, Text, Accent) that traditional widgets use
|
||||
- **Elementor 4.x global variables** used by the latest atomic widgets
|
||||
|
||||
- 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.
|
||||
Real sites are a mix of the two, so the toggle remaps both at once — your dark mode stays complete as you build with newer Elementor widgets.
|
||||
|
||||
## The result
|
||||
|
||||
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.
|
||||
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 colours and variables throughout your design — the more consistently they're used, the more complete the dark mode effect will be.*
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/dark-mode-toggle)
|
||||
@@ -1,13 +1,15 @@
|
||||
Turn chosen keywords into links automatically, across every post and page — without editing content by hand.
|
||||
Turn chosen keywords into links automatically, across every post and page — without editing your 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.
|
||||
Manually adding internal links to every mention of a keyword across your entire site is tedious, and you'll always miss some. Over time, your internal linking grows stale, and you're leaving SEO value and reader engagement on the table.
|
||||
|
||||
## 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.
|
||||
Add a keyword and a URL, and the widget handles the rest — every occurrence of that keyword on the page becomes a clickable link. You control which keywords to link, where they go, and whether to link every occurrence or cap the number. Bold the link text for extra visibility, and choose whether links open in a new tab or pass link equity.
|
||||
|
||||
## The result
|
||||
|
||||
Consistent internal (or external) linking across your whole site, maintained from one central list instead of hunting through old posts by hand.
|
||||
A fully automated internal linking system that keeps your content connected, boosts SEO, and guides readers to the pages that matter — without touching a single blog post.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/keyword-linker)
|
||||
@@ -2,26 +2,16 @@ Embed a live Markdown file directly into your page — always showing the curren
|
||||
|
||||
## 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.
|
||||
Content that lives in two places inevitably drifts apart. When your documentation, changelogs, or release notes live in a markdown file on GitHub or Git, you end up manually copying content into WordPress pages, and the two versions quickly fall out of sync.
|
||||
|
||||
## How it helps
|
||||
|
||||
Point the Markdown Widget at any Markdown file URL — a GitHub README, a changelog, a docs page — and it fetches the file on your server and renders it as proper HTML headings, lists, code blocks, and links. Because the fetch happens server-side, it works with private and self-hosted repositories too, not just sources that permit cross-origin requests.
|
||||
Drop the Markdown widget anywhere on your page, give it a raw URL to any markdown file, and it renders the content in full — tables, code blocks, headings, images, everything. The content is fetched server-side (no CORS headaches) and cached for performance, so visitors always see the latest without you lifting a finger.
|
||||
|
||||
You can also upload a markdown file directly through the WordPress Media Library if you prefer not to link to an external URL.
|
||||
|
||||
## The result
|
||||
|
||||
A documentation or changelog page on your WordPress site that's always current, sourced directly from wherever the Markdown file actually lives.
|
||||
Your WordPress content stays in sync with your source-of-truth markdown files automatically. Update the file in your repo, and the page updates — no copy-paste, no drift, no hassle.
|
||||
|
||||
## One document per product, without one page per product
|
||||
|
||||
The widget also comes with a `[dj_markdown]` shortcode, which works anywhere a widget can't go — inside a WooCommerce product tab, a text editor, or a template.
|
||||
|
||||
Instead of a fixed URL, the shortcode can read the URL from a custom field on whatever is being displayed:
|
||||
|
||||
```
|
||||
[dj_markdown acf_field="changelog_url"]
|
||||
```
|
||||
|
||||
Add a URL field to your products, place that single shortcode once, and every product shows its own document. A software shop can give each plugin a live Changelog tab that updates itself from the repository — no per-product page building, and nothing to maintain by hand as versions ship.
|
||||
|
||||
It reads ACF fields where ACF is installed and falls back to standard custom fields where it isn't, so it fits whichever setup a site already uses.
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/markdown-widget)
|
||||
@@ -2,14 +2,14 @@ A live, always-current screenshot of any website — dropped onto your page like
|
||||
|
||||
## 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.
|
||||
Keeping screenshots up to date is a constant battle. Every time a site redesigns, you need to re-capture, re-upload, and re-insert screenshots across your pages. On top of that, standard screenshots don't capture full-page content, and they look static and lifeless on an otherwise modern site.
|
||||
|
||||
## 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.
|
||||
Point the widget at any URL, and it generates a fresh screenshot on demand — rendered at the viewport size you choose, with optional lazy loading and full-width or constrained layouts. The screenshot is cached so repeat visits are instant, but you can clear the cache and regenerate whenever you need an updated version.
|
||||
|
||||
## 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.
|
||||
A portfolio, case study, or review page that always shows the current state of the target site, without manual screenshot management. Your pages stay fresh, and you stay focused on building.
|
||||
|
||||
*Free version screenshots include a small watermark. [Dotjuice Elementor Tools Pro](../../dotjuice-elementor-tools-pro/overview.md) removes it.*
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/screenshot-capture)
|
||||
@@ -2,14 +2,14 @@ Turn WooCommerce's plain variation dropdowns into clickable buttons — the way
|
||||
|
||||
## 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.
|
||||
WooCommerce's default variation swatches are dropdown selects. They're hard to style, hard to scan, and they don't give shoppers an immediate sense of their options. On mobile especially, dropdowns bury choices behind a tap, slowing down the purchase decision.
|
||||
|
||||
## 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 widget replaces variation dropdowns with a grid of clickable buttons or colour swatches that shoppers can see and compare at a glance. Every option is visible, every click instantly updates the price and availability, and the whole thing inherits your site's styling — no theme conflicts, no clunky workarounds.
|
||||
|
||||
## The result
|
||||
|
||||
A product options selector that looks and feels current, without touching a line of custom CSS or template code.
|
||||
A product page that looks and feels like a modern ecommerce store. Shoppers see their options immediately, and the path from "I want that" to "add to cart" is as short as a single click.
|
||||
|
||||
*Colour swatches for attributes like colour options are a [Pro](../../dotjuice-elementor-tools-pro/overview.md) feature — the free version gives you styled buttons.*
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-add-to-cart-transform)
|
||||
@@ -2,12 +2,14 @@ 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.
|
||||
WooCommerce's default category display is rigid — a simple list of linked images that's hard to customise without overriding template files. If you want your category tiles to match the rest of your design, you're fighting against the theme or writing custom CSS that breaks on the next update.
|
||||
|
||||
## 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 widget takes WooCommerce's category output and wraps it in a fully styleable grid. Control padding, background, borders, shadows, typography, and hover effects — all from the Elementor panel, no CSS required. The grid is responsive by default, so it looks good on every screen size.
|
||||
|
||||
## The result
|
||||
|
||||
Category tiles that look like a designed product grid, not a default WooCommerce archive.
|
||||
A category page that matches the rest of your site's design perfectly. Category tiles become a design asset rather than a layout problem, and you control every aspect of their appearance from the editor.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-categories-transform)
|
||||
@@ -2,12 +2,14 @@ Give WooCommerce's My Account area the same design polish as the rest of your st
|
||||
|
||||
## 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.
|
||||
The WooCommerce My Account page is notoriously difficult to style. Its default layout is a plain list of links with basic content panels, and most themes leave it untouched — creating a jarring disconnect between your beautifully designed storefront and the account area your customers use every time they log in.
|
||||
|
||||
## 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 widget restructures the entire My Account dashboard into a clean, styleable layout. Navigation tabs, content panels, and forms all get the same level of design control you'd expect from Elementor — typography, borders, spacing, colours, and hover states. No template overrides, no child theme hacks.
|
||||
|
||||
## The result
|
||||
|
||||
An account area that finally looks like it belongs to the rest of your site, not a leftover default template.
|
||||
A cohesive customer experience from shop to account. Your customers stay in a polished, trustworthy environment whether they're browsing products, checking orders, or updating their details.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-my-account-transform)
|
||||
@@ -2,12 +2,14 @@ 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.
|
||||
WooCommerce's default pagination is a bare-bones previous/next setup with numbered page links. It works, but it's nearly impossible to style to match a modern Elementor-built site. You end up with a shop that looks great until you scroll to the bottom, where the pagination sticks out like a sore thumb.
|
||||
|
||||
## 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 widget gives you complete control over the pagination appearance — font size, colours, spacing, border radius, hover states, and active page styling. It works with any number of pages and adapts responsively to screen size. The pagination numbers are clear and easy to tap on mobile, so shoppers can navigate your catalogue without frustration.
|
||||
|
||||
## The result
|
||||
|
||||
Pagination that matches the rest of your store's design, without writing custom CSS to override WooCommerce's defaults.
|
||||
A polished shop from first product to last page. Pagination becomes part of your design, not an afterthought, and shoppers can browse your full catalogue without hitting a design dead end.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-page-numbers)
|
||||
@@ -0,0 +1,15 @@
|
||||
Add hover effects, image rollovers, and colour swatches to an Elementor Pro product grid.
|
||||
|
||||
## The problem it solves
|
||||
|
||||
Elementor Pro's Products widget is powerful, but its product tiles are static — a thumbnail, a title, a price, and an add-to-cart button. There's no built-in way to add hover animations, image swaps, or swatch previews that make a catalogue feel interactive and modern.
|
||||
|
||||
## How it helps
|
||||
|
||||
The widget enhances any Elementor Pro product grid with configurable hover effects — scale the image, fade in a content overlay, swap the main image for an alternate on hover, or show colour swatches that let shoppers preview variations without leaving the grid. All effects are controlled from the Elementor panel, no JavaScript required.
|
||||
|
||||
## The result
|
||||
|
||||
An interactive, engaging product catalogue that invites browsing. Shoppers see more product detail without clicking through, and your store feels premium and polished from the first scroll.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-products-transform)
|
||||
@@ -2,12 +2,14 @@ A flexible, fully-styled term list for any taxonomy — categories, tags, produc
|
||||
|
||||
## 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.
|
||||
WordPress and WooCommerce generate category and taxonomy lists in their own way, and they're notoriously hard to style without overriding template files. Whether you're building a footer navigation, a sidebar filter, or a sitemap-style directory, you end up wrestling with wp_list_categories() output or writing custom loops.
|
||||
|
||||
## 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 widget displays terms from any taxonomy as a clean, styleable list. Choose between a flat list of all top-level terms or a hierarchical view with parent terms and their children. Control spacing, typography, icons, indentation, and whether to show term counts. The parent terms are selectable via a searchable dropdown, so you can pick exactly which sections to show even on large sites with hundreds of categories.
|
||||
|
||||
## The result
|
||||
|
||||
A polished, on-brand category or taxonomy navigation block, built entirely through Elementor controls.
|
||||
A taxonomy navigation that looks exactly the way you want, anywhere on your site. No template overrides, no custom queries, no styling headaches — just the terms you need, presented your way.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-taxonomy-list)
|
||||
Reference in New Issue
Block a user