View Categories

Show the Products per Page Selector as Radio Buttons

0:00 1:29
Table of Contents

Show the selector as radio buttons instead of a dropdown #

To show the products per page selector as radio buttons in Number of Products per Page – Pagination Manager for WooCommerce, go to WPFactory > Products per Page, edit the Template field in the Template Options block, replace %dropdown% with %radio%, and save. Use the Radio glue field to set the separator between buttons.

Steps #

  1. Go to WPFactory > Products per Page (also reachable at WooCommerce > Settings > Products per Page).
  2. In the Template Options block, edit the Template field (option id alg_products_per_page_text).
  3. Replace %dropdown% with %radio%. For example: Products per page: %radio%.
  4. Save changes.

Space the buttons with Radio glue #

The Radio glue field (option id alg_wc_products_per_page_radio_glue) sets the string placed between each radio button. The default is a single space. To put each option on its own line, enter <br>; to separate with a pipe, enter | .

Style the buttons #

The Selector class and Selector style fields apply to each radio <input> element when you use %radio% (they apply to the <select> element when you use %dropdown%). Add a class here and target it from the Custom CSS field in the Advanced section for finer styling.

Tip: radio buttons work best with a short options list. If you show many choices, a dropdown keeps the layout tidy.

Get more control #

Both selector styles are free. Number of Products per Page – Pagination Manager for WooCommerce Pro adds an editable options list and a Products per Page widget. See what Pro unlocks.