WooCommerce: How to Hide the SKU on Your Product Pages (Even if You’re a Beginner!)
Are you selling fantastic products with WooCommerce, but find that the SKU (Stock Keeping Unit) is cluttering up your beautiful product pages? You’re not alone! Many store owners prefer to keep the SKU hidden, especially if it’s more for internal tracking than customer information. This guide will walk you through several easy ways to hide the SKU in WooCommerce, even if you’re a complete beginner. We’ll explain *why* you might want to hide it and provide clear instructions.
Why Hide the SKU Anyway?
Think of SKUs like employee ID numbers at a company. They’re incredibly useful *internally* for tracking, inventory management, and reporting. However, customers usually don’t need to know them. Here’s why hiding the SKU on your product pages is often a good idea:
- Cleaner Look & Feel: Removing the SKU makes your product page look less cluttered and more focused on the product itself. Imagine you’re selling handmade jewelry. The SKU “BRC-001-GLD” isn’t as appealing as a beautiful photo and a compelling description of the bracelet.
- Reduced Confusion: Customers might not understand what an SKU is and could become confused. This is especially true if your SKUs are complex or include internal codes. Avoid unnecessary questions and potential frustration.
- Professionalism: In some cases, showing the SKU can make your store look less polished or professional. If you’re striving for a high-end brand image, hiding the SKU can contribute to that perception.
- Competitive Advantage (Potentially): In rare cases, competitors might try to use your SKUs to gather information about your product sourcing or inventory. Hiding the SKU can make this slightly more difficult.
- Improved Conversions: A less cluttered and more focused product page can lead to increased conversions. Eliminating distractions like the SKU allows customers to concentrate on the benefits and features of your products, making them more likely to purchase.
- `.sku_wrapper` is the CSS class that usually contains the SKU on a WooCommerce product page. You can inspect the HTML of your product page to confirm this. Right-click on the SKU on your product page and select “Inspect” or “Inspect Element”.
- `display: none;` hides the element from the page.
- `!important` ensures that this CSS rule overrides any other conflicting rules.
Now, let’s dive into *how* to hide it!
Method 1: Using WooCommerce Settings (If Possible – Theme Dependent)
Some WooCommerce themes offer a built-in option to hide the SKU directly from the theme settings. This is the easiest method, if available.
1. Go to your WordPress dashboard.
2. Navigate to Appearance -> Customize. (This may be in a slightly different location depending on your theme, like Theme Options or a similar custom area.)
3. Look for WooCommerce related settings, often labeled something like WooCommerce -> Product Page, WooCommerce -> Single Product, or similar.
4. Within those settings, search for an option to “Hide SKU”, “Display SKU”, or something similar. If you find it, simply disable the option and save your changes.
Example: Your theme options *might* look something like this (but again, it varies greatly):
 (This is just an example image, your theme might have completely different settings.)
Unfortunately, this method is theme-dependent. If your theme doesn’t have this option, don’t worry – we have other methods!
Method 2: Using CSS (Quick and Easy for Basic Hiding)
This method uses CSS (Cascading Style Sheets) to visually hide the SKU. It’s a quick fix, but doesn’t remove the SKU’s code from the page source.
1. Go to your WordPress dashboard.
2. Navigate to Appearance -> Customize.
3. Click on Additional CSS.
4. Paste the following CSS code into the box:
.sku_wrapper {
display: none !important;
}
5. Click Publish.
Explanation:
Important Note: While easy, this method only hides the SKU visually. The SKU code still exists in the HTML source of the page. This is generally fine for most users.
Method 3: Using a Code Snippet (More Advanced, But Cleanest Solution)
This method involves adding a PHP code snippet to your theme’s `functions.php` file or, preferably, using a plugin like Code Snippets (recommended for safety and maintainability). This is the cleanest way to *completely* remove the SKU from the product page.
Why use Code Snippets? Directly editing your theme’s `functions.php` file can be risky. If you make a mistake, it can break your website. Code Snippets allows you to add and manage code snippets safely and easily, without touching your theme files.
Steps:
1. Install and Activate the “Code Snippets” Plugin: Go to Plugins -> Add New in your WordPress dashboard, search for “Code Snippets”, install and activate the plugin.
2. Add a New Snippet: Go to Snippets -> Add New.
3. Paste the Following Code:
add_filter( 'wc_product_sku_enabled', '__return_false' );
4. Save and Activate the Snippet: Give your snippet a descriptive title (e.g., “Hide WooCommerce SKU”). Make sure the snippet is set to “Run snippet everywhere” (or at least on the frontend). Then, click Save Changes and Activate.
Explanation:
- `add_filter( ‘wc_product_sku_enabled’, ‘__return_false’ );` is a WordPress filter that controls whether or not the SKU is displayed. By hooking into this filter and returning `false`, we tell WooCommerce not to display the SKU. `__return_false` is a built-in WordPress function that simply returns `false`.
This method completely removes the SKU from the product page’s code.
Method 4: Editing the Theme Files (Not Recommended for Beginners!)
WARNING: This method is only recommended for experienced users. Incorrectly editing theme files can break your website. Always back up your website before making any changes!
This method involves directly editing your theme files to remove the SKU display code.
1. Identify the Correct Template File: The SKU is usually displayed in the `content-single-product.php` file or a related template file within your theme’s WooCommerce folder ( `/wp-content/themes/your-theme/woocommerce/content-single-product.php`). If your theme overrides WooCommerce templates, you will find it there. If not, it’s probably pulling from the default WooCommerce templates.
2. Edit the Template File: Use a child theme if you are modifying parent theme templates.
- Look for the code that displays the SKU, which usually includes the following structure:
- Remove this entire `div` element.
get_sku() ) ? $sku : esc_html__( ‘N/A’, ‘woocommerce’ ); ?>
3. Save the File: Discover insights on Woocommerce How To Mark A Product As Featured Save the changes to the template file.
Why this method is not recommended:
- Complexity: Finding the correct file and code can be challenging.
- Risk: Errors in the template file can break your website.
- Updates: Theme updates can overwrite your changes, requiring you to re-edit the file.
Choosing the Right Method
- Easiest: Check your theme options first (Method 1).
- Quick Fix: Use CSS (Method 2), but remember it only hides the SKU visually.
- Cleanest & Recommended (for Beginners and Experts Alike): Use the Code Snippets plugin (Method 3).
- Most Advanced (Not Recommended): Edit theme files (Method 4).
By following these steps, you can easily hide the SKU on your WooCommerce product pages and create a cleaner, more user-friendly shopping experience for your customers. Good luck!
