woocommerce-products-perpage

How to add products per page dropdown to WooCommerce

If you have a lot of products in your shop you can give an option to the visitors to choose how many products to display per page. This can be achieved by adding a dropdown select box within the shop archive page.

// Lets create the function to house our form
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

function woocommerce_catalog_page_ordering() {
	?>
	<?php echo '<span class="itemsorder">' ?>
    <form action="" method="POST" name="results" class="woocommerce-ordering">
        <select name="woocommerce-sort-by-columns" id="woocommerce-sort-by-columns" class="sortby"
                onchange="this.form.submit()">
			<?php

			//Get products on page reload
			if ( isset( $_POST['woocommerce-sort-by-columns'] ) && ( ( $_COOKIE['shop_pageResults'] <> $_POST['woocommerce-sort-by-columns'] ) ) ) {
				$numberOfProductsPerPage = $_POST['woocommerce-sort-by-columns'];
			} else {
				$numberOfProductsPerPage = $_COOKIE['shop_pageResults'];
			}

			//  This is where you can change the amounts per page that the user will use. feel free to change the numbers and text as you want.
			$shopCatalog_orderby = apply_filters( 'woocommerce_sortby_page', array(
				//Add as many of these as you like, -1 shows all products per page
				//  ''       => __('Results per page', 'woocommerce'),
				'12' => __( '12 Products Per Page', 'ignition-child' ),
				'24' => __( '24 Products Per Page', 'ignition-child' ),
				'-1' => __( 'View All Products', 'ignition-child' ),
			) );

			foreach ( $shopCatalog_orderby as $sort_id => $sort_name ) {
				echo '<option value="' . $sort_id . '" ' . selected( $numberOfProductsPerPage, $sort_id, true ) . ' >' . $sort_name . '</option>';
			}
			?>
        </select>
    </form>

	<?php echo ' </span>' ?>
	<?php
}

// now we set our cookie if we need to
function dl_sort_by_page( $count ) {
	$count = 12; // Number of products per page
	if ( isset( $_COOKIE['shop_pageResults'] ) ) { // if normal page load with cookie
		$count = $_COOKIE['shop_pageResults'];
	}
	if ( isset( $_POST['woocommerce-sort-by-columns'] ) ) { //if form submitted
		setcookie( 'shop_pageResults', $_POST['woocommerce-sort-by-columns'], time() + 1209600, '/', 'your domain name', false ); //this will fail if any part of page has been output- hope this works!
		$count = $_POST['woocommerce-sort-by-columns'];
	}

	// else normal page load and no cookie
	return $count;
}

add_filter( 'loop_shop_per_page', 'dl_sort_by_page' );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_page_ordering', 20 );

About The Author

6 thoughts on “How to add products per page dropdown to WooCommerce”

  1. 1. You must replace && with &&
    2.Code replace Order drop down box
    3.It is not working when make a selection from drop down list.

  2. Hi,
    I have added that code in my snippets but untofortuanlly I am not able to see the dropdown on our shop page.

    Can you let me know what will be an issue?

    Looking forward to hearing from you!

    Thanks in advance!

  3. Hi,
    It is working fine but when I use pagination so again I have to select the dropdown.
    Can we not keep it the same per page number for the pagination as well?

    Thanks in advance!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top