How to Show or Hide SKU on the WooCommerce Product Page: Complete Guide
14 mins read

How to Show or Hide SKU on the WooCommerce Product Page: Complete Guide

Mike0

 

Table of Contents

Introduction

Every product in your WooCommerce store needs identification. You track inventory with numbers. You manage stock with codes. You organize fulfillment with unique identifiers.

SKU stands for Stock Keeping Unit. It is the backbone of inventory management. Every product variation should have its own SKU. This helps you track what sells and what sits on shelves.

But customers do not always need to see these numbers. Sometimes SKUs confuse shoppers. Sometimes they clutter your clean product pages. Sometimes you simply prefer a minimalist design.

The question many store owners face is simple. Should you show SKU on your product pages? Or should you hide it?

There is no universal right answer. It depends on your products and your customers. B2B buyers often need SKUs for reordering. Retail shoppers rarely care. Some industries require SKU displays for compliance. Others benefit from hiding internal codes.

This guide covers everything. You will learn exactly what SKU means in WooCommerce. You will understand multiple methods to show SKU prominently. You will discover several ways to hide SKU completely. You will see code snippets and plugin options.

By the end, you will control exactly how SKU appears on your product pages.

What is SKU in WooCommerce?

SKU stands for Stock Keeping Unit. It is a unique identifier assigned to each product in your inventory.

A SKU is an alphanumeric code that helps you track products internally. Unlike UPC or EAN barcodes which are universal, SKUs are created by you for your specific business needs.

Every product variation should have its own SKU. A t-shirt in size small and color red needs a different SKU than the same shirt in medium blue. This allows precise inventory tracking.

Where SKU Appears by Default?

  • In standard WooCommerce, SKU appears in two places. On the single product page, it shows above the tabs or in the product meta section, typically next to categories and tags.
  • In the Additional Information tab, SKU often appears alongside product attributes like dimensions and weight.
  • In customer order emails, SKU appears in order details. This helps customers reference products when contacting support.

Why Does SKU Matters?

  • SKU is essential for inventory management. You can quickly check stock levels. You can locate products in your warehouse. You can reorder accurately based on sales data.
  • For customer service, SKU helps when buyers call with questions. They can read the SKU from their order confirmation. You instantly know exactly which product they mean.
  • For B2B customers, SKU is often critical for reordering. Business buyers know their product codes. They want to see them on product pages.

How to Show SKU on the WooCommerce Product Page?

Showing SKU is the default behavior in WooCommerce. But you might want to display it more prominently or in different locations.

Default SKU Display

By default, WooCommerce shows SKU in the product meta section. This is usually just below the product title or above the Add to Cart button. The exact location depends on your theme.

The SKU appears with a label like “SKU:” followed by the actual code. This works for most stores and requires no additional configuration.

Method 1: Ensure SKU is Entered Correctly

WordPress Dashboard → Products → Edit Product

  • Click on Products in your left admin menu
  • Find the product you want to edit
  • Click the product title to open the edit screen
  • Scroll down to the Product Data metabox
  • Look for the “Inventory” tab
  • In the “SKU” field, enter your product code
  • For variable products, click on each variation
  • Enter SKU for every variation individually
  • Click “Update” to save changes

If the SKU field is empty, nothing displays on the frontend. Always verify SKU is entered before troubleshooting display issues.

Method 2: Check Theme Settings

Appearance → Customize → Theme Settings (varies by theme)

  • Go to Appearance → Customize
  • Look for sections like “Product Page” or “WooCommerce”
  • Find options related to “Product Meta” or “SKU Display”
  • Ensure SKU display is enabled
  • Publish changes

Method 3: Use a Plugin for Enhanced SKU Display

WordPress Dashboard → Plugins → Add New → Search “Product Code for WooCommerce”

  • Go to Plugins → Add New
  • Search for “Product Code for WooCommerce”
  • Install and activate the plugin
  • Navigate to WooCommerce → Settings → Product Code
  • Configure display options:
    • Show SKU on product pages
    • Show in cart and checkout
    • Show on emails and invoices
    • Customize the label text
  • Save settings

The plugin also adds a secondary code field for internal use, like bin locations or warehouse codes.

Method 4: Add SKU to Additional Information Tab

Appearance → Theme File Editor → functions.php (or use Code Snippets plugin)

  • Install the Code Snippets plugin (recommended for safety)
  • Go to Snippets → Add New
  • Name your snippet “Add SKU to Attributes Table”
  • Paste the following code:

