Search code examples
phpjquerywordpresswoocommercetaxonomy-terms

Add product categories to WooCommerce product additional information


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?


Solution

  • 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.