How To Show Sku In Woocommerce

How to Show SKU in WooCommerce: A Comprehensive Guide

Introduction:

The Stock Keeping Unit (SKU) is a unique identifier for each product you sell. It’s crucial for inventory management, tracking sales, and helping customers quickly find what they’re looking for. While WooCommerce automatically generates SKUs when you create a new product, displaying them prominently on your website is not enabled by default. This article will guide you through various methods to effectively show the SKU in WooCommerce, improving both the customer experience and your store’s operational efficiency. We’ll cover everything from simple theme customizations to using plugins, allowing you to choose the option that best suits your technical skills and store requirements. Let’s dive in!

Why Show SKUs in WooCommerce?

Before we get into the “how,” let’s solidify the “why.” Showing SKUs is beneficial for several reasons:

• Improved Customer Experience: Customers who know the SKU of a product (perhaps from previous purchases or off-site advertising) can quickly locate it on your store. This streamlines their shopping journey.
• Efficient Inventory Management: SKUs are vital for internal tracking. Displaying them on product pages allows your team to easily identify and manage inventory levels.
• Faster Customer Support: When customers have questions about a product, knowing the SKU allows them to communicate their inquiry more effectively, leading to quicker and more accurate support.
• Reduced Errors: Prevents confusion with similar-looking products. A SKU uniquely identifies a product even when the description might be ambiguous.
• Better Order Processing: Makes it easier for you and your team to pick, pack, and ship orders accurately, minimizing errors and returns.

Main Part:

Now, let’s explore different ways to display the SKU in your WooCommerce store:

Method 1: Using the WooCommerce Theme Customizer (For Some Themes)

Some WooCommerce-compatible themes offer built-in options to show the SKU directly through the theme customizer. This is the easiest approach if your theme supports it.

1. Navigate to Appearance > Customize in your WordPress dashboard.

2. Look for a section related to WooCommerce or Product Pages. The exact wording varies depending on your theme.

3. Within the WooCommerce settings, you might find a checkbox or option to “Show SKU” or “Display SKU on Product Page.”

4. Enable the option and preview the changes. If you’re satisfied, click Publish.

Pros:

• Easiest method if your theme supports it.
• No coding required.

Cons:

• Not all themes offer this option.
• Limited customization options beyond simply showing or hiding the SKU.

Method 2: Editing the Theme’s `functions.php` File (Requires Coding Knowledge)

This method involves adding a code snippet to your theme’s `functions.php` file. Important: It is highly recommended to use a child theme to avoid losing your customizations when the parent theme is updated.

1. Create a Child Theme: If you haven’t already, create a child theme for your current theme. This prevents your changes from being overwritten during theme updates.

2. Access the `functions.php` file: Access the `functions.php` file of your child theme through your WordPress admin panel (Appearance > Theme File Editor – select your child theme at the top) or via FTP.

3. Add the Code Snippet: Paste the following code snippet into the `functions.php` file:

<?php
/**
Show SKU on single product page
*/
add_action( 'woocommerce_single_product_summary', 'display_sku', 6 );

function display_sku() {

global $product;

if ( is_product() && wc_product_sku_enabled() && $product->get_sku() ) {

echo ‘

SKU: ‘ . $product->get_sku() . ‘

‘;

}

}

?>

4. Save Changes: Save the changes to the `functions.php` file.

5. Check Your Product Pages: Visit your product pages to see the SKU displayed.

Explanation of the Code:

• `add_action( ‘woocommerce_single_product_summary’, ‘display_sku’, 6 );`: This line hooks the `display_sku` function into the `woocommerce_single_product_summary` action, which is responsible for displaying the product information on the single product page. The `6` specifies the priority, ensuring it’s displayed in a specific order relative to other elements.
• `function display_sku() { … }`: This defines the function that displays the SKU.
• `global $product;`: This makes the `$product` object available within the function.
• `if ( is_product() && wc_product_sku_enabled() && $product->get_sku() ) { … }`: This conditional statement ensures that the SKU is only displayed if we are on a single product page, if SKU display is enabled in WooCommerce settings, and if the product actually has an SKU.
• `echo ‘
  SKU: ‘ . $product->get_sku() . ‘

  ‘;`: This line outputs the HTML code to display the SKU. The `sku_wrapper` and `sku` classes allow you to customize the appearance with CSS.

Pros:

• Gives you more control over where the SKU is displayed.
• Relatively straightforward for those with coding experience.

Cons:

• Requires editing theme files, which can be risky if done incorrectly.
• Requires a child theme to avoid losing changes.
• Requires some coding knowledge.

Method 3: Using a WooCommerce Plugin

Several plugins can help you display the SKU without any coding. Here are a couple of popular options:

• YITH WooCommerce Catalog Mode: While primarily designed for catalog mode, this plugin often includes options to display the SKU. Check the plugin’s settings after installation.
• WooCommerce Additional Fields: Some “additional fields” plugins allow you to add custom fields, including displaying the SKU in specific locations.
• Code Snippets Plugin + Custom Code: You can use the “Code Snippets” plugin to safely add the code from Method 2 without directly editing your theme files. This is a good middle ground.

Using the “Code Snippets” Plugin:

1. Install and Activate the Code Snippets Plugin: Search for “Code Snippets” in the WordPress plugin directory and install/activate it.

2. Add a New Snippet: Go to Snippets > Add New.

3. Paste the Code: Copy the code from Method 2 (the `functions.php` code) and paste it into the snippet editor.

4. Name the Snippet: Give the snippet a descriptive name, like “Display WooCommerce SKU.”

5. Save and Activate: Save the snippet and activate it.

Pros:

• No direct code editing required when using Code Snippets.
• Plugins can offer more advanced customization options.

Cons:

• Requires installing and managing an additional plugin.
• Plugin functionality can sometimes conflict with other plugins or themes.

Styling the SKU Display

Regardless of the method you choose, you might want to style the SKU display to better match your website’s design. You can achieve this using CSS.

1. Locate the CSS Editor: Go to Appearance > Customize > Additional CSS (or a similar option depending on your theme).

2. Add CSS Rules: Add CSS rules targeting the `.sku_wrapper` and `.sku` classes (from the `functions.php` example) to style the SKU display. For example:

.sku_wrapper {

margin-bottom: 10px;

font-size: 14px;

color: #666;

}

.sku {

font-weight: bold;

}

Conclusion:

Displaying the SKU in WooCommerce is a simple yet powerful way to improve the customer experience, streamline inventory management, and reduce errors. Choosing the right method depends on your technical skills and theme compatibility. If your theme offers a built-in option, that’s the easiest route. If not, consider using the Code Snippets plugin with the `functions.php` code for a safe and customizable solution. Remember to use a child theme and thoroughly test any changes before deploying them to a live website. By implementing one of these methods, you’ll be well on your way to creating a more efficient and user-friendly WooCommerce store. Showing the SKU is a win-win for you and your customers!