How to Build a Custom Restaurant Menu with Allergen Filters, Nutritional Info, and Dietary Labels in WooCommerce: Vegan, Gluten-Free, Keto, and Halal Tags for a Better Customer Experience (Complete Guide)

Why Allergen Information and Dietary Labels Matter for Your Restaurant Website

A customer with a severe peanut allergy lands on your restaurant’s online menu. There’s no allergen information anywhere. They leave — and they’re never coming back. That lost sale is just the tip of the iceberg. Without clear dietary labeling, you’re losing revenue, risking legal trouble, and missing out on a massive segment of health-conscious diners actively searching for restaurants that cater to their needs.

The legal landscape around allergen disclosure is increasingly strict. In the United States, the FDA requires that major food allergens (milk, eggs, fish, shellfish, tree nuts, peanuts, wheat, soybeans, and sesame) be clearly identified on packaged food labels. While restaurant websites aren’t held to the exact same labeling standards as packaged goods, many states have adopted their own allergen disclosure requirements for food service establishments. The EU’s Food Information for Consumers Regulation (EU FIC 1169/2011) goes further, mandating that all 14 major allergens be communicated to customers at the point of sale — including online ordering.

Beyond compliance, consumer demand for dietary transparency is surging. A 2023 survey by the International Food Information Council found that 52% of Americans follow a specific diet or eating pattern. The plant-based food market alone is projected to reach $162 billion globally by 2030, according to Bloomberg Intelligence. Keto, halal, and gluten-free diners are all actively searching for restaurants that serve their needs — and they’re using Google to find them.

This is where the SEO angle becomes compelling. Search queries like “gluten-free restaurant near me,” “vegan delivery options,” and “halal food order online” have significant monthly search volumes. By structuring your menu with proper dietary labels and dedicated category pages, you’re creating indexable content that matches these high-intent queries. Clear allergen labeling also reduces order errors, minimizes liability exposure, and builds the kind of trust that turns first-time visitors into repeat customers.

Setting Up Custom Product Attributes and Taxonomies for Dietary Tags in WooCommerce

WooCommerce treats every menu item as a product, which means you have access to its full attribute and taxonomy system. The first step is creating a structured set of dietary attributes that you can assign to each dish on your menu.

Creating Dietary Attributes

Navigate to Products → Attributes in your WordPress dashboard. Create a new attribute called “Dietary Labels” with the slug dietary-labels. Then add terms for each dietary category you want to support:

• Vegan — No animal products whatsoever
• Vegetarian — No meat or fish, may contain dairy/eggs
• Gluten-Free — Free from wheat, barley, rye, and their derivatives
• Keto — Low-carb, high-fat compatible
• Halal — Prepared according to Islamic dietary law
• Kosher — Prepared according to Jewish dietary law
• Nut-Free — Free from tree nuts and peanuts
• Dairy-Free — Free from milk and milk-derived ingredients

Registering a Separate Allergen Taxonomy

Dietary preferences and allergen warnings serve different purposes, so it’s smart to keep them in separate taxonomies. Create a second attribute called “Allergens” with terms like Contains Nuts, Contains Shellfish, Contains Soy, Contains Eggs, Contains Wheat, Contains Sesame, and Contains Dairy. This separation lets you filter by what a dish is (vegan, keto) independently from what it contains (nuts, shellfish).

Storing Nutritional Data with Custom Fields

For nutritional information — calories, protein, carbohydrates, fat, fiber, sodium — you’ll need custom fields. If you’re using Advanced Custom Fields (ACF), create a field group called “Nutritional Information” and attach it to the Product post type. Add number fields for each macro: Calories, Protein (g), Carbohydrates (g), Fat (g), Fiber (g), and Sodium (mg). You can also add a textarea field for a full ingredient list.

If you’re running your restaurant menu through FoodMaster (formerly WooFood), you already have a structured product system designed specifically for food items. FoodMaster’s product fields and category system integrate directly with WooCommerce, so the dietary attributes and custom fields you create will work seamlessly alongside its menu layout, delivery zones, and ordering workflow. This saves you from cobbling together multiple unrelated plugins.

[IMAGE: WordPress admin screen showing WooCommerce product attributes panel with dietary labels and allergen terms configured]

Adding Front-End Allergen Filters and Dietary Category Navigation to Your Menu Page

Having the data attached to your products is only half the battle. Customers need an intuitive way to filter your menu based on their dietary needs without reloading the page or scrolling endlessly.

AJAX-Powered Filtering

