WooCommerce Display Product Variations SKU

Question

I am using WooCommerce and I'm trying to display product variation SKUs on the product page below the product title. I managed to find this code, which works but displays the SKU in the wrong place:

// Display product variations SKU and GTIN info
add_filter( 'woocommerce_available_variation', 'display_variation_sku_and_gtin', 20, 3 );
function display_variation_sku_and_gtin( $variation_data, $product, $variation ) {
$html = ''; // Initializing

// Inserting SKU
if( ! empty( $variation_data['sku'] ) ){
    $html .= '</div><div class="woocommerce-variation-sku">' . __('SKU:') . ' ' . $variation_data['sku'];
}

// Using the variation description to add dynamically the SKU and the GTIN
$variation_data['variation_description'] .= $html;

return $variation_data;
}

Can anyone help with changing the order of this code so the SKU shows below the product title, or help me with some new code?

Many thanks!

Terminator-Barbapapa Terminator-Barbapapa · Accepted Answer · 2020-06-28T08:44:38

WooCommerce does not provide a specific action hook that will let you add anything right after the product title, that also makes use of the variation data like the hook in your current code. You can work around this by adding an element after the product title via JavaScript/jQuery.

You want this element to dynamically change based on the selected variation. Since you do not have access to the variation data directly in the action hook you will have to check the hidden input variation_id that WooCommerce uses to store the selected variation id. Then use AJAX every time that input changes to retrieve the variation SKU belonging to this variation id.

add_action( 'woocommerce_before_single_product', 'show_variation_sku_underneath_product_title' );
function show_variation_sku_underneath_product_title() {

    global $product;

    if ( $product->is_type('variable') ) {
        ?>
        <script>
        jQuery(document).ready(function($) {     
            $('input.variation_id').change( function(){
                if( '' != $('input.variation_id').val() ) {

                    jQuery.ajax( {

                        url: '<?php echo admin_url( 'admin-ajax.php'); ?>',
                        type: 'post',
                        data: { 
                            action: 'get_variation_sku', 
                            variation_id: $('input.variation_id').val()
                        },
                        success: function(data) {
                            $('h1.product_title').siblings('.variation-sku').remove();
                            if(data.length > 0) {
                                $('h1.product_title').after('<p class="variation-sku">' + data + '</p>');
                            }
                        }
                    });

                }
            });
        });
        </script>
    <?php
    }
}
    
add_action('wp_ajax_get_variation_sku' , 'get_variation_sku');
add_action('wp_ajax_nopriv_get_variation_sku','get_variation_sku');
function get_variation_sku() {

    $variation_id = intval( $_POST['variation_id'] );
    $sku = '';

    if ( $product = wc_get_product( $variation_id ) ) $sku = $product->get_sku();
    echo $sku;

    wp_die(); // this is required to terminate immediately and return a proper response
}

These code snippets should be added to the functions.php of your child theme or via a plugin like Code Snippets.

WooCommerce Display Product Variations SKU

1 Answers