Shortcode to place SKU anywhere

Learn how to build E-Commerce webshops using Flatsome & WooCommerce and convert visitors into loyal customers.

Back to tutorials

In this tutorial, I'll walk you through how to display a product's SKU (Stock Keeping Unit) on your WooCommerce site using a custom shortcode. SKUs are unique identifiers for products, and sometimes it's useful to display them in your store. Let's dive in!

Step-by-Step Guide:

1. Create a PHP Snippet

First, we'll create a custom PHP snippet to handle the SKU display.

• If you're not familiar with adding PHP snippets, I recommend using a plugin. My favorite is WP Codebook, but you can also use alternatives like Code Snippets.
• Open your WP Codebook plugin (or similar) and click on Add Snippet.
• Name your snippet something memorable, like "WooCommerce Custom SKU Shortcode".

2. Paste the snippet

After naming your snippet, paste the following code into the snippet editor:

<?php 

// Function to output SKU container for variable products or show SKU for simple products
function wc_product_sku_shortcode() {
    global $product;

    // Check if the product exists
    if ( $product && is_a( $product, 'WC_Product' ) ) {
        // For variable products, add a container for SKU display
        if ( $product->is_type( 'variable' ) ) {
            // Enqueue JavaScript for SKU update inline
            add_action( 'wp_footer', 'wc_sku_variation_inline_script' );
            return '<div id="variation-sku" style="display:none;">SKU: </div>';
        } else {
            // For simple products, display the single SKU
            $sku = $product->get_sku();
            return $sku ? 'SKU: ' . $sku : ''; 
        }
    }

    return ''; 
}

// Register the shortcode
add_shortcode( 'product_sku', 'wc_product_sku_shortcode' );

// Inline JavaScript for SKU update on variation change
function wc_sku_variation_inline_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Listen for variation selection change
            $(document.body).on('found_variation', function(event, variation) {
                var sku = variation.sku; // Retrieve SKU directly from variation data

                // Update SKU display
                if (sku) {
                    $('#variation-sku').text('SKU: ' + sku).show();
                } else {
                    $('#variation-sku').hide();
                }
            });
        });
    </script>
    <?php
}

This code creates a shortcode that fetches and displays the SKU of the current WooCommerce product.

3. Activate the Snippet

• Save your snippet.
• If you're using WP Codebook, the plugin will alert you if there's any error in your code, preventing the site from breaking.
• After saving, activate the snippet by toggling it on.

4. Insert the Shortcode in Your Product Layout

Now that the shortcode is ready, you can place it anywhere in your product layout.

• Navigate to your WooCommerce product where you'd like to display the SKU.
• In the HTML section of your product page (using a page builder or manually), insert the following shortcode:

[product_sku]

• Add a label, such as “SKU,” so that customers know what the displayed code refers to.

5. Style the SKU Display (Optional)

If you want to style the SKU, you can assign a custom class to the HTML element where the shortcode is placed. Then, use CSS to style it as you like. For example:

6. Save and Test

Once you've added and styled the shortcode, update your product and preview it. The SKU should now appear where you added the shortcode.

• If it doesn't appear right away, double-check your code or plugin settings to make sure everything is working correctly.
• Remember that conflicts with other custom code or optimization plugins may affect this feature. If something breaks, review any recently added plugins or code that may interfere.

That's it! You've now successfully added a custom SKU display to your WooCommerce products.