Theme compatibility
Selectors tell the plugin where your theme puts the product list and page links. The defaults work with standard classic and block themes; change them only for custom product markup.
- Page Selectors card: Product List, Product, Pagination, Next Page Link and Result Count fields with their defaults
- Reset to Defaults card in the sidebar
Page selectors
| Setting | What it finds | Default |
|---|---|---|
| Product List | The element that directly contains the products | ul.products, ul.wc-block-product-template |
| Product | Each product inside the product list (direct children only) | li.product:not(.product-category), li.wc-block-product |
| Pagination | The theme's page links, hidden once loading works | .woocommerce-pagination, .wp-block-query-pagination |
| Next Page Link | The link to the next page of products (same site only) | .woocommerce-pagination a.next, a.wp-block-query-pagination-next |
| Result Count | "Showing 1–16 of 40 results", kept up to date | .woocommerce-result-count, .shop-toolbar__count |
Separate several selectors with commas. The first match on the page is used for the product list. The Result Count is only updated when it has the "from, to, total" shape; texts such as "Showing all 8 results" are left alone.
Finding your theme's selectors
- Open your shop page
Right-click a product and choose Inspect.
- Find the product and its list
Note the class of the element wrapping one product (for example
div.product-card) and of its parent (for examplediv.products-grid). - Find the page links
Note the class of the pagination block and its "next" link.
- Enter and save
For example Product List
div.products-grid, Productdiv.product-card. Test in a private window.
Selector rules
- Up to 300 characters, using standard CSS selectors: classes, IDs, attributes,
>,:not()and similar. - Allowed characters: letters, digits, spaces and
- _ . # > + ~ * : , ( ) [ ] = " ' ^ $ |. A selector with any other character (such as/ \ @ { } ; <), or an empty one, is reset to the default when you save. Usea.nextrather thana[href*="/page/"]. - A selector that matches nothing never breaks the page.
Excluding a product list
Add the class siteryn-is-disable to an element (in the block editor: Advanced → Additional CSS class(es)) and product lists inside it are ignored. Use it when another product list, such as a featured products block in the shop description, appears above the main one.