Add product categories to WooCommerce product additional information

Question

I use this great script to display the WooCommerce product SKU in the additional information tab on a single product page, though I would also like to display the product category. Any idea how to add this to the script?

At the moment the SKU is placed at the bottom (last row) of the additional information table. Any idea how to add it to the top (first row) of the table?

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);

Answer 1

You can use the following revised code that will display also product category(ies):

add_filter('woocommerce_display_product_attributes', 'display_product_attributes', 10, 2);
function display_product_attributes( $product_attributes, $product ) {
    // Simple product
    if ( $product->is_type('simple') ) {
        $get_sku = ( $sku = $product->get_sku() ) ? $sku : esc_html__('N/A', 'woocommerce'); // Get product SKU

        // Add Row
        $product_attributes[ 'sku-field sku-field-single' ] = array(
            'label' => __('SKU', 'woocommerce'),
            'value' => $get_sku,
        );

    } 
    // Variable product
    elseif ( $product->is_type('variable') ) {
        // Loop through variation Ids
        foreach ( $product->get_children() as $variation_id ) {
            $variation = wc_get_product( $variation_id ); // Get the product variation object
            $get_sku   = ( $sku = $variation->get_sku() ) ? $sku : esc_html__('N/A', 'woocommerce'); // Get variation SKU

            // Add Row
            $product_attributes[ 'sku-field sku-field-variable sku-field-variable-' . $variation_id ] = array(
                'label' => __('SKU', 'woocommerce'),
                'value' => $get_sku,
            );
        }
        ?>
        <script>
        jQuery( function($) {
            $('.sku-field-variable').css('display', 'none'); // Hide all rows

            // On Change
            $('input.variation_id').change( function() {
                $('.sku-field-variable').css('display', 'none'); // Hide all rows

                const var_id = $('input.variation_id').val();
                if( var_id != '' ) {
                    // Display current
                    $( '.sku-field-variable-'+var_id ).css( 'display', 'table-row' );
                }
            });    
        });
        </script>
        <?php
    }
    // Categories
    $category_ids = $product->get_category_ids();

    if ( ! empty($category_ids) ) {
        $product_attributes[ 'category-field  category-field-single' ] = array(
            'label' => _n( 'Category', 'Categories', count( $category_ids ), 'woocommerce' ),
            'value' => wc_get_product_category_list( $product->get_id(), ', ', '', '' ),
        );
    }
    return $product_attributes;
}

Code goes in functions.php file of your child theme (or in a plugin). Tested and works.