// Append SKU as the last row in the Additional Information attributes table

add_filter(‘woocommerce_display_product_attributes’, ‘add_sku_to_end_of_attributes’, 10, 2);

function add_sku_to_end_of_attributes($attributes, $product) {

if (! $product->get_sku()) {

return $attributes; // No SKU to display

}

$new_attribute = array(

‘label’   => __(‘SKU’, ‘woocommerce’),

‘value’   => $product->get_sku(),

‘display’ => $product->get_sku(),

);

// Append SKU to the end of the attributes array

$attributes[‘__sku’] = $new_attribute;

return $attributes;

}

  • Set “Run snippet everywhere”
  • Activate the snippet
  • View a product page to verify SKU appears in Additional Information tab

This method positions SKU as the final row in the attributes table, keeping all product specifications together.

Method 5: Use Shortcode to Display SKU Anywhere

  • Edit any page or post where you want SKU displayed
  • Add a Shortcode block or text widget
  • Enter the shortcode: [pcfw_display_product_code]
  • For specific products, add the ID attribute:
    • [pcfw_display_product_code id=”123″]
  • Customize with optional parameters:
    • pc_label – Change the label text
    • wrapper – Wrap in div or span
    • class – Add custom CSS classes
  • Publish or update the page

This shortcode works great for custom product layouts or builder pages.

Method 6: Display SKU for Variable Products

Product Edit Screen → Variations Tab

  • Edit your variable product
  • Go to the Variations tab
  • Click on each variation to expand
  • Enter a unique SKU for every variation
  • Click “Save changes”

On the frontend, when customers select options, the SKU updates dynamically. They see the SKU matching their chosen variation.

Method 7: Add SKU to Category Pages

Some stores want SKU visible in product listings, not just on single product pages. This requires custom development or plugins.

Appearance → Theme File Editor → functions.php

  • Add code to display SKU in product loops
  • Test thoroughly as this affects all listing pages
  • Consider using a plugin for safer implementation

How to Hide SKU on the WooCommerce Product Page?

Many store owners prefer cleaner product pages without SKU. Several methods achieve this.

Method 1: Simple CSS Code Snippet

Appearance → Customize → Additional CSS

  • Go to Appearance → Customize
  • Scroll down to “Additional CSS”
  • Paste the following code:

css

/* Hide SKU on single product pages */

.sku_wrapper {

display: none !important;

}

 

/* For some themes, alternative selector */

.product_meta .sku {

Ad Banner

display: none !important;

}

  • Publish changes
  • Refresh a product page to verify SKU is hidden

This method works for most themes. If SKU persists, use browser developer tools to find the exact CSS selector for your theme.

Method 2: Use a Dedicated Plugin

WordPress Dashboard → Plugins → Add New → Search “WC Product Meta”

  • Go to Plugins → Add New
  • Search for “WC Product Meta”
  • Install and activate the plugin
  • Navigate to WooCommerce → Settings → Product Meta
  • Check the box to “Hide SKU from product pages”
  • Optionally hide categories and tags
  • Save settings

This plugin applies changes globally across all products instantly. No coding required.

Method 3: PHP Snippet to Remove SKU

Appearance → Theme File Editor → functions.php (or Code Snippets plugin)

  • Open your child theme’s functions.php
  • Or install the Code Snippets plugin
  • Add the following code:

// Remove SKU from single product pages

add_filter( ‘wc_product_sku_enabled’, ‘__return_false’ );

  • Save changes
  • Verify SKU no longer appears on product pages

This filter completely disables SKU display functionality in WooCommerce.

Method 4: Hide SKU Only for Specific Products

  • Add a conditional snippet:

// Hide SKU for specific product categories

add_filter( ‘woocommerce_get_sku’, ‘conditionally_hide_sku’, 10, 2 );

 

function conditionally_hide_sku( $sku, $product ) {

// Hide SKU for products in ‘clothing’ category

if ( has_term( ‘clothing’, ‘product_cat’, $product->get_id() ) ) {

return ”;

}

return $sku;

}

  • Modify the condition based on your needs
  • Test on category pages and single products

Method 5: Hide SKU for Variable Product Variations

  • Add custom JavaScript to clear SKU display
  • Or use PHP filters to remove variation SKU data
  • Test thoroughly as this affects dynamic updates

Method 6: Hide Empty SKU Fields

  • Use CSS to hide the wrapper when empty
  • Add this CSS:

css

/* Hide SKU wrapper if no SKU exists */

.sku_wrapper:empty {

display: none;

}

