Looper/Shortcode Issue 5.0.8 - Variable Woo Products - SKU shortcode not showing

[sam_futr]

Hey Team

The shortcode for SKU’s in WooCommerce - {{dc:woocommerce:product_sku}} - does not pull through a SKU if it’s a variable product via the Pro Single Product Layout:

You will see from above the Volume dropdown selector is available, as there is another volume attached as a variation to the Product. To note - the other volume (100ml) is NOT ACTIVE in the product to show on the front end.

You can see there is no number showing after “SKU:” even though there is a SKU attached to the 750ml variation - which is active.

An example of a Simple Product shown below where the SKU shows:

Not sure how to approach the SKU scenario for Variable products? Is this a bug?

Thanks
Sam

[ruenel]

Hello Sam,

Thank you for the very detailed post information.

The current SKU, {{dc:woocommerce:product_sku}, dynamic content will only display the product SKU and not the variation SKU.

To display the variation SKU dynamically every time you select from the variation, you need to check this article instead:

Get and display the selected variation SKU in WooCommerce

You need to tweak the code to output the SKU in an element. As an example, add a Text element to your page. Then, assign it a class of var-sku. Next, add the following code in your page’s JS code editor.

jQuery( function($){
    $('form.variations_form').on('show_variation', function( event, data ){
        $( 'div.widget' ).attr( 'sp-sku', data.sku );
        $( '.var-sku' ).html(data.sku);
    });
    $('form.variations_form').on('hide_variation', function(){
        $( 'div.widget' ).attr( 'sp-sku', '' );
    });
});

Please check how that would work in this video:

2021 07 26 00h10 10

The code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[sam_futr]

Thanks @ruenel - This looks to have worked perfectly at my end.