How to Turn Off “Show Tags” on WooCommerce: A Beginner’s Guide
Are you building an awesome WooCommerce store? You’ve probably added product tags to help customers find what they’re looking for. But sometimes, displaying these tags directly on the product page can clutter the design or just not fit the aesthetic you’re going for. Don’t worry, you can easily turn off the “show tags” display! This guide will walk you through a few simple methods.
Think of it like this: Imagine you’re selling handmade candles. You might tag a candle with “lavender,” “soy wax,” and “relaxation.” These tags are useful for filtering and internal organization. However, if you have a very minimalist product page design, showing those tags under every candle description might distract from the clean, modern look. That’s where knowing how to hide them comes in handy.
Why Turn Off Product Tags Display?
Before we jump into the “how,” let’s briefly recap why you might want to hide those tags:
- Clean Design: A cleaner product page can improve the user experience and highlight your product’s key features and benefits.
- Aesthetic Consistency: Sometimes, the default tag display doesn’t mesh well with your theme’s design. Hiding them allows for a more visually consistent store.
- Reduce Clutter: Too much information can overwhelm customers. Removing tags can simplify the page and direct attention to the price, add to cart button, and product description.
- You Handle Navigation Differently: You might be relying on categories and custom filters instead of tags for navigation. In this case, displaying the tags is redundant.
- `.product_meta .tagged_as` : This targets the specific HTML element that displays the product tags. We’re telling the browser we want to target any element with the class `tagged_as` that is inside an element with the class `product_meta`. Inspect your site if unsure.
- `display: none;` : This property tells the browser *not* to display the targeted element.
Method 1: Using Custom CSS (The Quickest Fix for Most Themes)
This is often the easiest and fastest method. We’ll use CSS (Cascading Style Sheets) to tell the browser to *not* display the product tags on the product page.
1. Access Your Theme’s Customizer: Go to your WordPress dashboard, then navigate to Appearance > Customize. This will open the WordPress Customizer.
2. Find the “Additional CSS” Section: Look for a section called “Additional CSS,” “Custom CSS,” or something similar. It’s usually at the bottom of the customization options.
3. Add the CSS Code: Paste the following CSS code into the text area:
.product_meta .tagged_as {
display: none;
}
Explanation:
4. Publish Your Changes: Click the “Publish” button at the top of the Customizer to save your changes and make them live on your website.
That’s it! Refresh your product page, and the product tags should be gone.
Method 2: Editing Your Theme’s `functions.php` File (More Technical, But More Control)
This method involves adding a small code snippet to your theme’s `functions.php` file. Important: Always create a child theme before making changes to your theme’s files. This ensures that your changes won’t be overwritten when the theme is updated.
1. Create a Child Theme (Highly Recommended): If you don’t already have one, create a child theme for your current WordPress theme. There are plugins that can help you with this, or you can create one manually. This is crucial to avoid losing your customizations when your theme is updated.
2. Access Your Theme’s `functions.php` File: You can access this file either through your web hosting control panel (usually using a file manager) or by using an FTP client. The file is located in your child theme’s directory (e.g., `/wp-content/themes/your-child-theme/functions.php`).
3. Add the Code Snippet: Add the following PHP code snippet to the `functions.php` file:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
Explanation:
- `remove_action()`: This function removes an action that is already hooked into WordPress.
- `’woocommerce_single_product_summary’`: This is the hook where the product meta (including tags) is displayed on the single product page.
- `’woocommerce_template_single_meta’`: This is the function responsible for displaying the product meta (including tags).
- `40`: This is the priority of the action.
4. Save Your Changes: Save the changes to the `functions.php` file.
Refresh your product page, and the product tags should be gone.
Method 3: Using a Plugin (The Easiest, No-Code Option)
If you’re not comfortable with code, you can use a plugin to manage your WooCommerce product page elements. There are several plugins that allow you to customize the display of product elements, including tags.
1. Install and Activate a WooCommerce Customization Plugin: Search for plugins like “WooCommerce Product Page Customizer,” “Storefront Powerpack” (if you’re using the Storefront theme), or similar. Install and activate the plugin.
2. Configure the Plugin: The plugin will typically add a new section to your WordPress dashboard or within the WooCommerce settings. Follow the plugin’s instructions to hide the product tags. This usually involves selecting an option or checking a box to disable their display.
3. Save Your Changes: Save the plugin’s settings.
Remember to choose a reputable plugin with good reviews and active support.
Choosing the Right Method
- Custom CSS: Best for quick and simple adjustments to the appearance of the tags. Easy to undo.
- `functions.php` Edit: Provides more control and is better for permanently removing the tag display. Requires more technical knowledge and a child theme.
- Plugin: Easiest option for non-technical users. Can provide a wider range of customization options.
No matter which method you choose, be sure to test your changes thoroughly to ensure that your product pages are displaying correctly and providing the best possible experience for your customers. Good luck!
