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 very important to let your customers know about them. The existing products of your store are already known to most of your customers and they may even already be 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 properly highlighted on your website, you might lose a lot of potential customers just because they had no knowledge about the new products.

So to make sure that the customers have the attention to your new products, you need to display them properly on your WooCommerce store. This will make the customers notice the new products and increase the possibility for purchase of these products. 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 2 major ways:

  • Default WooCommerce options
  • Programmatically

1. Display New Products with Default WooCommerce Options

WooCommerce is already a very flexible and robust platform to design 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 inbuilt 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. But just make sure that you use one of the compatible WooCommerce themes so that you don’t have any visual issues while using them.

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 new products if you want. But for this section, we will display the new products on one of the existing pages of our WooCommerce store.

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

If you want to add a new page entirely, click on 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.

block options display new products in woocommerce

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

The new products can be even 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 display the new products in WooCommerce using shortcodes as well. WooCommerce does provide you with a number of shortcode options that you can use. You can add the new products with the shortcode

.

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

add shortcode display new products in woocommerce

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

After you add this shortcode, Update the page once again. If you look at the preview of the page, you will be able to see the recently added new products displayed on it.

Note: Since this is a shortcode, you can even add it to widget areas of your website like the sidebars or the footer areas of your website. 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 just add a code to your theme files to display a “New” badge on the new products of your WooCommerce store.

But before moving forward, please make sure to backup your website and create a child theme using one of the child theme plugins. This will ensure that all the changes that you make 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. So, go to Theme > Theme File Editor from your WordPress dashboard after activating the child theme.

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

theme file editor display new products in woocommerce

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 the needs of your website. 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 on Update File.

You will be able to see that the new badge is added to the new 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 like Code Snippets to add these codes. All you have to do is install the plugin and add the code in the plugin code editor.

That’s it! your customers can acknowledge the new products that you have added to your WooCommerce store now.

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 are highlighting products of your store which helps you get more sales for these products with the additional exposure that they get in 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 marked for the existing products as well as for the newly added products on your WooCommerce website. There are various ways to do so here, but we will just use the edit product page of your WooCommerce dashboard.

Just go to Products > All Products from your WooCommerce dashboard and click on Edit for the product that 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 at the right side of your screen here, you will see the product catalog visibility section. Now, you’ll need to edit the visibility options of the product from this section and check the This is a featured product” option.

edit product page display new products in woocommerce

Then, Publish the product if it is a new product. Or else, click on 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 the shortcodes, you can easily display the new featured products on the homepage itself.

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.

All you have to do is add the following shortcode to the part of the website where you want to display the featured products. If you are unfamiliar with using them, please have a look at our complete guide on WooCommerce shortcodes.

[featured_products]

Additionally, you can even make some changes to the shortcode and have a bit more control over how to display them 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, just update the post or the page and preview your changes on the front end. The featured products will be displayed accordingly.

shortcode preview set featured products in woocommerce and display them

There are more ways to set and display the new featured products in your WooCommerces store too. For more information on it, we also have a full tutorial on how to set and show featured products in WooCommerce.

Conclusion

So this brings us to the end of our guide on how to display new products in WooCommerce. They are very essential to increase the conversion rates of your store by attracting your customers to the new products. To summarize, you can display the new products in 2 major 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 codes to display the new products by adding a new badge on them.

We have also included a short guide to set and display 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 out guide helpful for 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: