How To Remove Sku In Woocommerce

How to Remove SKU in WooCommerce: A Beginner’s Guide

So you’ve launched your WooCommerce store and you’re selling like hotcakes (or at least aiming to!). But you might be looking at some of the default features and thinking, “Do I *really* need that SKU showing on every product?” If that SKU (Stock Keeping Unit) is just clutter and doesn’t serve a purpose for your business, then this guide is for you. We’ll walk you through the simple steps to remove the SKU from your WooCommerce store, even if you’re a complete beginner.

Why Remove the SKU, Anyway?

Good question! The SKU is a unique identifier for each product. It’s useful for inventory management, especially if you’re dealing with a large and complex catalog. But here’s why you might want to remove it:

    • Simplicity for Customers: If your products are easily identifiable by name and description, a SKU might just confuse your customers. Imagine you’re selling handmade candles, and each has a unique scent. The name “Lavender Serenity Candle” is far more helpful than “CANDLE-LS-001.”
    • Aesthetic Appeal: Let’s face it, SKUs aren’t always pretty. Removing them can clean up your product pages and make them look more professional. Think about it: a clean, minimalist design often translates to a better user experience.
    • Explore this article on How To Upload Mutiple Variables To Woocommerce Price Calculator

    • No Real Use: If you’re a small business with a limited product range and you’re not actively using SKUs for inventory management, they’re simply unnecessary.
    • Drop Shipping or Affiliate Marketing: If you’re drop shipping or involved in affiliate marketing, you often don’t handle inventory directly. In this case, the SKU is irrelevant to your customers.

    Okay, I’m convinced. How do I remove the SKU?

    There are several ways to remove the SKU from your WooCommerce store. We’ll cover the easiest and most common methods, focusing on options that require little to no coding.

    Method 1: Using the WooCommerce Customizer (No Code Required)

    This is often the quickest and easiest method, depending on your theme. Some themes have built-in options to hide the SKU.

    1. Go to Appearance > Customize: In your WordPress dashboard, navigate to Appearance and then click on Customize.

    2. Look for WooCommerce Settings: Within the Customizer, look for a section labeled something like WooCommerce, Product Pages, or similar. The exact wording will depend on your theme.

    3. Find SKU Display Options: Within the WooCommerce settings, you might find a checkbox or toggle to “Hide SKU” or “Disable SKU display.”

    4. Save and Publish: If you find the option, uncheck the box or toggle the setting to hide the SKU. Then, click the Publish button at the top of the Customizer to save your changes.

    Example:

    Imagine your theme is called “Storefront” and it has a customizer option under WooCommerce > Product Pages labeled “Display Product SKU?”. Unchecking this box would remove the SKU from all your product pages.

    Why this works: Many modern themes are designed to be flexible and provide customization options without needing to edit code. The Customizer is a user-friendly interface for making these changes.

    Method 2: Using a Code Snippet (For Most Themes)

    If your theme doesn’t have a built-in option, you can use a simple code snippet. This is still a relatively easy method, even for beginners.

    1. Access your Theme’s `functions.php` file OR use a Code Snippets plugin:

    • Option 1 (Not Recommended for Beginners): Directly editing the `functions.php` file of your theme is generally not recommended because an error Check out this post: How To Schedule Bulk Sale Price In Woocommerce can break your entire site. If you choose this route, always back up your theme first! You can find this file by going to Appearance > Theme Editor in your WordPress dashboard. Select your theme from the dropdown, and look for `functions.php` in the file list.
    • Option 2 (Recommended): Use a Code Snippets plugin. This is a safer and easier way to add custom code to your WordPress site. A popular and reliable plugin is called “Code Snippets.” Install and activate it.

    2. Add the Code Snippet:

    • If using `functions.php` (with caution!): Paste the following code snippet at the *end* of your `functions.php` file, before the closing `?>` tag (if present):
     add_filter( 'wc_product_sku_enabled', '__return_false' ); 
    • If using Code Snippets: Go to Snippets > Add New in your WordPress dashboard. Give the snippet a title (e.g., “Remove WooCommerce SKU”). Paste the same code snippet into the “Code” area:
     add_filter( 'wc_product_sku_enabled', '__return_false' ); 

    Set the snippet to run “Only in the admin area” or “Everywhere” (either will work for this specific snippet). Click Save Changes and Activate.

    3. Check Your Product Pages: Visit one of your product pages to confirm that the SKU is no longer displayed.

    Example:

    You install the “Code Snippets” plugin, create a new snippet, and paste the code above. After activating the snippet, you refresh your product page and the SKU is gone!

    Why this works: The `add_filter()` function allows you to modify the default behavior of WordPress and WooCommerce. In this case, we’re using the `wc_product_sku_enabled` filter to tell WooCommerce to disable the display of the SKU. `__return_false` is a built-in WordPress function that simply returns the boolean value `false`.

    Method 3: Using CSS (Hides the SKU, Doesn’t Remove it From the HTML)

    This method *hides* the SKU using CSS, rather than removing it entirely. It’s a quick fix, but the SKU still exists in the underlying HTML code.

    1. Go to Appearance > Customize > Additional CSS: In your WordPress dashboard, navigate to Appearance > Customize and then click on Additional CSS.

    2. Add the CSS Code: Paste the following CSS code into the Additional CSS area:

    .sku_wrapper {

    display: none !important;

    }

    3. Publish: Click the Publish button to save your changes.

    Example:

    You paste the CSS code into the Additional CSS area, and immediately you see the SKU disappear from the preview of your product page.

    Why this works: The `.sku_wrapper` class is used by WooCommerce to wrap the SKU element on product pages. By setting `display: none !important;`, we’re telling the browser to hide that element and everything inside it. The `!important` flag ensures that this CSS rule overrides any other conflicting styles.

    Important Note: While this method is quick and easy, it doesn’t actually remove the SKU from the page’s HTML. This means it’s still technically present in the source code, which *could* have minor implications for SEO in very rare cases. However, for most situations, it’s perfectly acceptable.

    Choosing the Right Method

    • If your theme has a built-in option: This is the easiest and most reliable method.
    • If you’re comfortable with a plugin: Using the Code Snippets plugin and the code snippet is the recommended approach, especially if you’re new to coding. It’s safer than directly editing your theme’s `functions.php` file.
    • If you just want a quick fix: Using CSS to hide the SKU is the fastest option, but remember that it doesn’t actually remove the SKU from the HTML.

Final Thoughts

Removing the SKU from your WooCommerce store can be a simple way to improve the user experience and make your product pages cleaner and more focused. Choose the method that best suits your comfort level and technical skills. Good luck!

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *