Skip to main content

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.