DEV3Technologies
All case studies

DEV3 Technologies · own product

DEV3 Hearth: a restaurant WordPress theme with a live 3D dish story

Our own WordPress theme for restaurants, cafés and bakeries: a scroll-driven three.js dish story on the home page, a printable menu board, table booking driven by real opening hours, and WooCommerce ordering with a live 3D dish, all editable in Elementor.

WordPressPHPtheme.jsonElementorWooCommercethree.jsLenispostprocessingContact Form 7JSON-LD
Industry
Hospitality (WordPress theme)
Services
Web DevelopmentUI/UX Design

Live project preview

Client systems are private — screenshots shown where permitted.

DEV3 Technologies · own product — screenshots
Wood-fired 3D hero — a steaming plate of hand-made pasta on a walnut table opens the scroll story, with Book a table and See the menu calls to action.

Wood-fired 3D hero — a steaming plate of hand-made pasta on a walnut table opens the scroll story, with Book a table and See the menu calls to action.

The challenge

A restaurant website lives or dies on how the food looks, yet most restaurant themes are a photo slider and a PDF menu. Owners rarely have a food photographer, and hero videos slow phones down. We wanted the dish itself to be the hero, rendered live and light enough for a phone. The parts a restaurant changes every week had to stay ordinary WordPress content that staff can edit without a developer: the menu, the hours, bookings and online orders. And the 3D had to be optional, so the site still reads perfectly with reduced motion, without WebGL and for search engines.

Our solution

Hearth is a classic PHP theme with theme.json, built on DEV3's shared theme core and the DEV3 Theme Toolkit plugin. The theme owns presentation and the 3D scene presets. The toolkit owns functionality: post types, Elementor widgets and their block twins, WooCommerce extras and the demo importer.

Key design decisions

  • A procedural dish, not a video. The plate, pasta, fish, tart, steam, embers and wine glasses are three.js scenes written in code. Nothing is licensed and no video downloads before the text. The demo's dish and gallery images are rendered by the same scenes.
  • Chapters are Elementor containers. A toolkit extension adds a DEV3 3D chapter panel to every container. Each one is a camera stop with optional scene state (course, steam, embers, fire, sugar, wine, pour) blended between stops. Moving course between whole numbers plays the garnish burst that swaps dishes.
  • Hours as the single source of truth. Opening hours are entered once in the Customizer. They drive the live open-now badge, the opening-hours widget, the booking time slots (every 30 minutes, last seating 75 minutes before close) and the Restaurant JSON-LD.
  • Booking without a booking engine. The slot picker fills three fields of a Contact Form 7 form. Bookings arrive as email, and the form still works with JavaScript off.
  • Variations drive the 3D. Portion and extras swatches on a WooCommerce dish stream to the product's 3D viewer, so adding burrata puts burrata on the plate.
  • Quality tiers and posters. The engine probes the device and picks a tier. The low tier drops embers, garnish, shadow resolution and glass refraction. Reduced motion, Save-Data or no WebGL get a pre-rendered still poster instead.

Results

Hearth ships as a complete theme with a one-click demo. The demo has 27 dishes in 7 menu sections, 4 chefs, 4 events, 4 sample reviews, 16 WooCommerce products, 6 journal posts and 3 forms. The theme adds 27 block patterns and three restaurant widgets on top of the toolkit's 20.

  • Quality gates passed: php -l on every file, phpcs with WPCS 3 and PHPCompatibilityWP 7.4+ at 0 errors, and the WordPress Theme Check plugin with no required-level failures.
  • Flows tested: the WooCommerce add-to-cart → mini-cart → cart → checkout → order-received flow, and an Elementor editor smoke test where the 3D Scene widget renders in the editor and updates live when its controls change.
  • Weight: the 3D engine is about 209 KB gzip including three.js, within the suite's 220 KB budget, and loads only on pages with a scene. The Hearth scenes add about 20 KB in one lazy chunk. Pages without a scene load about 12 KB of JavaScript.
  • Frame-rate budget: 60 fps on desktop and 30 fps on mid-range phones, checked in headed Chrome at 1440 px and 390 px.

Hearth is on the DEV3 marketplace. Watch its video tour there.

Setup guide

Requirements

  • WordPress 6.0 or newer and PHP 7.4 or newer
  • The DEV3 Theme Toolkit plugin (included and required)
  • Recommended: Elementor (free), WooCommerce and Contact Form 7. WordPress offers to install them after you activate the theme. Elementor Pro is supported but not required.

What's in the download

Unzip the download from your DEV3 account first. Do not upload the download itself to WordPress.

  • dev3-hearth.zip: the theme. Install this one.
  • dev3-hearth-child.zip: an optional child theme for your own CSS and PHP.
  • dev3-theme-toolkit.zip: the companion plugin. It is also bundled inside the theme and installed through the prompt.
  • dev3-hearth-demo-content.zip: the demo package for reference. The importer already has a copy inside the theme.
  • Documentation/index.html: the full guide. Open it in a browser.

