jandieman/dotjuice-plugin-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docs pass: add widget screenshots and expand the user guides

Browse Source 
Add 21 screenshots across the Elementor Tools docs and rework the pages
around them: clearer opening lines, settings tables that state defaults,
and callouts for the parts people trip over. Also refreshes the Pro
getting-started, Custom Product Tabs and Product Filter pages, plus the
matching marketing copy.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Johan
2026-07-31 06:13:57 +00:00
parent 1d9b26b108
commit f4838865c9
43 changed files with 672 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/dotjuice-elementor-tools/widgets/woo-my-account-transform.md
View File

@@ -1,23 +1,39 @@
# Woo My Account Transform
Bring WooCommerce's My Account area in line with the rest of your design.
Found in the Elementor panel under **Dotjuice → Woo My Account Transform**. Requires WooCommerce.
![The My Account area with custom button and link styling](../assets/img/woo-my-account-transform.png)
*Screenshot: a logged-in My Account page — Orders view — showing styled action buttons and order-table links matching the site's branding.*
## How it works
Place this widget on your My Account page template (typically inside your Elementor Theme Builder's My Account template). It detects buttons and links within the account content area and applies the styling you configure below.
Place this widget on your My Account page template, typically inside Elementor's Theme Builder My Account template. It detects the buttons and links within the account content area and applies your styling to them.
The My Account area is normally one of the hardest parts of a WooCommerce store to style, because it's rendered by WooCommerce templates rather than built in Elementor. This widget bridges that gap without you needing to override any templates.
## Styling
- **Button Style** — Normal and Hover states, each with text colour, background colour, border, border radius, and box shadow, plus shared typography and padding. Applies to account action buttons (e.g. form submit buttons, "Pay", "Cancel").
- **Link Style** — typography, plus Normal and Hover text colour, applied to order-table links: download links, product name links, and order number links.
| Section | Applies to | Controls |
|---|---|---|
| **Button Style** | Account action buttons — form submits, "Pay", "Cancel", "View order" | Normal and Hover states with text colour, background, border, radius and box shadow, plus shared typography and padding |
| **Link Style** | Order-table links — downloads, product names, order numbers | Typography, plus Normal and Hover text colour |
## Setting it up
1. Add the widget anywhere inside your My Account page template.
2. Configure your button and link colours to match your site's branding.
3. Visit the My Account page while logged in (as a real customer account, since this only applies within the actual account content) to check the styling.
1. Add the widget anywhere inside your My Account page template. Position doesn't matter — it styles the whole area, not the spot where it sits.
2. Set your button and link colours to match your branding.
3. **Preview on the front end while logged in as a real customer account.** This is the only reliable way to check it.
## Good to know
- **Styling applies across the whole My Account area on that page, not just near the widget** — you only need to place this widget once on your My Account template for it to take effect everywhere within it.
- You won't see live account content while editing in Elementor — the editor shows a placeholder instead, since there's no real logged-in account context inside the editor. Preview your changes by viewing the actual My Account page on the front end while logged in.
:::caution The editor can't show you real account content
Elementor has no logged-in customer context, so the editor shows a placeholder rather than live orders, addresses or downloads. Style with the front end open in another tab and refresh as you go.
A test customer account with at least one completed order gives you something realistic to style against — an empty account shows almost none of the elements these controls target.
:::
- **Styling applies across the whole My Account area on that page, not just near the widget.** Place it once per template; adding more instances does nothing extra.
- Buttons and links inside the account content are targeted, but the account **navigation menu** is a separate element — style that with Elementor's own controls or your theme.
- If your theme heavily overrides WooCommerce's account templates with custom markup, some elements may fall outside what this widget targets.