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