Woocommerce How To Show Only Certain Products On A Page

WooCommerce: Mastering Product Visibility – Showing Only Specific Products on a Page

Introduction

WooCommerce is a powerful and flexible e-commerce platform, but sometimes you need more control over which products are displayed on specific pages. Whether it’s for a landing page promoting a select range, creating a focused gift guide, or highlighting sale items, the default WooCommerce display might not always cut it. This article will guide you through various methods to show only certain products on a specific WooCommerce page, allowing you to curate a shopping experience that perfectly aligns with your marketing goals and user needs. We’ll explore solutions ranging from simple shortcodes to more advanced custom coding approaches.

Main Part: Methods to Display Specific Products

There are several effective methods to achieve selective product display in WooCommerce. Let’s explore them:

1. WooCommerce Shortcodes

WooCommerce offers a suite of shortcodes that are incredibly useful for displaying products. The most relevant shortcodes for our purpose are `[products]` and `[product_category]`.

* `[products]` Shortcode: This is the most versatile option. It allows you to filter products based on several criteria.

• By ID: Use `[products ids=”123, 456, 789″]` to show products with IDs 123, 456, and 789. This is the easiest and most common method.
• By SKU: Use `[products skus=”SKU1, SKU2, SKU3″]` to display products based on their Stock Keeping Units. This is helpful if you manage products using SKUs.
• Order and Ordering: You can further refine the display with attributes like `orderby` (popularity, rating, date, price, title) and `order` (ASC or DESC – ascending or descending). For example: `[products ids=”123,456,789″ orderby=”price” order=”ASC”]` will show those products ordered by price, from lowest to highest.
• Columns and Number of Products: `columns` attribute can be used to manage number of columns and `limit` parameter will restrict the number of products displayed.

Example: To display the products with IDs 10, 11, and 12 in three columns, ordered by title in ascending order, you’d use:

[products ids=”10,11,12″ columns=”3″ orderby=”title” order=”ASC”]

* `[product_category]` Shortcode: If you want to display all products belonging to a specific category, this shortcode is perfect.

• Category Slug: Use `[product_category category=”your-category-slug”]`. Replace `”your-category-slug”` with the actual slug of the category.
• Attributes: Similar to the `[products]` shortcode, you can use attributes like `columns`, `orderby`, and `order` for customization.
• Number: Use `[product_category category=”your-category-slug” limit=”4″]` to display 4 products from a specific category.

Example: To display four products from the “featured” category in two columns:

[product_category category=”featured” columns=”2″ limit=”4″]

How to find Product IDs and Category Slugs:

* Product IDs: Go to *Products* in your WooCommerce admin. Hover over the product title and you’ll see the product ID in the URL.

* Category Slugs: Go to *Products > Categories*. Hover over the category name and you’ll see the slug in the URL. Alternatively, edit the category and find the “Slug” field.

2. Programmatic Solution: Custom Code (functions.php or a plugin)

For more complex scenarios, such as dynamically filtering products based on specific logic, custom code is the way to go. This requires some PHP knowledge. You can add the following code to your theme’s `functions.php` file (or better yet, create a custom plugin to avoid losing changes during theme updates).

<?php
/**
Function to display specific products on a page.
* @param array $atts Attributes passed to the shortcode.
@return string HTML output of the products.
*/
function display_specific_products( $atts ) {

// Define shortcode attributes

$atts = shortcode_atts( array(

‘ids’ => ”, // Comma-separated list of product IDs

‘columns’ => ‘4’,

‘orderby’ => ‘menu_order title’,

‘order’ => ‘ASC’,

‘limit’ => ‘-1’,

), $atts, ‘specific_products’ );

$product_ids = explode(‘,’, $atts[‘ids’]);

// Ensure the product_ids is an array of integers.

$product_ids = array_map( ‘intval’, $product_ids );

// Remove any empty values from the array.

$product_ids = array_filter( $product_ids );

if ( empty( $product_ids ) ) {

return ‘

No product IDs specified.

‘; // Or a more helpful message.

}

$args = array(

‘post_type’ => ‘product’,

‘post__in’ => $product_ids,

‘posts_per_page’ => intval( $atts[‘limit’] ),

‘orderby’ => sanitize_sql_orderby( $atts[‘orderby’] ),

‘order’ => sanitize_text_field( $atts[‘order’] ),

);

$products = new WP_Query( $args );

if ( $products->have_posts() ) {

ob_start(); // Start output buffering. This is crucial.

echo ‘

‘;

woocommerce_product_loop_start();

while ( $products->have_posts() ) {

$products->the_post();

wc_get_template_part( ‘content’, ‘product’ );

}

woocommerce_product_loop_end();

echo ‘

‘;

wp_reset_postdata();

return ob_get_clean(); // Return the buffered output.

} else {

return ‘

No products found.

‘;

}

}

add_shortcode( ‘specific_products’, ‘display_specific_products’ );

Explanation:

1. `display_specific_products()` function: This function takes an array of attributes from the shortcode.

2. `shortcode_atts()`: This sets default values for the shortcode attributes.

3. `$product_ids = explode(‘,’, $atts[‘ids’]);`: Converts the comma-separated list of product IDs into an array. We also add error handling to ensure the values are valid integers.

4. `WP_Query`: This is the core WordPress function for querying posts (in this case, products). We use `post__in` to specify the product IDs we want to retrieve. We also add orderby and order parameters from the shortcode atts array.

5. The Loop: The code then loops through the retrieved products and uses `wc_get_template_part( ‘content’, ‘product’ )` to display each product using WooCommerce’s standard product template.

6. `ob_start()` and `ob_get_clean()`: These functions are essential. They capture the output of the WooCommerce templates into a buffer, allowing us to return the entire HTML block as a string. Without this, the shortcode might not work correctly.

7. Security: Sanitizes the user provided values to make the shortcode more secure.

8. `add_shortcode()`: This registers the shortcode so you can use it in your pages and posts.

How to use the custom shortcode:

In your page or post, use the shortcode like this:

[specific_products ids=”10,11,12″ columns=”3″ orderby=”price” order=”DESC”]

Replace “10,11,12” with your desired product IDs.

3. Using a Plugin

Several WooCommerce plugins allow you to create product grids or showcase specific products with visual builders. These often provide a drag-and-drop interface for selecting products and customizing their appearance. Examples include:

• WooCommerce Product Table: Ideal for displaying products in a table format with advanced filtering options.
• Visual Composer/Elementor/Beaver Builder plugins: Many of these page builders have WooCommerce-specific modules for displaying products in custom layouts.

While plugins add convenience, be mindful of their potential impact on site performance. Choose plugins that are well-maintained and optimized for speed.

Conclusion

Mastering product visibility in WooCommerce is crucial for creating targeted marketing campaigns and improving the user experience. By leveraging WooCommerce’s built-in shortcodes, writing custom code snippets, or utilizing specialized plugins, you can effectively showcase specific products on dedicated pages. When deciding on a method, consider your technical expertise, the complexity of your requirements, and the impact on your website’s performance. Whether it’s highlighting bestsellers, creating seasonal gift guides, or promoting new arrivals, the ability to curate your product displays is essential for driving sales and maximizing customer engagement.