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">
    <?php
        $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' );
            endwhile;
        } 
    wp_reset_postdata();
?>

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.
Mikey.


Source: wordpress

Leave a Reply