Search code examples
phpjquerywordpresswoocommercehook-woocommerce

Display SKU on the 'additional information area' for single and variable products


I'm trying to display the product's SKU inside the table row of single products Additional Information tab.

I tried using the woocommerce_display_product_attributes filter and have it displayed (sample of my code below) but it only works with simple product.

When using variable products with different SKU, the field are not updated when (dropdown select) variation is selected and only show blank. Is there a proper way to do this?

Here's my current code:

// Displays SKU/Part# to Single product Additional information table rows
add_filter('woocommerce_display_product_attributes', 'wc_display_sku_additional_info_table', 10, 2);
function wc_display_sku_additional_info_table( $product_attributes, $product ){
    // Get product SKU
    $get_sku = ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' );

    $product_attributes[] = [
        'label' => __('SKU', 'woocommerce'),
        'value' => $get_sku,
    ];
    return $product_attributes;
}

Solution

  • This should suffice, comment with explanation added to my code

    • For both single and variable products, a SKU table row is added to the additional information tab.
    • SKU table row is updated accordingly with the dropdown select menu for variable products
    function display_product_attributes( $product_attributes, $product ) {
        // Simple product
        if ( $product->is_type('simple' ) ) {
            // Get product SKU
            $get_sku = ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' );
    
            // Add
            $product_attributes[ 'sku-field sku-field-single' ] = array(
                'label' => __('SKU', 'woocommerce'),
                'value' => $get_sku,
            );
    
        } 
        // Variable product
        elseif ( $product->is_type('variable' ) ) {
            // Get childIDs in an array
            $children_ids = $product->get_children();
    
            // Loop
            foreach ( $children_ids as $child_id ) {
                // Get product
                $product = wc_get_product( $child_id ); 
    
                // Get product SKU
                $get_sku = ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' );
    
                // Add
                $product_attributes[ 'sku-field sku-field-variable sku-field-variable-' . $child_id ] = array(
                    'label' => __('SKU', 'woocommerce'),
                    'value' => $get_sku,
                );
            }
            ?>
            <script>
            jQuery(document).ready(function($) {
                // Hide all rows
                $( '.sku-field-variable' ).css( 'display', 'none' );
    
                // Change
                $( 'input.variation_id' ).change( function() {
                    // Hide all rows
                    $( '.sku-field-variable' ).css( 'display', 'none' );
    
                    if( $( 'input.variation_id' ).val() != '' ) {
                        var var_id = $( 'input.variation_id' ).val();
    
                        // Display current
                        $( '.sku-field-variable-' + var_id ).css( 'display', 'table-row' );
                    }
                });    
            });
            </script>
            <?php
        }
    
        return $product_attributes;
    }
    add_filter('woocommerce_display_product_attributes', 'display_product_attributes', 10, 2);