This keeps your product pages clean regardless of which products have SKU entered.

Method 7: Use Theme Options

Appearance → Customize → Theme Settings

  • Look for WooCommerce or Product Page sections
  • Find toggle switches for “Display SKU”
  • Disable the option
  • Save changes

This is the safest method as it uses your theme’s native functionality.

Method 8: Hide SKU from Customer Orders

You might want SKU visible on product pages but hidden from order confirmations and emails. Some plugins offer this granular control.

The Product Code for WooCommerce plugin allows hiding codes from customer orders while keeping them visible elsewhere.

WooCommerce → Settings → Product Code

  • Install Product Code for WooCommerce
  • Go to settings
  • Enable “Hide from Customer Orders”
  • Save changes

Now SKU appears on product pages but not in customer emails or order receipts.

Method 9: Remove SKU from Structured Data

Hiding SKU visually does not remove it from schema markup. For complete removal, you need additional filters.

  • Add filter to remove SKU from product schema
  • Test with Google’s Rich Results tool
  • Verify SKU no longer appears in structured data

Troubleshooting Common SKU Display Issues

Sometimes SKU does not behave as expected. Here are common problems and solutions.

Issue 1: SKU Not Showing Despite Being Entered

Cause: Theme may hide SKU by default. CSS may be conflicting. Filter may be removing SKU.

Solution: 

  • Check theme settings first.
  • Use browser inspector to see if SKU element exists but is hidden.
  • Look for CSS with display:none.
  • Check if any plugins are modifying SKU displays.

Issue 2: SKU Shows for Some Products but Not Others

Cause: Variations missing SKU. Products in different categories may have different templates.

Solution: 

  • Verify all variations have SKU entered.
  • Check if conditional code is hiding SKU based on categories.
  • Review template files for conditional logic.

Issue 3: SKU Shows Wrong Value for Variable Products

Cause: Variation SKU not set correctly. JavaScript not updating display.

Solution:

  • Edit the variable product and verify each variation has the correct SKU.
  • Test with default theme to isolate theme issues.
  • Check for JavaScript errors in the console.

Issue 4: SKU Visible Despite Hiding Code

Cause: CSS selector incorrect. Filter not applying. Plugin conflict.

Solution: 

  • Use browser inspector to find the exact CSS class.
  • Try more specific selectors.
  • Temporarily disable other plugins to test conflicts.
  • Ensure code is in the correct location (functions.php or active snippet).

Issue 5: SKU Hides but Leaves Empty Label

Cause: CSS hides content but label remains. The “SKU:” text still displays.

Solution: 

  • Hide the entire wrapper, not just the SKU value.
  • Use .sku_wrapper selector instead of .sku.
  • Or use a PHP filter to remove SKU entirely rather than hiding with CSS.

Final Verdict

Showing or hiding SKU in WooCommerce is a simple decision with multiple implementation options. The right choice depends entirely on your products and customers. Show SKU when it adds value to the shopping experience. B2B customers need it. Technical products benefit from it. Industries requiring compliance demand it. If SKU helps customers make informed decisions or reorder easily, display it prominently.

Hide SKU when it creates clutter without benefit. Consumer goods rarely need SKU displays. Minimalist designs improve with cleaner pages. If your SKU data is incomplete, hiding is more professional than showing empty fields. Multiple methods exist for both showing and hiding SKU. For showing, ensure SKU is entered correctly first. Use CSS or plugins to reposition SKU if default placement does not work. Add SKU to the Additional Information tab for specification-focused buyers.

For hiding, CSS is the fastest and safest method. A few lines of code remove SKU visually without affecting functionality. For complete removal, PHP filters disable SKU display entirely. Dedicated plugins offer one-click solutions without coding. Test your chosen method thoroughly. Check on desktop and mobile. Verify with different product types. Ensure variable products behave correctly. Ask a friend to test the customer experience.

Remember that hiding SKU visually does not remove it from order emails or invoices. Customers may still see SKU after purchase. If you want complete removal everywhere, you need additional configuration.

The beauty of WooCommerce is flexibility. You can change your mind anytime. Start with one approach. Monitor customer feedback. Adjust as needed. Your store evolves with your business.

Whether you show or hide, SKU remains a powerful tool for your internal operations. Use it wisely. Let customer needs guide your display choices. Your store will thank you.

Have questions before starting with WooCommerce & WordPress? Get support here at WooHelpDesk.

Website https://www.woohelpdesk.com/blog

Related Posts