Styling and Limiting Item Tags

ButterMenus gives you full control over how item tags (like Spicy, Vegan, Gluten-Free, etc.) are displayed on your menus.

Limiting Which Tags Appear

If you only want to show specific tags, you can limit them in your plugin settings.

Go to ButterMenus → Settings
Find the “Limit Item Tags” field
Enter a comma-separated list of the tag names you want to display

Example:
Spicy, Vegan, Gluten-Free

Only these tags will appear on your menu items. All others will be hidden.

Styling Individual Tags with CSS

ButterMenus automatically generates a CSS class for each tag based on its name.

The format is:
.butter-menu-item-tag-[tag-name]

Tag names are converted to lowercase
Spaces are replaced with hyphens

Example: Make “Spicy” Tag Red

If you have a tag called Spicy, ButterMenus will generate:

.butter-menu-item-tag-spicy

You can style it like this:

.butter-menu-item-tag-spicy {
color: red;
}

More Examples

.butter-menu-item-tag-vegan {
background-color: #2e7d32;
color: #fff;
}

.butter-menu-item-tag-gluten-free {
background-color: #f4c542;
color: #000;
}

Where to Add CSS

You can add your custom styles in:

Appearance → Customize → Additional CSS
Your theme stylesheet
Or your site’s custom CSS plugin

Pro Tip

Use tag styling to quickly communicate dietary info or highlight popular items—small visual cues can significantly improve menu readability and user experience.

Help & Support