How to Add Product Attributes and Custom Filters to Your WooCommerce Restaurant Menu (Step by Step)

Why Product Attributes Matter for Restaurant Menus Online

Picture a customer landing on your restaurant’s online menu at 7 PM, hungry and impatient. They’re gluten-free, they want something spicy, and they only have time for a quick pickup. If your menu is a flat, scrollable wall of items with no way to narrow things down, you’ve already lost them. Product attributes solve this problem by turning your menu into a structured, filterable catalog that respects your customers’ time and dietary needs.

WooCommerce product attributes — things like spice level, cuisine type, allergens, protein type, and portion size — attach structured metadata to each menu item. This is fundamentally different from categories. Categories group items broadly (Appetizers, Mains, Desserts), while attributes describe the characteristics of each item. A single dish can belong to one category but carry five or six attributes simultaneously.

This structured approach does three measurable things for your restaurant. First, it reduces support questions — when customers can see allergen and dietary info at a glance, you get fewer phone calls and chat messages asking “Does the pad thai have peanuts?” Second, it improves conversion rates. Baymard Institute’s e-commerce UX research consistently shows that sites with well-implemented filtering see higher task completion rates, because users find what they want faster. Third, structured attribute data is better for SEO. Search engines can parse attribute-based product data more effectively than freeform descriptions, especially when combined with schema markup.

If you’re running your restaurant ordering through a WooCommerce restaurant plugin like FoodMaster, you already have the WooCommerce product infrastructure in place. Adding attributes on top of that is a natural extension that makes your menu dramatically more usable.

How to Create Custom Product Attributes in WooCommerce for Food Items

Let’s get hands-on. WooCommerce supports two types of attributes: global attributes (reusable across all products) and custom attributes (specific to a single product). For a <a href="https://www.wpslash.com/how-to-create-a-restaurant-menu-with-vegan-gluten-free-and-dietary-filters-in-wordpress-2025/" title="How to Create a <a href="https://www.wpslash.com/how-to-build-a-smart-allergen-filter-and-nutritional-calculator-for-your-woocommerce-restaurant-menu/" title="How to Build a Smart Allergen Filter and Nutritional Calculator for Your <a href="https://www.wpslash.com/how-to-optimize-your-woocommerce-restaurant-website-for-seo-local-search-schema-markup-for-menus-google-business-profile-integration-and-ranking-strategies-to-drive-more-online-orders-complete-gu/" title="How to Optimize Your WooCommerce Restaurant Website for SEO: Local Search, Schema Markup for Menus, Google Business Profile Integration, and Ranking Strategies to Drive More Online Orders (Complete Guide)”>WooCommerce Restaurant Menu”>Restaurant Menu With Vegan, Gluten-Free, and Dietary Filters in WordPress (2025)”>restaurant menu, you almost always want global attributes because you’ll apply the same attribute types across dozens or hundreds of items.

Step 1: Define Your Attribute Taxonomy

Before touching WordPress, plan your attributes on paper or in a spreadsheet. Here’s a solid starting set for most restaurants:

• Cuisine Type — Italian, Mexican, Thai, Japanese, American, etc.
• Spice Level — Mild, Medium, Hot, Extra Hot
• Protein — Chicken, Beef, Pork, Fish, Shrimp, Tofu, None
• Allergens — Gluten, Dairy, Nuts, Soy, Shellfish, Eggs
• Dietary — Vegan, Vegetarian, Keto, Halal, Kosher, Gluten-Free
• Meal Type — Breakfast, Lunch, Dinner, Snack
• Portion Size — Small, Regular, Large, Family

Step 2: Create Global Attributes in WooCommerce

Navigate to Products → Attributes in your WordPress dashboard. In the “Add new attribute” form on the left side, enter the attribute name (e.g., “Spice Level”) and the slug will auto-generate as spice-level. Set “Default sort order” to “Custom ordering” so you can arrange terms logically (Mild before Hot, not alphabetically). Click “Add attribute.”

Next, click “Configure terms” for the attribute you just created. Add each term one by one — Mild, Medium, Hot, Extra Hot. Repeat this process for every attribute in your taxonomy.

Step 3: Assign Attributes to Menu Items

Open any product (menu item) and scroll to the Product data section. Click the Attributes tab. From the dropdown, select your global attribute (e.g., “Allergens”), click “Add,” then check the relevant terms (e.g., Gluten, Dairy). Make sure you tick the “Visible on the product page” checkbox so customers can see this information. Hit “Save attributes,” then update the product.

[IMAGE: Screenshot of the WooCommerce product attributes tab showing allergen and spice level attributes being assigned to a menu item with visible checkboxes enabled]

Naming Conventions and Consistency Tips

Consistency is everything when you have 80+ menu items. A few rules that will save you headaches:

• Use singular nouns for attribute names: “Protein” not “Proteins.”
• Capitalize terms consistently: “Gluten-Free” everywhere, never “gluten free” or “GF.”
• Avoid overlapping attributes. Don’t create both a “Diet” and a “Dietary” attribute — pick one.
• Keep term lists under 10-12 items per attribute. If you have more, consider splitting into two attributes.
• Use WooCommerce’s bulk edit feature (Products → All Products → Bulk Actions) to apply attributes across multiple items simultaneously.

Setting Up Layered Navigation and Ajax Filtering So Customers Can Filter Your Menu

Attributes are useless without a way for customers to actually filter by them. WooCommerce ships with a basic filtering tool, but you’ll likely want something more sophisticated for a restaurant menu.

WooCommerce’s Built-In Layered Navigation

Go to Appearance → Widgets (or use the block editor if your theme supports it). Add the “Filter Products by Attribute” widget to your shop sidebar. Select the attribute you want to filter by (e.g., “Dietary”), choose the display type (dropdown or list), and set the query type to “AND” or “OR” depending on whether you want customers to combine filters or use them independently.

This works, but it has limitations. Each filter selection triggers a full page reload, which feels clunky on mobile. You also can’t easily combine multiple attribute filters in a visually clean way.

Ajax-Powered Filtering for a Smoother Experience

For a real-time filtering experience where results update instantly without page reloads, you need an Ajax filtering solution. Several WordPress plugins handle this well — FacetWP, JetSmartFilters, and FLAVOR are among the more popular options. These plugins read your WooCommerce attributes and render interactive filter panels with checkboxes, sliders, color swatches, or dropdown menus.

The key differences between these solutions come down to complexity and price. FacetWP is developer-friendly with deep customization hooks but costs $99+/year. JetSmartFilters integrates tightly with Elementor. For most restaurant sites, the deciding factor should be how well the filter plugin plays with your ordering system.

If you’re using FoodMaster for your WooCommerce restaurant ordering, your menu items are already standard WooCommerce products — which means any attribute filtering plugin that works with WooCommerce will work seamlessly with your menu. This is one of the major advantages of building on WooCommerce rather than a proprietary platform: the entire plugin ecosystem is at your disposal.

Which Approach Fits Your Restaurant?

• Small menu (under 30 items): WooCommerce’s built-in widget filters are probably sufficient. Customers can scan the full menu quickly anyway.
• Medium menu (30-80 items): Add a lightweight Ajax filter plugin. Customers need to narrow results, and page reloads will frustrate them.
• Large or multi-cuisine menu (80+ items): Invest in a robust solution like FacetWP with multiple filter groups, search-within-filters, and saved filter states.

Combining Attributes With Dietary Labels: Vegan, Keto, Halal, and Allergen Badges

Filtering helps customers find the right items. Visual badges help them confirm at a glance. The goal is to display small icons or labels directly on your menu grid — a green leaf for vegan, a flame for spicy, a wheat-crossed symbol for gluten-free.

Approach 1: Lightweight Code Snippet

If you’re comfortable adding a small PHP snippet to your theme’s functions.php file (or better, via a code snippets plugin), you can hook into WooCommerce’s product loop and read attribute values:

The logic is straightforward: check if a product has the “Dietary” attribute, loop through its terms, and output a CSS-styled span or icon for each matching term. Use dashicons, Font Awesome icons, or simple emoji characters (🌿 for vegan, 🔥 for spicy, ⚠️ for allergens) to keep things lightweight.

Hook into woocommerce_before_shop_loop_item_title or woocommerce_after_shop_loop_item_title depending on where you want badges to appear. Style them with CSS — small rounded pills with background colors work well: green for vegan, red for spicy, yellow for allergen warnings.

Approach 2: Badge Plugins

Plugins like JEEP Product Badges for WooCommerce or Product Labels for WooCommerce let you create conditional badges without code. You set rules like “If attribute ‘Dietary’ contains ‘Vegan,’ show this badge image.” These plugins typically support both text badges and image/icon badges, with control over positioning and size.

Whichever approach you choose, keep badges small and limited to 2-3 per item. A menu item plastered with eight badges becomes visual noise. Prioritize the most actionable labels — allergens and primary dietary classifications matter most to customers making ordering decisions.

[IMAGE: Restaurant menu grid showing food items with small colored dietary badges (vegan leaf icon, spicy flame icon, gluten-free badge) displayed beneath each product name]

Making Filtered Menus Mobile-Friendly and Fast-Loading

Here’s a stat that should guide every decision you make: according to multiple restaurant industry reports, 60-70% of online food orders come from mobile devices. If your filter system doesn’t work beautifully on a phone screen, it’s failing the majority of your customers.

Mobile UX Patterns for Filters

Sidebar filters — the standard desktop approach — are terrible on mobile. They either push content down or take up half the screen. Instead, implement one of these proven mobile patterns:

• Collapsible filter drawer: A “Filter” button at the top of the menu that slides open a full-screen or half-screen overlay with all filter options. Customers make selections, tap “Apply,” and the drawer closes.
• Horizontal filter chips: A scrollable row of pill-shaped buttons at the top of the menu (think: “Vegan” “Spicy” “Gluten-Free” “Chicken”). Tapping a chip toggles it on/off and results update via Ajax. This works brilliantly for restaurants with a moderate number of filter terms.
• Sticky filter bar: A thin bar that stays fixed at the top of the viewport as customers scroll, showing active filters and a “Modify” button.

Most Ajax filtering plugins support these patterns either natively or through their template/layout settings. Test on actual phones — not just browser dev tools — because touch targets, scroll behavior, and rendering performance can differ significantly.

Performance Optimization

Every filter interaction triggers a database query. With a 200-item menu and six filterable attributes, poorly optimized queries can slow your site noticeably. Here’s how to keep things fast:

• Enable object caching: Use Redis or Memcached to cache repeated query results. Most managed WordPress hosts (Cloudways, Kinsta, WP Engine) offer this.
• Index your attribute tables: WooCommerce stores attribute data in the wp_term_relationships and wp_term_taxonomy tables. Ensure these have proper database indexes (most hosts handle this, but check if you’re on shared hosting).
• Lazy load filtered results: Load 12-20 items initially and add a “Load more” button or infinite scroll rather than dumping 100+ items at once.
• Optimize images: Each menu item thumbnail should be properly sized (not a 2000px image scaled down to 300px in CSS) and served in WebP format. Use a plugin like ShortPixel or Imagify.
• Minimize JavaScript: Some filtering plugins load heavy JS libraries. Test your page with and without the filter plugin using Google PageSpeed Insights and check the Total Blocking Time metric.

Real-World Examples and Best Practices for Restaurant Menu Attributes

Different restaurant types need different attribute structures. Here are four practical examples showing how to tailor your approach.

Example 1: Pizza Shop

A pizza shop has a relatively simple menu but high customization needs. Key attributes: Size (Personal, Medium, Large, Family), Crust Type (Thin, Hand-Tossed, Deep Dish, Stuffed), Dietary (Gluten-Free Crust Available, Vegan Cheese Available). Filtering is less critical here because the menu is small — instead, focus on using attributes to display clear options on individual product pages.

Example 2: Sushi Restaurant

Sushi menus can easily hit 60-100 items. Useful attributes: Type (Nigiri, Maki, Sashimi, Temaki, Special Roll), Fish (Salmon, Tuna, Yellowtail, Eel, Crab), Preparation (Raw, Cooked, Tempura), Allergens (Shellfish, Soy, Sesame). The “Preparation: Cooked” filter is particularly valuable — many customers want sushi but avoid raw fish, and this single filter dramatically improves their experience.

Example 3: Meal Prep / Health Food Service

These businesses live and die by dietary filtering. Essential attributes: Dietary (Keto, Paleo, Vegan, Whole30, High-Protein), Calories (Under 400, 400-600, 600+), Protein Grams (20g+, 30g+, 40g+), Meal Type (Breakfast, Lunch, Dinner, Snack). Consider using range sliders for numerical attributes like calories — most Ajax filtering plugins support this.

Example 4: Multi-Cuisine Restaurant

This is where attributes become essential. A restaurant serving Italian, Thai, and Mexican food under one roof needs: Cuisine (Italian, Thai, Mexican), Spice Level (Mild, Medium, Hot), Protein (Chicken, Beef, Seafood, Vegetarian), Meal Type (Appetizer, Main, Side, Dessert). Without filters, a customer wanting “spicy Thai chicken dishes” would have to scroll through the entire menu. With three quick filter clicks, they see exactly what they want.

For multi-cuisine setups, a plugin like FoodMaster is particularly well-suited because it handles the complete ordering workflow — delivery, pickup, dine-in, and even QR table ordering — while your WooCommerce attributes handle the menu filtering layer on top.

Quick-Reference: Recommended Attributes by Restaurant Type

Common Mistakes to Avoid

• Over-filtering: If you have 25 menu items, you don’t need six filterable attributes. Two or three will do. Filters should reduce cognitive load, not add it.
• Too many terms per attribute: An “Allergens” attribute with 20 terms becomes unwieldy. Stick to the major 8 allergens recognized by FDA labeling requirements (milk, eggs, fish, shellfish, tree nuts, peanuts, wheat, soybeans).
• Inconsistent data entry: If half your menu items are missing the “Dietary” attribute, customers will filter for “Vegan” and miss items that are vegan but weren’t tagged. Audit your attribute coverage regularly.
• Ignoring the “no results” state: When a filter combination returns zero items, show a helpful message (“No items match your filters — try removing one”) instead of a blank page.
• Not testing