Catalog Pagination

The catalogue's pages, from WordPress's own paginate_links(): the URLs, the ellipsis and the current page are its doing. It prints nothing when everything fits on one page, and each arrow says where it goes.

Warning

A grid that paginates on a number of its own ends in a 404 — /shop/page/3/ exists only if the page's query has three pages.

Props

Prop	Type	Default	What it does
Size → Page button	text	2.5rem	The side of each number. It is also its touch target: below 24px it stops meeting WCAG 2.5.8.
Size → Number	text	var(--fe-woo-text-m, 0.88rem)
Colours → Page background	text	var(--fe-woo-surface, #ffffff)
Colours → Borders	text	var(--fe-woo-border, #e8ebef)
Colours → Current page	text	var(--fe-woo-accent, #111827)	Its background, and the outline any page takes under the pointer.
Colours → Text on the current page	text	var(--fe-woo-accent-color, #ffffff)

Variables of its own

Variable	Default	What it controls
--fe-woo-catalog-page-size	2.5rem	How big each page number is.
--fe-woo-catalog-page-text-size	var(--fe-woo-text-m, 0.88rem)	The number inside each page button. It used to inherit the site's body size, so a shop with large type had 2.5rem buttons with figures that did not fit.
--fe-woo-select-arrow	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E")	The chevron drawn in a dropdown — the sorting one and the variation picker's alike. Ours, not the browser's, so it looks the same everywhere and sits where you say.
--fe-woo-select-arrow-size	0.7rem	How big it is. The room reserved for it is worked out from this, so changing one does not leave the other wrong.
--fe-woo-select-arrow-inset	0.75rem	How far it sits from the edge. Worth raising with a pill radius, where the curve eats into the corner.