If you run a WooCommerce store, you may often need to display product SKUs dynamically on your WooCommerce product pages. While WooCommerce shows SKUs in the backend, showing the correct SKU for variable products for the selected variations on the frontend requires some custom coding.
In this tutorial, we’ll guide you on how to display selected product variation SKUs in WooCommerce using a custom code snippet, making it easy to show SKUs for variable products.
Solution: Display Selected Product Variation SKU
Based on the variation a customer selects (like colour or storage for an iPhone), this snippet automatically shows the correct SKU for that variation right on the product page.
add_shortcode( 'product_sku_div', 'ts_product_sku_div');
function ts_product_sku_div() {
global $product;
if( ! is_a('WC_Product', $product) ) {
$product = wc_get_product( get_the_id() );
}
## 1 - For variable products (and their variations)
if( $product->is_type('variable') ) {
ob_start(); // Starting buffering
?>
<div class="widget" sp-sku=""></div>
<script type="text/javascript">
jQuery( function($){
$('form.variations_form').on('show_variation', function( event, data ){
$( 'div.widget' ).attr( 'sp-sku', data.sku );
// For testing
console.log( 'Variation Id: ' + data.variation_id + ' | Sku: ' + data.sku );
});
$('form.variations_form').on('hide_variation', function(){
$( 'div.widget' ).attr( 'sp-sku', '' );
});
});
</script><?php
return ob_get_clean(); // return the buffered content
}
## 2 - For other products types
else {
return sprintf( '<div class="widget" sp-sku="%s"></div>', $product->get_sku() );
}
}
Output
We’ve taken a variable product, iPhone, and assigned different attributes (model, colour, storage) in the backend, with each variation having its own unique SKU.
When a customer selects the variations, the SKU updates dynamically. For example, when they select this variation with the iPhone 15, White, 128GB combination, the associated SKU ‘IP-W-128’ will be displayed.
Each time a shopper changes the model, colour, or storage option, the snippet instantly shows the correct SKU for that specific variation on the page. For example, when the customer selects iPhone 16, Black, 256 GB, the page instantly displays the corresponding SKU: IP16-BK-256.
Displaying the correct SKU is one way to improve your customers’ shopping experience.
Another useful woocommerce customization is to hide or show specific variations for different types of customers. You can learn exactly how to do that in our step-by-step guide on hiding WooCommerce product variations based on user roles.