Install the theme

  1. Go to Appearance → Themes → Add New → Upload Theme.
  2. Choose dev3-hearth.zip, click Install Now, then Activate.
  3. A notice asks you to install the DEV3 Theme Toolkit (required) and the recommended plugins. Click Begin installing plugins, then install and activate them. You can also upload dev3-theme-toolkit.zip under Plugins → Add New → Upload Plugin.
  4. Optional: if you plan to change code, upload dev3-hearth-child.zip the same way and activate DEV3 Hearth Child. The parent theme must stay installed.

Import the demo

  1. Make sure you are logged in as an administrator. Elementor keeps every widget setting only when an administrator runs the import.
  2. Go to Appearance → DEV3 Demo and click Import demo.
  3. The import adds:
    • all the Elementor pages (Home with its six-chapter 3D story, Menu, Reservations, Our story, Chefs, Events, Gallery, Journal, Contact, Gift cards and the shop pages)
    • 27 dishes in 7 menu sections, 4 chefs, 4 events, 4 sample reviews, 16 products, 6 journal posts and 3 forms
    • the menus, footer widgets and theme settings
  4. Open the home page and scroll through the story.

Imported items are tagged, so Reset (remove demo content) on the same screen removes only them. On a server with WP-CLI you can run wp --user=admin dev3tk demo import and wp dev3tk demo reset.

After the import

  • Set your timezone in Settings → General, then your hours in Appearance → Customize → Restaurant (Hearth). The open-now badge and the booking slots use both.
  • Change the "To" address of the Table booking, Private dining and Contact forms in Contact → Contact Forms.
  • Set up payments, and the Local pickup or Flat rate shipping zones, in WooCommerce → Settings.

Updates

Download the new version from your DEV3 account and upload dev3-hearth.zip again. WordPress offers to replace the installed version. Changes you made in the child theme, the Customizer and your pages are kept.

How to use

Edit the menu

  1. Go to Menu in the dashboard. Each dish has a title, a short description (the excerpt), a photo and these fields:
    • Price: a plain number gets the widget's currency symbol. You can also write it out, such as €16 / €28.
    • Dietary tags: V, VG, GF, DF or N.
    • Pairing or note: shown in the handwritten accent font.
    • Chef's special: adds a badge and a star.
    • Order online product ID: adds an "Order online" link to the matching WooCommerce product.
  2. Manage sections under Menu → Dish categories. A term's description becomes the handwritten line beside its heading.
  3. The Hearth: Menu board widget (or block) renders the menu. Choose a layout (two columns, one column, or cards with photos), turn the dietary filters and the Print the menu button on or off, and add an allergen footnote.

Change the 3D story

  1. Open the home page with Edit with Elementor. The top 3D Scene widget uses the Hearth: the table preset in Fixed background (scroll story) mode. Its panel sets the courses, table wood, plate glaze, wine, napkin colour, light, steam and embers.
  2. Every container below it with Advanced → DEV3 3D chapter → Use as 3D chapter switched on is a camera stop. Reorder, duplicate or delete containers to change the story.
  3. Use Copy side to put the text left, right or centre; the plate moves to the other side. Keep the classes hearth-chapter hearth-on-dark hearth-chapter--left (or --right / --center) for the legibility scrim.
  4. Optional: add Scene state JSON to a chapter, for example {"course":1,"steam":0.4,"wine":0.5}. Values blend between chapters. Moving course from 0 to 1 plays the garnish burst into the next dish.
  5. For a single dish anywhere else, add a 3D Scene widget with the Hearth: a single dish preset in inline mode, then pick the dish, extra topping, glaze and camera angle.

Take bookings

  1. In Appearance → Customize → Restaurant (Hearth), enter one line per day or range, for example Tue–Thu: 12:00–14:30, 18:00–22:00 and Mon: Closed. Set your phone, reservations page and pickup/delivery note on the same screen.
  2. The Hearth: Table booking widget builds a 14-day date strip and time slots from those hours. It fills the demo's Table booking Contact Form 7 form.
  3. To use your own form, it must contain [date* res-date], [text* res-time] and [number* res-party], wrapped in <div class="hearth-reserve__sync">.
  4. Prefer OpenTable or another service? Paste its embed into a Form or HTML widget, or point the header button at it.

Sell online

  1. Dishes are WooCommerce products. For pasta and pizza, use the Portion and Extras attributes as variations; the toolkit shows them as label swatches.
  2. On the product's 3D view tab, choose Hearth: a single dish with parameters such as {"dish":"pasta","glaze":"cream"}. Picking a portion or an extra then updates the 3D dish live.
  3. Gift cards and event seats are virtual products. Link an event to its seat product with the event's Ticket product ID.

Style the site

  • Appearance → Customize → DEV3 Hearth Options holds colours, fonts, header style, 3D & motion (quality, loader, cursor, smooth scroll, grain, chapter rail), footer, shop and blog. Saving also updates Elementor's Global Colors and Fonts.
  • Without Elementor, use the block editor. Insert patterns from Patterns → DEV3 Hearth (27 of them), and wrap content in the 3D Chapter block to make a camera stop.

Related case studies