Quick Summary
SKUs (Stock Keeping Units) are important in managing products in any eCommerce store. They make it easier to track inventory, process orders, and help customers find the exact product they’re looking for.
If you’re using the Divi theme with WooCommerce, you might notice that SKUs are either missing or hidden on product pages. This can be due to styling, layout settings, or theme limitations.
In this blog, we’ll help you learn how to show SKUs on your WooCommerce product page with the Divi theme builder. Whether you’re doing it yourself or plan to hire WooCommerce developers, these steps will help you get started.
SKUs help you manage products, track inventory, and make support easier. Showing them on product pages improves clarity for both store owners and customers.
Even a small detail (like an SKU) can improve your store’s efficiency and user experience.
Divi is one of the best eCommerce website templates. Due to its popularity and advanced design capabilities, many store owners use it.
If you’ve recently switched to the Divi theme, you might notice the SKU is missing from your WooCommerce product pages. That’s not a bug. Divi often overrides or customizes the default WooCommerce templates, and as a result, the SKU might not be displayed or could be hidden using CSS.
Before adding any code or plugins, inspect the page and see if the SKU is being output but not visible.
Steps to Inspect:
Example of hidden SKU markup:
<span class="sku_wrapper">SKU: <span class="sku">12345</span></span>
If this is present but not showing visually, it’s likely hidden by CSS.
Common CSS That Hides SKU:
.sku_wrapper {
display: none;
}
This can be overridden by adding your own CSS (we’ll show you how in the next section).
Divi doesn’t intentionally remove the SKU, but its custom layouts and styling often prevent it from showing. A quick inspection will help you confirm whether you need a display fix or a code-based solution.
There are a few different ways to show SKUs on your WooCommerce product pages when using Divi. Some methods are quick fixes, while others give you more control over how the SKU appears. Let’s go through four simple methods you should consider.
Sometimes, the SKU is already being loaded by WooCommerce, but Divi hides it using CSS. Before adding any code or plugins, it’s a good idea to check if the SKU is present in the page source but just not visible.
How to Inspect the Page for SKU:
Follow these steps to check if the SKU is being rendered:
1. Open a product page on your site.
2. Right-click anywhere on the page and select Inspect or press F12.
3. Use the search feature (Ctrl + F or Cmd + F) and look for: sku
4. If you find something like this, then SKU is present but might be hidden with CSS.
<span class="sku_wrapper">SKU: <span class="sku">12345</span></span>
How to Make It Visible with CSS:
If the SKU is hidden, you can override the style using this CSS:
.product_meta .sku_wrapper {
display: block !important;
}
Where to Add the CSS:
This simple fix solves the issue in many cases without needing extra plugins or code changes. Always check this first, it might save you extra work.
If the SKU is not present in your product page markup, you can add it manually using a simple PHP snippet. This method gives developers full control over where and how the SKU appears on the page.
How to Add SKU via Code:
You’ll use a WooCommerce action hook to insert the SKU in the product summary area.
Code Snippet:
add_action( 'woocommerce_single_product_summary', 'show_sku_on_single_product', 20 );
function show_sku_on_single_product() {
global $product;
if ( $product->get_sku() ) {
echo '<div class="custom-sku">SKU: ' . esc_html( $product->get_sku() ) . '</div>';
}
}
Where to Add the Code
How It Works:
This method is best for developers who want a clean, plugin-free solution. With just a few lines of code, you can reliably display SKUs exactly where you want them.
If you’re using Divi’s Theme Builder to create custom product pages, you can manually insert the SKU using Divi modules and a bit of shortcode logic. This method is perfect for users who want full design control without working with PHP.
Steps to Display SKU in Divi Theme Builder:
Create the Shortcode with PHP:
To make the [custom_sku] shortcode work, you need to register it using this code:
function custom_sku_shortcode() {
global $product;
if ( $product && $product->get_sku() ) {
return 'SKU: ' . esc_html( $product->get_sku() );
}
}
add_shortcode( 'custom_sku', 'custom_sku_shortcode' );
Add this code to your child theme’s functions.php file, or use the Code Snippets plugin.
Why This Works Well:
Using this method, you get a clean and flexible way to add SKU display to any product layout — all while staying inside Divi’s design environment.
If you’re not comfortable with custom code or theme editing, using a plugin is the easiest way to show the SKU on your WooCommerce product pages. Many plugins offer flexible display options without needing technical skills. Here are some trusted plugins that can help display the SKU:
1. Product SKU Generator for WooCommerce
2. Custom Product Tabs for WooCommerce
How to Use These Plugins
Using a plugin is a hassle-free way to make SKUs visible, especially for users who want a simple and safe solution. It gets the job done without diving into code or theme files.
You can show custom fields by using the get_post_meta() function in your theme’s single product template. Another option is to use a plugin like “Advanced Custom Fields” to add and display fields without touching code.
WooCommerce doesn’t auto-generate SKUs by default, but you can use plugins like “SKU Generator for WooCommerce” or add custom code to create SKUs based on product ID, name, or category.
To hide the SKU, you can go to WooCommerce > Settings > Products > Inventory and uncheck “Show SKU on product page.” You can also use CSS to hide it visually.
To display WooCommerce products on a custom page, use the [products] shortcode. You can filter products by category, tag, or ID using shortcode parameters like [products category=”t-shirts”].
The meta key for SKU in WooCommerce is _sku. You can retrieve it using get_post_meta( $product_id, ‘_sku’, true ) in your custom code.
Displaying the SKU on your WooCommerce product page helps improve product management and gives users more clarity while browsing. It’s a small detail that makes a big difference in the shopping experience.
Whether the SKU is hidden or missing, or you want to customize how it appears, Divi gives you enough flexibility to handle it through CSS, code, or plugins. You can choose the method that fits your needs best. If you’re looking for a more tailored solution or want help setting things up, our expert WooCommerce developers can help. Reach out to us today; we’d love to assist you.
Ankur Shah is a tech-savvy expert specializing in eCommerce solutions. With a deep understanding of WooCommerce and Shopify, he helps businesses optimize their online stores for success. Whether it's implementing new features or troubleshooting issues, Ankur is your go-to guy for all things eCommerce.