The gold standard for menu filtering is AJAX-based — meaning customers can toggle dietary preferences and see results update instantly without a full page reload. Plugins like FacetWP and JetSmartFilters both support WooCommerce product attributes as filter sources. Configure them to pull from your “Dietary Labels” attribute, and you’ll get toggle buttons or checkboxes that customers can use to narrow down the menu.

For a food-specific setup, configure your filters as visual toggle buttons rather than dropdown menus. A row of buttons labeled “Vegan,” “Gluten-Free,” “Keto,” “Halal,” and “Nut-Free” — each with a small icon — is far more intuitive for hungry customers than a multi-select dropdown. Use SVG icons (a leaf for vegan, a wheat stalk with a cross for gluten-free) to make filters scannable at a glance.

Creating Dedicated Dietary Landing Pages

For SEO purposes, you’ll also want dedicated archive pages for each dietary category. Because WooCommerce attributes generate their own archive URLs by default (e.g., /dietary-labels/vegan/), you can customize these pages with unique introductory text, internal links, and optimized meta titles like “Vegan Menu — Order Online for Delivery or Pickup.”

These pages serve double duty: they give search engines crawlable, keyword-rich content, and they give customers a direct entry point from Google. Someone searching “keto delivery near me” who lands on your /dietary-labels/keto/ page sees a curated selection of low-carb dishes ready to order — a much better experience than dumping them on a generic menu page.

Styling Tips for Filter Buttons

Keep your filter bar sticky at the top of the menu page on both desktop and mobile. Use a contrasting background color so it’s visually distinct from the menu items below. Add a “Clear All Filters” button so customers can easily reset. If a filter returns zero results, display a friendly message like “We don’t have any nut-free options in this category yet — check out our full menu!” rather than a blank page.

Displaying Nutritional Information and Allergen Warnings on Individual Menu Item Pages

Once a customer clicks on a specific dish, the single product page needs to present nutritional data and allergen warnings clearly without overwhelming the layout.

Nutritional Info Panels

Display nutritional data in a clean, tabular format — similar to what you’d see on a packaged food label. Using the custom fields you created earlier, output a styled panel that shows calories prominently at the top, followed by macronutrient breakdowns. Here’s a practical structure:

• Calories: 520 kcal
• Protein: 32g
• Carbohydrates: 48g
• Fat: 22g
• Fiber: 6g
• Sodium: 680mg

Place this panel in a WooCommerce product tab (alongside the Description and Reviews tabs) labeled “Nutrition Facts.” Alternatively, display it as a collapsible accordion section directly below the product description — this works better on mobile where tab navigation can feel clunky.

Allergen Warning Badges

For allergens, use color-coded badge icons displayed directly beneath the dish name or price. A red badge with a peanut icon for “Contains Nuts,” an orange badge for “Contains Shellfish,” and so on. Color-coding leverages the same visual language that physical restaurant menus use, making it immediately recognizable. Keep the badges compact — 24×24px icons with tooltip text on hover that expands to the full warning.

Implementing Schema Markup for Rich Snippets

Adding NutritionInformation schema markup to your product pages tells Google exactly what each dish contains. This can result in rich snippets that display calorie counts and dietary labels directly in search results — a significant click-through rate advantage. The schema should be nested within a MenuItem or Product schema and include properties like calories, fatContent, proteinContent, carbohydrateContent, and suitableForDiet (using values like GlutenFreeDiet, VeganDiet, HalalDiet from Schema.org’s restricted diet enumeration).

You can add this markup using a plugin like Rank Math or Yoast’s custom schema blocks, or by injecting JSON-LD directly into your theme’s single product template. Test your implementation with Google’s Rich Results Test tool to confirm it’s parsing correctly.

[IMAGE: Mobile phone displaying a restaurant menu item page with nutritional info panel, color-coded allergen badges, and dietary label icons]

Mobile-First Layout Considerations

Over 60% of <a href="https://www.wpslash.com/how-to-handle-allergen-labeling-tax-configuration-and-gdpr-compliance-for-your-woocommerce-restaurant-ordering-website-legal-requirements-every-online-food-business-must-follow-complete-guide/" title="How to Handle Allergen Labeling, Tax Configuration, and GDPR Compliance for Your WooCommerce Restaurant Ordering Website: Legal Requirements Every Online Food Business Must Follow (Complete Guide)”>online food orders originate from mobile devices, so your nutritional info and allergen badges must render cleanly on small screens. Stack the nutrition panel vertically, keep badge icons in a horizontally scrollable row if space is tight, and ensure tap targets are at least 44×44px (Apple’s Human Interface Guidelines minimum). If you’re using FoodMaster’s restaurant ordering system, its templates are already optimized for mobile ordering, giving you a solid foundation to layer nutritional displays onto without breaking the checkout flow.

