Select Box Sort WooCommerce Products – AJAX?

I have a page that shows all of my products via a few loops. Three loops, one for each category. (Chairs, Tables, Dining). Each loop is housed by a Div with the class name corresponding to the product category. I would like to be able to sort the products by: Price-Ascending, Price-Descending, Most-Popular, Newest, On-Sale.

How can I create a Select box that dynamically sorts the products, but keeps them in their respective divs.

Here is an example of the loop for the product category ‘chairs’:

<div class="chairs">
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => 12,
            'product_cat' => 'chairs'
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) : $loop->the_post();
                wc_get_template_part( 'content', 'single-product' );

I would like it so that when the user makes a selection in the selection box the products re-arrange and are now sorted by the desired method.

I don’t know where to start, but I can imagine if making a selection can trigger the product area to reload then you may be able to also edit the loop to orderby a certain way each time a reload is triggered.

Perhaps you can have many loops, one for each orderby, and clear the product area on selection, then load in the corresponding loop? Just a thought.

Thank you for any and all contribution.

Source: wordpress

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.