WordPress Woocommerce How To Add Tag To Menu Sidebar

WordPress WooCommerce: How to Add Product Tags to Your Menu Sidebar (Beginner’s Guide)

Want to make it easier for customers to find specific products in your WooCommerce store? Adding product tags to your menu sidebar is a fantastic way to do just that! Think of tags like labels that categorize your products, helping shoppers narrow down their search based on specific attributes. This article will guide you step-by-step on how to achieve this, even if you’re a complete WordPress newbie.

Why Add Product Tags to Your Sidebar?

Imagine you’re running an online clothing store. You sell everything from t-shirts to jeans to hats. A customer wants to find a “vintage-style” hat. If you’ve tagged your hats appropriately with “vintage,” “retro,” or “old-school,” they can easily find what they’re looking for by clicking on that tag in your sidebar.

Here’s why this is beneficial:

• Improved User Experience: Customers can quickly find what they need, leading to higher satisfaction and potentially more sales.
• Enhanced Navigation: Makes your store easier to navigate, reducing bounce rates and encouraging exploration.
• Better SEO: Product tags help search engines understand what your products are about, potentially improving your search rankings.
• Increased Product Visibility: Highlights specific product features, making them more discoverable.

Step-by-Step Guide to Adding Product Tags to Your Menu Sidebar

We’ll be using the built-in WordPress Widgets functionality. It’s the easiest and most common method.

1. Tag Your Products (If You Haven’t Already!)

Before you can add tags to your sidebar, you need to *actually tag your products*!

• Go to Products > All Products in your WordPress admin dashboard.
• Hover over the product you want to tag and click “Edit.”
• Scroll down to the “Product tags” box on the right-hand side.
• Type in your desired tag (e.g., “cotton,” “summer,” “striped”) and press “Add” or select from existing tags.
• Update the product.
• Repeat for all your products.

Example: If you’re selling a blue cotton t-shirt, you might use the tags “blue,” “cotton,” and “t-shirt.” For a pair of ripped jeans, you might use “ripped,” “jeans,” “denim,” and “casual.”

2. Access the Widgets Section

This is where you’ll add the tag cloud to your sidebar.

• In your WordPress admin dashboard, go to Appearance > Widgets.

3. Find the “Product tags” Widget

• Look for the widget labeled “Product tags Cloud” in the available widgets list. If you are using woocommerce version that does not come with product tags cloud, skip to step 4a

4. Add the “Product Tags Cloud” Widget to Your Sidebar

• Drag and drop the “Product tags Cloud” widget into the sidebar where you want it to appear. The most common sidebars are usually labelled “Sidebar”
• Or you can click on “Product tags Cloud”, then select the sidebar and click “Add Widget”

5. Configure the Widget (Optional)

• Once the widget is in the sidebar, you can customize it:
• Title: Change the title that appears above the tag cloud (e.g., “Shop by Tag,” “Popular Tags”).
• Display as: Choose “List” to display tags as a simple list, or “Cloud” to show them in a tag cloud format (with tag sizes varying based on popularity).
• Order by: Choose how the tags should be ordered (name or count).
• Order: Choose ascending or descending order.
• Number of tags to show: Specify how many tags you want to display.
• Click “Save” to save your changes.

4a. Alternative if Product tags Cloud is not available: Add the “Text” Widget and Custom Code

Some older WooCommerce setups may not have a readily available “Product tags Cloud” widget. In this case, you can use a “Text” widget and a bit of PHP code.

• Find the “Text” Widget: Drag and drop the “Text” widget into your desired sidebar.
• Add the PHP Code: Paste the following code into the “Text” widget content area:

 'product_tag',
'orderby' => 'name',
'order' => 'ASC'
);

$tags = get_terms( $args );

if ( $tags ) {

echo ‘

Shop by Tag

‘; // Customizable title

echo ‘

‘;

foreach ( $tags as $tag ) {

echo ‘

• ‘ . $tag->name . ‘

‘;

}

echo ‘

‘;

}

?>

• Important: If you are not using a child theme, it’s strongly recommended that you use a plugin that allows PHP code to be placed within widgets like “Code Snippets” or similar. Directly adding PHP code to the text widget in a parent theme can be overwritten on theme updates.
• Customization (optional):
• Change `’
  

  Shop by Tag

  ‘` to your desired title.

• You can adjust the `$args` array to change the order (e.g., `’orderby’ => ‘count’` for most popular) or the order direction.
• Click “Save”.

6. Check Your Website!

Visit your website and check your sidebar. You should now see your product tags displayed! Clicking on a tag should take you to an archive page listing all products with that tag.

Real-World Examples

• Electronics Store: Tags like “headphones,” “speakers,” “bluetooth,” “noise-canceling.”
• Bookstore: Tags like “fiction,” “mystery,” “thriller,” “biography.”
• Food Store: Tags like “organic,” “gluten-free,” “vegan,” “spicy.”

Troubleshooting

• Tags Not Showing: Double-check that you’ve actually assigned tags to your products. Make sure the tags are spelled correctly in your WordPress admin. Ensure the “ tags are correctly placed.
• Tags Not Linking: Verify that your permalinks are set up correctly (Settings > Permalinks in your WordPress admin). The “Post name” setting is generally recommended.
• Styling Issues: The appearance of the tags will depend on your theme’s CSS. You may need to add custom CSS to style them to match your website design.

Conclusion

Adding product tags to your WooCommerce menu sidebar is a simple yet effective way to improve your store’s navigation and user experience. By categorizing your products with relevant tags, you’ll make it easier for customers to find what they’re looking for, leading to increased sales and customer satisfaction. Happy tagging!