Letting Customers Save Dietary Preferences in Their Account for Personalized Menu Filtering

Personalization is what separates a good restaurant website from a great one. If a customer identifies as vegan and gluten-free, they shouldn’t have to re-apply those filters every time they visit your menu.

Adding Preference Checkboxes to the My Account Page

WooCommerce’s My Account page can be extended with custom fields using the woocommerce_edit_account_form action hook. Add a section titled “My Dietary Preferences” with checkboxes for each dietary label: Vegan, Gluten-Free, Keto, Halal, Nut-Free, Dairy-Free, and so on. When the customer saves their profile, store these selections as user meta using update_user_meta().

Here’s the logic flow:

1. Customer registers or logs into their account
2. They navigate to “My Dietary Preferences” under My Account
3. They check “Vegan” and “Nut-Free”
4. On their next visit to the menu page, a PHP function checks their user meta and pre-applies those filters via URL parameters or JavaScript
5. The menu loads showing only vegan, nut-free items by default, with a visible banner: “Showing items matching your saved preferences. Show full menu“

Personalized Email Recommendations

Take this a step further by integrating with your email marketing platform (Mailchimp, Klaviyo, or even WooCommerce’s built-in email system). When you add a new menu item tagged as “Vegan,” trigger an automated email to all customers who have “Vegan” saved in their dietary preferences: “New on our menu: Thai Basil Tofu Bowl — and it’s 100% vegan! Order now for delivery.” This kind of targeted communication drives repeat orders far more effectively than generic promotional blasts.

Testing, Maintaining Accuracy, and Scaling Your Allergen and Nutrition System

Building the system is one thing. Keeping it accurate and reliable over time is where most restaurants fall short — and where the real liability risk lives.

Keeping Nutritional Data Accurate

Recipes change. Suppliers change. A new cooking oil or sauce substitution can alter allergen profiles overnight. Establish a clear internal process: every time a recipe is modified in the kitchen, the chef or kitchen manager fills out a standardized “Menu Item Update Form” (a simple Google Form works) that captures the new ingredients, allergens, and approximate nutritional values. This form triggers a notification to whoever manages the website, ensuring the product listing gets updated within 24 hours.

For nutritional calculations, tools like Nutritionix or CalorieKing’s database provide per-ingredient breakdowns that your kitchen staff can use to recalculate macros when recipes change. Don’t guess — even rough estimates should be based on actual ingredient quantities.

A/B Testing Filter Placement

Test whether your dietary filters perform better as a horizontal bar above the menu, a sidebar on desktop, or a floating bottom bar on mobile. Track two metrics: filter usage rate (what percentage of visitors interact with filters) and conversion rate by filter users vs. non-filter users. In most cases, customers who use dietary filters convert at higher rates because they’re seeing a curated, relevant menu — but the filter UI needs to be visible and obvious for that to happen.

Scaling Across Multiple Locations

If you operate multiple restaurant locations, menu items and their allergen profiles may vary by location — a dish might be prepared differently at your downtown branch versus your suburban one due to kitchen equipment or local supplier differences. WooCommerce doesn’t natively handle location-based product variations, but combining FoodMaster‘s delivery zone and location management with conditional product visibility lets you maintain location-specific menus with accurate allergen data for each.

Create a documented process for each location manager to review and confirm allergen tags quarterly. A shared spreadsheet mapping every menu item to its allergens and nutritional data — cross-referenced against the live website — serves as both an accuracy audit tool and a liability safeguard.

Building Trust Through Transparency

Add a visible disclaimer on your menu page: “We take allergens seriously. While we make every effort to ensure accuracy, please inform our staff of any allergies when placing your order.” This isn’t just legal protection — it signals to customers that you’ve thought carefully about their safety. Pair this with a feedback mechanism (a simple “Report an allergen concern” link) so customers can flag discrepancies directly.

The restaurants that get this right — accurate data, intuitive filtering, personalized experiences — don’t just avoid lawsuits. They build a loyal customer base of dietary-conscious diners who trust them implicitly and order again and again. Start with the attribute and taxonomy setup, layer on filtering and schema markup, and iterate based on real customer behavior. Your menu isn’t just a list of dishes — it’s a trust-building tool, and every allergen badge and nutrition panel reinforces that trust with every order.