How to Show SKU on WooCommerce Product Page with Divi
Running an eCommerce store with WooCommerce means managing product details in a way that actually helps the shopping experience rather than just filling out a form. One detail that gets overlooked constantly is the SKU, the Stock Keeping Unit, a unique identifier for each product that store owners rely on for inventory tracking and that customers rely on for order questions and returns. Depending on your theme, this detail doesn’t always show up where it should. Divi is known for its flexibility and drag-and-drop builder, but out of the box, it doesn’t always surface the SKU on the product page. Here’s how to add it back, with a built-in setting, custom code, or a plugin.
What Is an SKU, and Why Does It Matter?
An SKU is a unique code identifying a specific product in your inventory. Store owners use it to track stock and keep products correctly categorized across a growing catalog. Customers use it too, whenever they have a question about a specific item or need help processing a return, an SKU gives support a precise reference instead of a vague product name that might match three similar listings.
Displaying the SKU directly on the product page puts that information where customers can actually find it themselves, rather than making your support team handle every SKU lookup by hand over email or chat.
Default WooCommerce SKU Display
WooCommerce has built-in support for SKUs at the data level, every product has an SKU field in the admin regardless of theme. Most WooCommerce-compatible themes display that SKU automatically on the product page, typically just under the product title or price. Divi, however, doesn’t always surface it prominently, which is why store owners running Divi specifically need to take an extra step to make it visible.
Methods to Display SKU on a WooCommerce Product Page in Divi
There are three routes to getting the SKU visible when you’re running Divi: the theme builder’s own settings, a short piece of custom code, or a dedicated plugin. Which one fits depends on your comfort level with each.
1. Display SKU Using Divi Builder’s Product Page Settings
Divi lets you build custom product pages with its own drag-and-drop builder, and it’s worth checking this route first since it requires no code at all.
Step-by-Step Guide
- Go to WooCommerce > Products in your WordPress dashboard.
- Open the product you want to edit.
- Click Enable Divi Builder to open the page builder interface for that product.
- Look for the Product Elements module inside the Divi Builder.
- Check whether SKU appears as a visible field within this module. Depending on your Divi version, it may be tucked in alongside description, price, or additional information fields rather than listed as its own toggle.
- If SKU isn’t exposed here at all, move on to one of the next two methods.
This is the easiest option to try first precisely because it needs no code, but it doesn’t always expose SKU visibility depending on your specific Divi version. When it doesn’t, custom code or a plugin are the reliable fallbacks.
2. Display SKU with Custom Code (PHP and CSS)
If you’re comfortable adding a small snippet, this method is direct and skips installing another plugin just for one field.
Step-by-Step Guide
- Go to Appearance > Theme File Editor in your WordPress admin.
- In the sidebar, open the
functions.phpfile for your child theme. If you’re running the main Divi theme without a child theme, create one first, otherwise this change disappears the next time Divi updates. - Add the following code to display the SKU:
add_action( 'woocommerce_single_product_summary', 'display_product_sku', 20 );
function display_product_sku() {
global $product;
if ( $product->get_sku() ) {
echo '<p class="product-sku">SKU: ' . esc_html( $product->get_sku() ) . '</p>';
}
}
- Click Update File to save. The SKU now displays below the product summary section.
Styling the SKU
To make the SKU visually match your Divi theme rather than looking like an afterthought, add CSS along these lines:
.product-sku {
font-size: 16px;
font-weight: bold;
color: #333;
margin-top: 10px;
}
Add this CSS through Appearance > Customize > Additional CSS.
3. Display SKU Using a Plugin
If you’d rather not touch code at all, a plugin is the third option. A handful of WooCommerce plugins exist specifically for managing and displaying SKUs without any technical setup on your end.
Recommended Plugins
WooCommerce Show SKU on Product Page does exactly what the name says: it’s built specifically to display SKUs on WooCommerce product pages, and after installation it automatically places the SKU in a predefined, sensible location. WooCommerce Product SKU Generator takes a different angle, generating SKUs automatically for products that don’t already have them assigned, useful if you’re managing a store that inherited an inconsistent or missing SKU system and need one built from scratch before displaying it makes any sense.
Step-by-Step Guide for Plugin Installation
- Go to Plugins > Add New in your WordPress dashboard.
- Search for “WooCommerce Show SKU on Product Page.”
- Install and activate it.
- Check WooCommerce > Settings for any additional display settings the plugin adds, and adjust to your preference.
- Save your changes. The plugin will now display the SKU automatically on product pages going forward.
Beyond the Product Page: Where Else SKUs Matter
Once the SKU is visible on the front end, it’s worth checking a few other places it should also appear but sometimes gets missed. Order confirmation emails are one, a customer referencing “the blue one” in a support email is far less useful than one referencing the exact SKU printed on their order confirmation. WooCommerce includes the SKU on order emails by default in most themes, but a heavily customized email template can strip it out without anyone noticing until a support ticket comes in that’s harder to resolve than it should be. Packing slips and invoices, if you’re printing them through a plugin, should also carry the SKU, since that’s often the actual reference warehouse staff use when fulfilling and verifying an order matches what was actually purchased.
SKU Naming Conventions Worth Adopting
Displaying the SKU only helps if the SKU itself is actually useful to read, not just a random string. A well-structured SKU, something like a category prefix followed by a size or color code, tells a customer or support agent something at a glance rather than requiring a lookup. If your store’s SKUs are currently auto-generated numbers with no internal logic, this is worth fixing before investing further effort in surfacing them more prominently on the front end. A visible SKU that means nothing to anyone reading it doesn’t accomplish much more than an invisible one.
Best Practices for Displaying SKUs
Place the SKU somewhere genuinely easy to find, below the product title or near the price works well, rather than buried at the bottom of a long description where nobody scrolls to check it. Keep the SKU format consistent across your entire catalog; inconsistency defeats the purpose of having a lookup system at all. Style the SKU text so it’s legible and matches your theme rather than looking like debug output left on the page by accident. And always check how it renders on mobile specifically, since a SKU line that wraps awkwardly or overlaps another element on a small screen undermines the very visibility you added it for in the first place.
Troubleshooting SKU Display Issues
The SKU field is empty even after adding code
Confirm the product actually has an SKU entered in the admin under the Inventory tab. The code snippet only displays a value that exists, it doesn’t generate one, and a product with a blank SKU field will simply show nothing regardless of how the display logic is configured.
SKU shows on some products but not others
This is almost always inconsistent data entry rather than a code or plugin problem. Audit your product catalog for products missing an SKU value and fill them in; the WooCommerce Product SKU Generator plugin mentioned earlier can bulk-generate missing ones if manual entry across a large catalog isn’t practical.
Custom code disappeared after a theme update
This happens when the snippet was added to the parent Divi theme’s functions.php rather than a child theme. Always use a child theme, or a code-snippets plugin, for exactly this reason, parent theme files get overwritten on update and any direct edits are lost without warning.
Which Method Should You Use?
Divi’s built-in module is worth trying first since it needs no code, but it won’t always expose the SKU field depending on your version and how your product templates are configured. The PHP snippet gives you the most control over placement and styling and takes just a couple of minutes to add for anyone comfortable with a little code. A plugin is the right call if you’d rather not touch functions.php at all, or if you’re managing a catalog that needs SKUs generated in bulk rather than entered by hand. Whichever route you take, keep the SKU visible and consistently styled so it actually gets used, both by customers checking a listing before buying and by your own support team fielding order questions after the fact.
Displaying SKU Alongside Barcode or GTIN Data
Some stores track a barcode or GTIN (Global Trade Item Number) separately from the internal SKU, particularly if the store also sells through a marketplace channel like Amazon or Google Shopping that requires a standardized product identifier. If you’re managing both, decide upfront whether the customer-facing display should show the internal SKU, the external barcode, or both. Showing only the internal SKU is usually the right call for a typical WooCommerce storefront, since the barcode rarely means anything to a shopper and mainly exists for warehouse scanning and marketplace feed compliance. If you do need both visible, for a B2B store where wholesale buyers reference GTINs directly, extend the code snippet above to pull the second identifier from its own custom field or meta key rather than trying to cram both values into the same SKU field.
SKU Visibility on Variable Products
Variable products add a wrinkle the methods above don’t automatically handle. Each variation, a specific size and color combination, for example, can carry its own SKU distinct from the parent product’s SKU. The default WooCommerce variation dropdown does update the displayed SKU as a customer selects different options, but only if your theme’s variation template is actually wired to show it, and Divi’s default variation display doesn’t always carry this through cleanly.
Test this specifically if your catalog relies heavily on variable products. Select different variations on a live product page and confirm the SKU shown updates correctly, rather than staying frozen on the parent product’s SKU or, worse, on whichever variation happened to load first. If it isn’t updating, the PHP snippet from Method 2 needs a small adjustment to check for a variation-level SKU via $product->get_sku() called on the actual selected variation object rather than the parent product object, since calling it on the wrong object is the most common reason this breaks silently.
Why This Detail Gets Overlooked So Often
SKU visibility is exactly the kind of small, unglamorous detail that’s easy to skip when launching a store, since it has zero visible impact on the checkout flow or conversion rate in the short term. The cost shows up later, gradually, as a slow trickle of support tickets asking “which one is this” that a visible SKU would have prevented outright. It’s worth treating as part of your store’s launch checklist rather than a nice-to-have polish item added after the fact, particularly for a catalog with similar-looking products where a customer genuinely can’t tell two listings apart from the photo alone.
Auditing an Existing Catalog for Missing or Duplicate SKUs
Before rolling out SKU display across your whole site, it’s worth confirming your existing SKU data is actually trustworthy. A quick audit catches two common problems: products with no SKU assigned at all, which will simply show a blank field once display is enabled, and duplicate SKUs across different products, which defeats the entire purpose of having a unique identifier in the first place. WooCommerce’s product export tool, under Products > All Products > Export, gives you a CSV you can sort and scan for both issues far faster than clicking through products one at a time in the admin. Fix any gaps or duplicates before you make the SKU customer-facing, since a visibly broken or duplicated identifier is worse for trust than no visible identifier at all. A ten-minute spreadsheet check now saves a much bigger cleanup project later, once dozens of customer support tickets have already referenced a SKU that turned out to point to two different products.
Frequently Asked Questions
Does displaying the SKU affect WooCommerce SEO?
Not directly. SKUs aren’t a search ranking factor on their own, but a well-organized product page that includes clear identifying information tends to reduce bounce rate and support-driven confusion, which are indirect positive signals for a product listing overall.
Can I display the SKU on the shop archive page, not just the single product page?
Yes, though it requires a separate hook than the one used for the single product page. The same principle applies: a small code snippet or a plugin can add SKU display to archive-page product cards, but you’ll need to target the correct hook for that template rather than reusing the single-product snippet as-is.
Will this method work if I switch away from Divi later?
The PHP code snippet is theme-agnostic and will keep working after a theme switch, since it hooks into WooCommerce’s own action rather than anything Divi-specific. The Divi Builder module method, by contrast, is tied to Divi and won’t carry over if you switch themes.
Should the SKU be clickable or link anywhere?
Not typically. Most stores treat the SKU as plain reference text rather than a link, since there’s usually nothing meaningful to link it to on the customer-facing side. An exception is a B2B store where wholesale buyers search by SKU directly, in which case linking it to a filtered search results page can genuinely save a step for repeat buyers who already know exactly what they want.
Does WooCommerce require every product to have an SKU?
No, the SKU field is optional at the WooCommerce level. A store can run perfectly well without SKUs assigned, but once you decide to display them for customer reference, an inconsistently populated field undermines the point, so it’s worth committing to filling in the gaps once you’ve decided the feature is worth having.
Interesting Reads:
How to Set Up Free Shipping in WooCommerce After Amount Added
How to Export Individual Products in WooCommerce
How to Change WooCommerce Magnifying Glass
Displaying SKU in the Cart and on the Checkout Summary
Most of the discussion around SKU visibility focuses on the product page, but the cart and checkout review step deserve the same attention, particularly for a store where customers regularly order more than one item at a time. A cart summary listing three near-identical variations by name alone, without the distinguishing SKU, is exactly where a wrong-item order slips through unnoticed until the customer opens the package.
Adding SKU to the cart table takes a similar approach to the product page snippet, hooking into woocommerce_cart_item_name to append the SKU value after the product title. Test this specifically with variable products in the cart, since the cart item needs to reference the actual variation’s SKU rather than falling back to the parent product’s, the same distinction that trips up SKU display on the product page itself.