This is How to Easily Filter Products of the Same Price on a Single WordPress Page
As an ecommerce store owner, providing a seamless shopping experience for your customers is crucial. One aspect of this is allowing customers to quickly and easily find products within their desired price range. In this article, we'll walk through the steps to create a custom WordPress page template that lists all products priced within a specific range on a single page.
Step 1: Create a Custom Page Template
The first step is to create a custom page template that we can use to list the products. Create a new file in your theme's directory named page-list-product-in-range.php
(or any name you prefer). At the top of the file, add the following code to make it a WordPress template:
<?php
// Template Name: List Products in Price Range
?>
<?php get_header(); ?>
<!-- Your page content will go here -->
<?php get_footer(); ?>
Step 2: Create a WordPress Page Using the Custom Template
Now, create a new page in your WordPress admin dashboard and select the "List Products in Price Range" template you just created. This will allow you to add the necessary code to retrieve and display the products.
Step 3: Retrieve Products within a Specific Price Range
Within the page-list-product-in-range.php
file, add the following code between the get_header()
and get_footer()
functions to retrieve the products:
<?php
$price_range = array(
'min' => 3000,
'max' => 3000,
);
$args = array(
'post_type' => array('product', 'product_variation'),
'posts_per_page' => -1,
'meta_query' => array(
array(
'key' => '_price',
'value' => array($price_range['min'], $price_range['max']),
'type' => 'NUMERIC',
'compare' => 'BETWEEN',
),
),
);
$products = new WP_Query($args);
?>
In this code, we're using the WP_Query
class to retrieve all products (including variations) that have a price between the $price_range['min']
and $price_range['max']
values. You can adjust these values to display products within a different price range.
Step 4: Display the Products
After the code you added in the previous step, add the following loop to display the products:
<ul class="products">
<?php
if ($products->have_posts()) {
while ($products->have_posts()) {
$products->the_post();
wc_get_template_part('content', 'product');
}
} else {
echo __('No products found', 'woocommerce');
}
wp_reset_postdata();
?>
</ul>
This loop will display each product using the content-product.php
template file, which is part of the WooCommerce plugin. If there are no products within the specified price range, it will display a "No products found" message.
Step 5: Add Pagination (Optional)
If you have a large number of products within the price range, you may want to add pagination to the page. To do this, you can modify the $args
array in the previous step to include pagination parameters, like this:
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => array('product', 'product_variation'),
'posts_per_page' => 12, // Number of products to display per page
'paged' => $paged,
'meta_query' => array(
array(
'key' => '_price',
'value' => array($price_range['min'], $price_range['max']),
'type' => 'NUMERIC',
'compare' => 'BETWEEN',
),
),
);
$products = new WP_Query($args);
Then, you can add the pagination links below the product listing using the paginate_links()
function:
<div class="pagination">
<?php
$big = 999999999; // Need an unlikely integer
echo paginate_links(array(
'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
'format' => '?paged=%#%',
'current' => max(1, get_query_var('paged')),
'total' => $products->max_num_pages
));
?>
</div>
This will add pagination links at the bottom of the product listing, allowing your customers to navigate through the products.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.
Conclusion
In this article, we've shown you how to create a custom WordPress page template to list all products within a specific price range on a single page. By using the WP_Query
class and the meta_query
parameter, you can efficiently retrieve and display the products, making it easy for your customers to find the products they're looking for.
Remember, you can further customize this solution to fit your specific needs, such as adding filters, sorting options, or integrating it with your existing WooCommerce-powered ecommerce store. Flowpoint.ai can help you identify and fix any technical issues that may be impacting the conversion rate of this custom product listing page.