f4838865c9
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>
52 lines
2.9 KiB
Markdown
Executable File
52 lines
2.9 KiB
Markdown
Executable File
# Woo Page Numbers
|
||
|
||
Styleable product pagination that co-operates with AJAX filtering.
|
||
|
||
Found in the Elementor panel under **Dotjuice → Woo Page Numbers**. Requires WooCommerce.
|
||
|
||
|
||
*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 or category template. It wraps WooCommerce's built-in pagination and applies your styling.
|
||
|
||
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
|
||
|
||
This widget has no Content tab — everything lives under Style.
|
||
|
||
| 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 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 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.
|