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'] ) &amp;&amp; ( ( $_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 );

Tawfiqur

I'm a freelance Wordpress Front-end Developer, work from my home office. Mostly do my freelance work on Upwork. I'm a TOP RATED freelancer with over 11K+ Work Hours. Specialize in HTML5, CSS3, SCSS, JavaScript, jQuery, Ajax, ES6, Bootstrap, PHP, MySQL, Wordpress, Woocommorce and Custom Wordpress Theme and Plugin Development

Leave a Reply

Close Menu