Looking for a quick way to hide product meta in WooCommerce?
This guide will walk you through hiding the product meta on your WooCommerce product pages using a simple custom code snippet.
While invaluable for navigation and organization, there are instances where the presence of product meta can clutter the customer’s view or distract from the streamlined aesthetic some brands strive for.
Whether it’s to achieve a minimalist design, emphasize the product descriptions, or cater to specific marketing strategies, removing or hiding these elements will significantly enhance the visual harmony of a product page.
Understanding Product Meta
Product meta refers to the additional information associated with each product in your WooCommerce store. This can include:
- Categories: Helps classify products into different groups.
- Tags: Offers another way to associate and describe products.
- SKU (Stock Keeping Unit): A unique identifier for each product.
For various reasons, such as design preferences, simplification, or to keep the focus strictly on the product itself, store owners might choose to hide this information from the product pages.
How To Hide Product Meta in WooCommerce
1) Log into your WordPress site and access the Dashboard as the admin user.
2) From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function to hide billing fields if the cart contains a virtual product.
3) Add the following PHP code to the functions.php file of your child theme:
add_action('init', 'custom_remove_woocommerce_product_meta');
function custom_remove_woocommerce_product_meta() {
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
}
Here’s a breakdown of the code:
remove_action(): This WordPress function is used to remove a function attached to a specific action hook. In the context of WooCommerce, action hooks allow you to insert, modify, or remove functionality at specific points without altering core files.'woocommerce_single_product_summary': This is the action hook to which the product meta information is attached. It triggers in the single product summary.'woocommerce_template_single_meta': This is the function that outputs the product meta information on the product page.40: This is the priority at which the function is attached to the specified action hook. WooCommerce hooks can have multiple functions attached, and the priority determines the order in which they are executed.
Note: We wrapped the original code snippet in a function that hooks to init to ensure it executes after WooCommerce has initialized, preventing any potential timing issues.
4) This is the outcome:
After implementing the code, visit a product page on your WooCommerce store to confirm that the product meta information (categories, tags, SKU) is no longer visible. If you still see the product meta, try clearing your website and browser cache.
Why Use the Code Snippet
- If you are new to editing the code on a WordPress site, you may break your site.
- If you have many changes, code snippets tend to be cumbersome to update since some may require an update with every WooCommerce software update. (If the hooks or filters you are using change, the code snippet may no longer work.)
- Code snippets may create vulnerability to your website security since they are from different sources (third-party developers).
- Code snippets are freely available and with no upfront costs.
- Code snippets can be quick to implement for experienced developers who can customize them further.
What is the Alternative Solution
While code snippets do great work and get the job done quickly, they have some drawbacks, and that's the reason plugins exist.
Plugins are ideally organized code snippets that are scalable, dependable, and professionally written to help you keep your site safe and customize it with ease.
To make your work easier, I have put together my 10+ years of experience into a highly useful WooCommerce product (Whideit) that is geared toward hiding all unwanted elements on your store without wasting time.
- Using Hideit is easy, and you can simply click a button to immediately disable the Add to Cart button along with the price and several other features you may want to hide from users.
- I specifically designed it to help with my day-to-day work on client projects. I found it very useful and decided to share it with the WooCommerce community.
- If you are interested, you can find it here. As one of my blog readers, do not forget to subscribe to my mailing list using the form below so that you can CLAIM your 20% OFF introductory discount for WHIDEIT.
- I also occasionally send important updates in WooCommerce to help you update or keep your site up and running effectively and safely. You can also reach out if you need any further customization or help with hiding any feature on your WooCommerce store.
Conclusion
Hiding the product meta in WooCommerce can be a strategic decision to simplify product pages and keep your customers focused on what matters most—the product itself. By following the steps outlined in this guide, you can achieve a cleaner look for your product pages without needing to edit core files directly, preserving your changes through updates.
Always remember to make changes in a child theme or through a site-specific plugin to ensure that your customizations are not lost during theme updates.
We hope this post helped you to customize your WooCommerce store.