How to Display New Products in WooCommerce: Step-by-Step Tutorial

Are you going to add some new products to your online store, and aren’t sure how to display them? Good news, we’ve got the perfect guide for you. In this article, we will show you how to display new products in WooCommerce.

Why Display New Products in your WooCommerce Store?

When you add new products to your eCommerce website, it is essential to let your customers know about them. The existing products in your store are already familiar to most of your customers, and they may have already been purchased.

But when you add the new products to your store, your customers must be well aware of them. If the new products aren’t highlighted adequately on your website, you might lose a lot of potential customers simply because they are unaware of the latest products.

To ensure that customers pay attention to your new products, display them correctly on your WooCommerce store. This will help customers notice the latest products and increase the likelihood of them purchasing. Now, let’s look at how you can display new products in WooCommerce.

How to Display New Products in WooCommerce?

You can display new products in WooCommerce using two significant ways:

• Default WooCommerce options
• Programmatically

1. Display New Products with Default WooCommerce Options

WooCommerce is already a very flexible and robust platform for designing an eCommerce website. Therefore, they have already thought about the new products that you may add to your website.

Once you set up WooCommerce for your website completely, it comes with built-in blocks and shortcode options to display your new products.

These options are included in WooCommerce by default, and you don’t need any additional tools to use them. However, ensure that you use one of the compatible WooCommerce themes to avoid any visual issues.

1.1. Display New Products with Blocks

To show your new products with the WooCommerce blocks, you need to open the page where you want to display them first. You can even create a new page just for the latest products if you wish. But for this section, we will display the new products on one of the existing pages of our WooCommerce store.

Go to Pages > All Pages and click Edit for the page where you want to display the products.

To add a new page entirely, click “Add New”.

Once you open the page editor, click on the ‘+’ icon and search for the ‘Newest Products’ block here.

After you add it to the page, you will be able to see the settings for it on the right side of your screen. Firstly, you can change the layout of the block, where the number of rows and columns can be adjusted, and also align it to follow other content.

Similarly, you can also choose to make the title, product price, product rating, and the add to cart button visible.

The new products can even be added according to their particular categories.

Once you have made all the changes, Update or publish the page. You will be able to see the new products when you preview the page.

1.2. Display Recent Products with Shortcodes

As mentioned earlier, you can also display new products in WooCommerce using shortcodes. WooCommerce provides you with several shortcode options that you can use. You can add the latest products with the shortcode

.

To use this shortcode, edit an existing page or create a new one on your WordPress website. Then, click on the ‘+’ icon to add a new Shortcode block here.

You can even add some more attributes to the shortcode to make it more specific. For example, the following shortcode will display two new products per page from the clothes category.

[recent_products per_page="2" category="clothes"]

After adding this shortcode, update the page again. If you view the page preview, you will be able to see the recently added products displayed on it.

Note: Since this is a shortcode, you can also add it to widget areas of your website, such as sidebars or footer areas. Just make the necessary changes to the shortcode to suit the design of the widget areas and publish it.

2. Display New Products Programmatically

Let’s say you want the products to be displayed in multiple places on your website. Then, it can be very tedious to open all the required sections of your website and add the block or the shortcode to them. Instead, you can add a code to your theme files to display a “New” badge on the new products of your WooCommerce store.

However, before moving forward, please ensure that you back up your website and create a child theme using one of the available child theme plugins. This will ensure that all changes made to the core theme files are not affected when you update the WordPress theme.

2.1. Open the Theme Function File

We will add the code snippet to the functions.php file of your theme. After activating the child theme, navigate to Theme > Theme File Editor from your WordPress dashboard.

Then, you will need to open the functions.php file from the theme files on the right side of your screen.

2.2. Add the Code to the Theme Files

After you open the theme functions file, scroll down to the bottom of the file and paste the following code snippet here.

add_action( 'woocommerce_before_shop_loop_item_title', 'quadlayers_new_product_badge', 3 );

function quadlayers_new_product_badge() {
global $product;
$newness_days = 10;
$created = strtotime( $product->get_date_created() );
if ( ( time() - ( 60 * 60 * 24 * $newness_days ) ) < $created ) {
echo '<span class="itsnew onsale">' . esc_html__( 'New!', 'woocommerce' ) . '</span>';
}
}

The above code will add the new badge to the products that have been added to your website in the last 10 days. You can adjust the number of days according to your website’s needs. They can be changed depending on the number of days that you consider your recently added products to be new.

After adding the code, click “Update File.”

You will be able to see that the new badge has been added to the latest products of your WooCommerce store when you preview them. The quickest way to view them is from the shop page itself.

If you are not comfortable opening the theme files, you can also use a code editor plugin, such as Code Snippets, to add this code. All you have to do is install the plugin and add the code in the plugin code editor.

That’s it!

Your customers can now acknowledge the new products you have added to your WooCommerce store.

Bonus: Set and Display Featured Image in WooCommerce

We have already shown you how to display new products on your WooCommerce store. Similarly, it might be helpful for you to know how to set and display featured products, too.

Featured products highlight the best-selling items in your store, helping you increase sales for these products through additional exposure within your store.

So, as a bonus, we will show you how to set featured products on your store and show them as well. Let’s start by categorizing the products as featured.

1. Set Featured Products in your Store

You can easily set featured products on your online store. The featured status can be applied to both existing and newly added products on your WooCommerce website. There are various ways to do so, but we will use the edit product page in your WooCommerce dashboard.

