[How To:] Move WooCommerce Meta Info, SKU and Tags into Product Description

Business Website Design Company RI

If you’re using WooCommerce for your e-commerce website, you may have noticed that the meta information, SKU, and tags are displayed separately from the product description. This can be inconvenient for customers who want to see all the product information in one place. Fortunately, with a bit of code, you can easily move these details into the product description tab.

The first step is to remove the default display of the meta information, SKU, and tags. You can do this using the remove_action() function. Here’s the code to remove these elements from the default position:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

Once you’ve removed these elements, you can add them to the product description tab using the woocommerce_product_tabs filter. This filter allows you to modify the default product tabs and add your own custom tabs.

Here’s an example of how you can use this filter to move the meta information, SKU, and tags into the product description tab:

add_filter( 'woocommerce_product_tabs', 'woocommerce_custom_product_tabs', 999 );

function woocommerce_custom_product_tabs( $tabs ) {
    // We overwrite the callback function with a custom one
    $tabs['description']['callback'] = 'woocommerce_product_meta_and_description_tab';

    // (optional) We can also overwrite the title
    $tabs['description']['title'] = __('Meta and description', 'woocommerce');

    return $tabs;
}

function woocommerce_product_meta_and_description_tab() {
    wc_get_template( 'single-product/tabs/description.php' );
	wc_get_template( 'single-product/meta.php' );

}

Add both codes together into your functions.php file and it will move your WooCommerce meta items (SKU, Tags, Description) under your product description.

In the code above, we’re overwriting the callback function for the product description tab with a custom function that will display both the meta information and the product description. We’re also updating the title of the product description tab to reflect the new content.

Finally, in the woocommerce_product_meta_and_description_tab() function, we’re using the wc_get_template() function to display the meta information and the product description in the correct order.

Once you’ve added this code to your website, the meta information, SKU, and tags will be displayed in the product description tab. This can make it easier for your customers to view all the product details in one place, which can lead to more conversions and sales.

In conclusion, if you want to move the meta information, SKU, and tags into the product description tab in WooCommerce, you can use the remove_action() function to remove these elements from their default position, and then use the woocommerce_product_tabs filter to add them to the product description tab. With a bit of code, you can create a more user-friendly e-commerce experience for your customers.

If you need help editing your WooCommerce store, feel free to contact us for a free quote. We can work hourly (billing to the minute) or put together a Monthly Maintenance Plan to edit your website at a more reasonable cost.



Tags: add_filter(), custom product tabs, meta information, product description, remove_action(), SKU, tags, wc_get_template(), woocommerce, woocommerce agency, woocommerce company, woocommerce customization company, woocommerce help, woocommerce repair, wordpress repair