Do you want to hide the SKU, Category, and Tags on the product page of your WooCommerce store?
This tutorial will be overriding the single product meta template and delete the product summary on the product page using a custom PHP script.
WooCommerce hide SKUs, Category, and Tags on the Product Page
If you are an experienced user, WooCommerce is your best bet. This is because the most significant benefit you will get is the flexibility, scalability, and cost savings.
In this tutorial, you will see how WooCommerce is flexible for customization.
For this tutorial, I recommend that you create a child theme.
When you create one, I recommend creating a functions.php within that child theme as well. This ensures that no changes you make will be lost during an update.
It is very easy to add the product SKU, Category, and tags, as shown below:
This is how they will appear on the product page:
Hiding the SKU, Category, and Tags on the Product Page
If you are a WordPress developer, you would think there is a specific WooCommerce filter for this. However, there is no filter for this.
This means that we have to remove the whole “product meta” block. Additionally, you can add back the information you want, for example, the categories.
If you are not a developer, copy-paste the snippet into your functions.php and observe the changes.
Here are the steps that you need to follow:
- Log into your WordPress site and access the Dashboard as the admin user.
- From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to hide the SKU, Category, and tags on the product page.
- Add the following code to the functions.php file:
/** * Hide SKU, Cats, Tags @ Single Product Page - WooCommerce */ remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
However, you might want to add this feature again. All you need to do is add the following code snippet to the functions.php file:
Steps to Show SKU, Category, and Tags Again
- Log into your WordPress site and access the Dashboard as the admin user.
- From the Dashboard menu, click on Appearance Menu > Theme Editor Menu.
- When the Theme Editor page is opened, look for the theme functions file to add the function to show SKU again.
- Add the following code to the functions.php file:
/** * Show SKU Again @ Single Product Page - WooCommerce */ add_action( 'woocommerce_single_product_summary', 'njengah_show_sku_again_single_product', 40 ); function njengah_show_sku_again_single_product() { global $product; ?> <div class="product_meta"> <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?> <span class="sku_wrapper"><?php esc_html_e( 'SKU:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></span></span> <?php endif; ?> </div> <?php }
- To add the Category, add the following code in the functions.php file:
/** * Show Categories Again @ Single Product Page - WooCommerce */ add_action( 'woocommerce_single_product_summary', 'njengah_show_cats_again_single_product', 40 ); function njengah_show_cats_again_single_product() { global $product; ?> <div class="product_meta"> <?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( 'Category:', 'Categories:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?> </div> <?php }
- To show tags again, add the following code in the functions.php file:
/** * Show Tags Again @ Single Product Page - WooCommerce */ add_action( 'woocommerce_single_product_summary', 'njengah_show_tags_again_single_product', 40 ); function njengah_show_tags_again_single_product() { global $product; ?> <div class="product_meta"> <?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?> </div> <?php }
Conclusion
This post shares how you can hide the product meta on the product page.
The product meta consists of SKU, Category, and Tag. Moreover, I have shared how you can display them again using PHP code.
However, if you are not familiar with handling code, please contact a developer so that you do not break down your site.
Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.
Similar Articles
- How to Setup Storefront Stock Quantity & Manage Inventory
- How to Customize Storefront Theme Using Customizer
- How to Create Custom Widget Area in WordPress Step by Step
- How to Hide Shipping Rates if Free Shipping Available WooCommerce
- How to Redirect User If Not Logged in WordPress » Page Redirect
- How to Move Primary Menu Storefront WooCommerce
- How to Change Storefront Theme Order of Products
- How to Change Proceed To Checkout Text In WooCommerce
- How to Turn off Next Product Tabs In WooCommerce Storefront
- How to Remove, Rename and Add Storefront Sorting Options
- How to Hide Mobile Footer From Storefront WooCommerce
- How to Hide Product Prices Based on User Role Storefront
- How to Customize Storefront Checkout Page
- How to Hide Additional Information Tab In WooCommerce
- How to Hide Tags In Storefront Theme WooCommerce
- How to Change Storefront Theme Product Page Tabs Colors
- How to Remove Related Products WooCommerce Storefront Theme
- WooCommerce Redirect Users After Registration by Roles
- How to Remove Cart Page WooCommerce Storefront Theme
- How to Logout without Confirmation WooCommerce : How to Remove “Are you sure you want to log out?”