Go to Products > All Products from your WooCommerce dashboard, then click Edit for the product you want to set as a featured product. If you want to add a new product as a featured product, click on Add New.

Either way, you will be redirected to the edit product page of your online store. If you look to the right side of your screen, you will see the Product Catalog Visibility section. Now, you’ll need to edit the visibility options for the product in this section and select the “This is a featured product” option.

Then, publish the product if it is a new product. Alternatively, click Update to set an existing product as a featured product.

Excellent! You have a featured product for your eCommerce store. Now let’s go ahead and display it.

2. Display the Featured Products

Since you’ve added a featured product to your WooCommerce store, you have to display the new featured product as well. The easiest way to display the featured products is by using shortcodes. With the help of shortcodes, you can easily display the new featured products directly on the homepage.

Similarly, WordPress and WooCommerce are extremely shortcode-friendly. This is why shortcodes can be easily used to display the featured products anywhere on your online store.

Add the following shortcode to the section of the website where you want to display the featured products. If you are unfamiliar with using them, please refer to our comprehensive guide on WooCommerce shortcodes.

[featured_products]

Additionally, you can make some changes to the shortcode and have a bit more control over how they are displayed in your store. Let us consider the following shortcode:

[featured_products per_page=”6” columns=”3”]

If you use this shortcode, only a total of 6 featured products will be displayed in 3 columns.

Once you add the required shortcode to your website, update the post or the page and preview your changes on the front end. The featured products will be displayed accordingly.

There are additional ways to set and display the new featured products in your WooCommerce store as well. For more information, we also have a comprehensive tutorial on how to set and display featured products in WooCommerce.

Tips and Best Practices to Follow

• Define what “new” means: Decide how long a product stays “new” — for example, 30 or 60 days after publishing — to keep your display relevant.
• Use smart product sorting: Display products based on publish date to highlight the latest additions without manual updates automatically.
• Feature new products on key pages: Add your “New Arrivals” section to the homepage, shop page, or sidebar for maximum visibility.
• Use caching effectively: Cache product queries or blocks to ensure your “new products” section doesn’t slow down your store.
• Combine with categories or tags: Filter “new” products within specific categories (such as “New in Clothing”) to enhance user navigation.
• Highlight with badges or labels: Add a “New” badge on thumbnails to catch attention and increase clicks.
• Optimize product images: Use compressed images to prevent slow load times in sections displaying multiple new products.
• Keep the section updated: Regularly review and refresh the “New Arrivals” area to ensure that old products are not labeled as new.
• Add time-based automation: Use plugins or snippets to automatically remove the “new” label after a set number of days.
• Track performance: Monitor clicks or conversions on “new products” to understand what attracts your customers most.

Common Troubleshooting Tips to Follow

• New products not showing up: Check that the products are published (not in draft or pending) and confirm the query is ordered by date (orderby="date").
• Shortcode not working: Make sure the WooCommerce plugin is updated and that you’re using the correct shortcode format, like
  • 

    WooCommerce Invoice Manager

    From: $0.00 / year Select options This product has multiple variants. The options may be chosen on the product page
  • 

    AI Copilot

    From: $0.00 / year Select options This product has multiple variants. The options may be chosen on the product page
  • 

    TikTok Feed

    From: $0.00 / year Select options This product has multiple variants. The options may be chosen on the product page
  • 

    Perfect WooCommerce Brands

    From: $0.00 / year Select options This product has multiple variants. The options may be chosen on the product page
  • 

    WooCommerce Checkout Manager

    From: $0.00 / year Select options This product has multiple variants. The options may be chosen on the product page
  • 

    QuadMenu

    $60.00 Original price was: $60.00.$30.00Current price is: $30.00. Purchase Now
  • 

    Instagram Feed Gallery

    From: $0.00 / year Select options This product has multiple variants. The options may be chosen on the product page
  • 

    WP Menu Icons

    From: $0.00 / year Select options This product has multiple variants. The options may be chosen on the product page
  .
• Old products still marked as new: Review the date filters or automation settings — adjust the timeframe for what counts as “new.”
• Caching prevents updates: If you’re using a caching plugin, clear the cache after adding or removing products so the new list appears correctly.
• Products display incorrectly on mobile: Check your theme’s responsive settings or CSS overrides that might affect how the product grid adapts.
• Slow page load times: Optimize product images, enable lazy loading, and limit the number of displayed products per section.
• Custom query conflicts: If a custom code snippet doesn’t work, ensure no other plugin or theme modification is overriding WooCommerce’s default query.

Frequently Asked Questions

Now, let’s take a look at some of the frequently asked questions and answers regarding this topic.

Conclusion

This brings us to the end of our guide on displaying new products in WooCommerce. They are essential for increasing the conversion rates of your store by attracting customers to new products. To summarize, you can display the new products in 2 significant ways:

• Default WooCommerce options
• Programmatically

The default WooCommerce options include the use of shortcodes or blocks, which are provided in WooCommerce by default. But if you have basic technical knowledge, you can even use code to display the new products by adding a new badge to them.

We have also included a brief guide on setting and displaying featured products in WooCommerce with this tutorial. This can be very useful if you want to display the new products as featured products as well. Or else. You can even set the existing products as featured and display them on your website.

So was our guide helpful to you?

How do you display the new products in your store?

Please let us know in the comments

In the meantime, here are some more articles that might interest you:

• How to Add Product Designers to WooCommerce
• Quick Steps to add a Wishlist to your WooCommerce Store
• How to import products in WooCommerce