How to Display the WooCommerce Product SKU on Archive (Loop) Pages

This article walks you through how to display a WooCommerce product SKU and product variation SKU directly on your archive (loop) pages. With a simple code snippet and step-by-step instructions, you’ll learn how to make SKUs visible under product titles, improving product identification for customers, staff, and wholesale buyers.

When you run an online store with WooCommerce, making product information easy to access is one of the best ways to improve the shopping experience. By default, WooCommerce shows product images, titles, prices, and sometimes ratings on the archive or loop pages (shop, category, and tag pages). However, many store owners need one more detail in this space: the SKU (Stock Keeping Unit).

Adding the SKU on these pages makes it easier for customers, staff, and even wholesale buyers to identify products quickly. In this article, we’ll walk you through how to display the product SKU on WooCommerce archive pages. We’ll also explain why this small change can have a big impact on your store’s usability and conversions.

Why Display the WooCommerce Product SKU on Archive Pages

The WooCommerce SKU is a unique identifier for each product. Businesses use SKUs to manage stock, handle orders, and keep track of product variations. Customers may also use SKUs to reorder specific items, compare details, or communicate with customer service.

Here are some reasons why showing SKUs on archive pages can be beneficial:

• Faster product identification: Customers scanning through category or shop pages can immediately see the SKU without needing to click into each product.
• Better for wholesale and bulk buyers: Many wholesale customers shop using SKUs. Displaying them upfront saves time.
• Reduced support questions: Shoppers can easily reference SKUs when contacting support or sales teams.
• Improved internal workflows: Staff or sales reps browsing the store can quickly copy SKUs for quotes, inventory checks, or order management.

Without SKUs visible, customers often need to click into each product page to find that information. This extra step slows down the buying process. By displaying the WooCommerce product SKU on the archive pages, you’re removing unnecessary friction.

How to Display the WooCommerce Product SKU on Archive Pages

The process for showing the WooCommerce product SKU on the archive pages is straightforward. You’ll need to add a custom code snippet to your theme’s functions.php file or a custom functionality plugin. Don’t worry, though, as this doesn’t require advanced coding skills. We’ll guide you step by step.

Step 1: Locate a Place for the Custom Code Snippet

The first step is deciding where to add your custom code. You have two main options:

1. Child Theme Functions.php File: If you already use a child theme, you can add your code snippet to the functions.php file. This ensures your changes won’t be lost during theme updates.
2. Custom Functionality Plugin: If you prefer not to touch your theme, you can use the Code Snippets plugin or something similar. This is often the safer and more portable choice.

Adding custom code directly to a parent theme is not recommended, as updates can overwrite your changes. Always use a child theme or plugin when customizing WooCommerce.

Step 2: Add the Code Snippet

Now, let’s insert the actual snippet. This code will add the SKU below the product title on archive pages:

This snippet uses the WooCommerce hook woocommerce_after_shop_loop_item_title to add the SKU information under each product title in the archive loop.

• For simple products: It displays the single SKU.
• For variable products: It collects and lists all child variation SKUs, separated by commas.
• If no SKU exists: It outputs “N/A.”

Step 3: Test and Adjust the Display

After adding the code, visit your shop or category pages. You should now see the SKU displayed under each product title.

Things to check:

• Consistency: Ensure all products with SKUs show correctly.
• Variable products: Confirm that all variations list properly.
• Styling: Depending on your theme, the SKU may need a little CSS styling to match your design.

For example, you could add a small CSS rule in your theme’s stylesheet or Customizer:

This makes the SKU display neatly under the product title without overwhelming the design.

Frequently Asked Questions

Adding SKUs to your shop and category pages can raise a few common questions for store owners. To make things easier, we’ve put together answers to the most frequent questions about showing the WooCommerce product SKU on the archive pages. These cover the benefits, setup steps, and what to expect when using the provided code snippet.

Why should I display WooCommerce product SKUs on archive pages?

Showing SKUs on archive pages makes it easier for customers to identify items without clicking through to the product page. This is especially helpful for wholesale buyers who often shop using SKUs, and it reduces support questions from customers who need quick reference numbers.

How do I add the WooCommerce product SKU to the archive pages on my store?

You can add SKUs to your shop and category listings by placing a custom code snippet in your theme’s functions.php file or using a custom functionality plugin. The snippet provided in this guide is a safe and simple way to display SKUs under product titles on archive pages.

Will this code snippet display SKUs for variable products?

Yes. The snippet is designed to work with both simple and variable products. For simple products, it displays the single SKU. For variable products, it lists all available variation SKUs (for example, “1002a, 1002b”) directly on the archive pages.

Will showing SKUs on archive pages affect my theme’s design?

By default, the SKU appears directly under the product title. In most cases, it will blend in well with your theme. If you want to adjust the appearance, you can add a little custom CSS to style the SKU text so it matches the look and feel of your store.

Final Thoughts

Adding the SKU to WooCommerce archive pages may seem like a minor adjustment, but it can make a huge difference in usability and customer satisfaction. Wholesale buyers, repeat customers, and staff members will all benefit from quicker product identification.

The provided code snippet is simple, safe, and effective. By following the steps in this guide, you can easily display the WooCommerce product SKU on the archive pages of your store.

Remember:

• Always back up your site before adding custom code.
• Use a child theme or plugin to avoid losing changes during updates.
• Test thoroughly to ensure SKUs display properly across all product types.

If you want a smoother shopping experience and fewer customer support questions, displaying SKUs on WooCommerce archive pages is a smart and practical improvement.

For further suggestions, take a look at the articles How to Preload Google Fonts for The7 WordPress Theme, How to Hide WooCommerce Shipping Methods When Free Shipping Is Available, and How to Show Woocommerce Related Products by Name.

Need help? Our WooCommerce Development service is a comprehensive solution for small, medium, and enterprise-level businesses. Call us at 602-633-4758 for a free consultation.