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