# 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.