Filter results with custom field values and dropdown

I need to filter posts by a custom field value.

My specific example:

  • User browse to products > category 1 > subcategory A.
  • ALL “subcategory A” items (products custom post type) are displayed
    as default by date.
  • Each item in subcategory A has a custom field “size”. User can select the size with a dropdown menu and posts are filtered displaying only items with “custom field:size” = “selected size”. Filter is kept also in pagination, because products are on more pages.

I’ve checked a lot of answers, but no case was simple as that. I was thinking about doing it using a custom search or a plugin, but I really don’t know where to start. thanks for your help.

EDIT: the custom field values are fixed, not auto-populated. The select can be built in plain html without extra queries.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Edited according to first comments and Pastebin code:

<?php /* You can also leave 'action' blank: action="" */ ?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<select name="my_size" id="size" class="postform" onchange="submit();">
        <option selected="selected">Choose a size</option>
        <option value="10">10</option>
        <option value="20">20</option>
</select>
</form>
<?php /* Reset filter */ ?>
<p><a href="<?php the_permalink(); ?>" rel="nofollow noreferrer noopener">Clear filter</a></p>

<?php
if( !isset($_POST['my_size']) || '' == $_POST['my_size']) {

    // unfiltered product list here

}
else {

    // Get dropdown value
    // Don't forget to sanitize this!
    $size = $_POST['my_size'];

    // Create new query
    $query = new WP_Query( array(
        'post_type'=> 'product', // your CPT
        'post_status' => 'publish',
        'meta_key' => 'size',
        'meta_value' => $size, // Dropdown value
    ) );

    // Loop
    if($query->have_posts()):
        while( $query->have_posts() ): $query->the_post();
            // Product content
        endwhile;
    endif;

    // reset query to default
    wp_reset_postdata();

}

See Codex for WP_Query reference.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments