30 lines
1.6 KiB
Markdown
Executable File
30 lines
1.6 KiB
Markdown
Executable File
# Woo Page Numbers
|
||
|
||
Found in the Elementor panel under **Dotjuice → Woo Page Numbers**. Requires WooCommerce.
|
||
|
||
## 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.
|
||
|
||
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.
|
||
|
||
## Styling
|
||
|
||
There's no Content tab — every setting 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 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.
|
||
|
||
## 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.
|