Swap button colours to Elementor CSS variables for theme compatibility

This commit is contained in:
2026-08-03 06:12:37 +00:00
parent a64040c996
commit e45e9a28fc
16 changed files with 16 additions and 16 deletions

View File

@@ -12,4 +12,4 @@ The widget renders ACF's native frontend form directly on your page — includin
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/acf-frontend-form" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/acf-frontend-form" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ The widget is a fully custom cart implementation built directly on WooCommerce d
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-cart" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-cart" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ The widget replaces the entire product tab system with a fully styleable compone
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-custom-product-tabs" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-custom-product-tabs" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ The widget builds a complete faceted filter interface that works with any combin
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-product-filter" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-product-filter" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ This widget is designed to sit inside an Elementor Popup. Drop it into the popup
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-quick-view-popup" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-quick-view-popup" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ The widget adds a Quick View button to your product grid. When clicked, it opens
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-quick-view" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-quick-view" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -18,4 +18,4 @@ Real sites are a mix of the two, so the toggle remaps both at once — your dark
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 href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/dark-mode-toggle" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/dark-mode-toggle" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ Add a keyword and a URL, and the widget handles the rest — every occurrence of
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/keyword-linker" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/keyword-linker" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -14,4 +14,4 @@ You can also upload a markdown file directly through the WordPress Media Library
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/markdown-widget" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/markdown-widget" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ Point the widget at any URL, and it generates a fresh screenshot on demand — r
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/screenshot-capture" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/screenshot-capture" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ The widget replaces variation dropdowns with a grid of clickable buttons or colo
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-add-to-cart-transform" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-add-to-cart-transform" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ The widget takes WooCommerce's category output and wraps it in a fully styleable
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-categories-transform" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-categories-transform" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ The widget restructures the entire My Account dashboard into a clean, styleable
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-my-account-transform" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-my-account-transform" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ The widget gives you complete control over the pagination appearance — font si
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-page-numbers" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-page-numbers" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ The widget enhances any Elementor Pro product grid with configurable hover effec
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-products-transform" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-products-transform" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>

View File

@@ -12,4 +12,4 @@ The widget displays terms from any taxonomy as a clean, styleable list. Choose b
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.
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-taxonomy-list" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>
<a href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-taxonomy-list" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation →</a>