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

44
docs/dotjuice-elementor-tools/widgets/woo-page-numbers.md
View File

@@ -1,29 +1,51 @@
# Woo Page Numbers
Styleable product pagination that co-operates with AJAX filtering.
Found in the Elementor panel under **Dotjuice → Woo Page Numbers**. Requires WooCommerce.
![Styled product pagination on a shop archive](../assets/img/woo-page-numbers.png)
*Screenshot: a shop archive footer showing the pagination with the current page highlighted in the site's accent colour.*
## How it works
Place this widget on your Shop page or any product archive/category template, where it will show. It wraps WooCommerce's built-in pagination and applies the styling you configure.
Place this widget on your Shop page or any product archive or category template. It wraps WooCommerce's built-in pagination and applies your styling.
This widget only shows real pagination when there's more than one page of results to paginate through — on a page with too few products to need pagination, it will render an empty space.
It only renders real pagination when there is more than one page of results. On an archive with too few products to paginate, it renders empty space.
## Styling
There's no Content tab — every setting lives under Style:
This widget has no Content tab — everything lives under Style.
- **Alignment** — left, centre, or right.
- **Typography** — font styling shared across all pagination links.
- **Normal / Hover** — text and background colour for regular page number links.
- **Active** — text and background colour for the current page indicator (styled separately, since it's not a clickable link).
- **Border** and **Padding** — spacing and border styling for each page number.
| Setting | What it does |
|---|---|
| **Alignment** | Left, centre or right. |
| **Typography** | Shared across all pagination links. |
| **Normal / Hover** | Text and background colour for regular page-number links. |
| **Active** | Text and background colour for the current page. Styled separately because it isn't a clickable link. |
| **Border** | Border style, colour, width and radius per page number. |
| **Padding** | Space inside each page number, which controls the tap-target size. |
:::tip Mind the tap target on mobile
Padding here decides how big each number is to tap. Anything under about 44px square gets fiddly on a phone — worth checking at a mobile breakpoint before you ship.
:::
## Setting it up
1. Add the widget to your Shop page or a product category archive template.
2. Style the Normal, Hover, and Active states to match your site.
3. Preview on the live site with enough products to trigger real pagination — the Elementor editor shows a fixed example (pages 1–4) purely so you can preview your styling, which won't match your site's real page count.
2. Style the Normal, Hover and Active states so the current page is clearly distinct.
3. **Preview on the live site with enough products to trigger real pagination.** The editor shows a fixed 1–4 example purely so you have something to style against — it won't match your real page count.
## Works with the AJAX Product Filter
If a Pro [Woo Product Filter](../../dotjuice-elementor-tools-pro/widgets/woo-product-filter.md) is on the same page with AJAX enabled, clicking a page number loads that page's products in place — no full reload — while keeping the shopper's active filters applied.
The browser URL updates to the normal pretty archive form, e.g. `/t-shirts/page/2/`, so paged views stay shareable and bookmarkable and the back/forward buttons work as expected. On sites using plain permalinks it falls back to `?paged=2`.
No extra configuration is needed — place both widgets on the page and they find each other.
## Good to know
- **The Elementor editor always shows a sample 4-page pagination** so you have something to style against — this is a preview aid only, not a reflection of your real page count. Check the actual front end to see your real pagination.
- **The editor always shows a sample four-page pagination.** It's a styling aid, not a reflection of your catalogue. Always confirm on the front end.
- Because it wraps WooCommerce's native pagination, it respects your **Products per page** setting from WooCommerce and your theme — change the page count there, not here.
- On an archive with a single page of results the widget outputs nothing visible, which can leave a gap if you've given its container padding or a margin.