Source: https://wpinplate.com/en/docs/blocks-and-shortcodes/

# Blocks and shortcodes on your website

You add WP InPlate elements to pages as blocks in the Gutenberg editor or as shortcodes. They work in any WordPress theme, also in page builders that support shortcodes.

| Element | Block | Shortcode |
|---|---|---|
| Menu | InPlate – Menu | `[wp-inplate-menu]` |
| Category navigation | InPlate – Menu navigation | `[wp-inplate-menu-nav]` |
| Daily dish | InPlate – Daily dish | `[wp-inplate-dish]` |
| Cart | InPlate – Cart | – |
| Delivery checker | InPlate – Delivery checker | `[wp-inplate-delivery-checker]` |
| Allergen chart | InPlate – Allergen chart | `[wp-inplate-allergen-card]` |
| Language switcher | InPlate – Language switcher | `[wp-inplate-language-switch]` |
| Order form | – | `[wp-inplate-checkout]` |

## Menu

The full menu divided into categories. Clicking a dish opens a window with the photo, description, weight, product tags and add-ons. On a phone the window slides up from the bottom: dragging the handle down closes it, and you scroll a long list of add-ons as usual. The “+” button on the card adds the dish to the cart without opening the window (for dishes with required add-ons or several sizes it opens the window).

| Block option | Shortcode attribute | Values | Default |
|---|---|---|---|
| Card layout | `layout` | `grid` (grid, vertical card), `list` (list, horizontal card), `tiles` (square tiles) | `grid` |
| Show image | `show_image` | `1` / `0` | `1` |
| Show description | `show_description` | `1` / `0` | `1` |
| Show the language switcher | `show_language` | `1` / `0` – the language switcher above the menu, on a [multilingual site](/en/docs/multilingual-menu/). To place it elsewhere, e.g. in the header, turn this off and use the [InPlate – Language switcher](#language-switcher) block. With several Menu blocks on a page, the switcher is only above the first one that shows it | `1` |
| Show promotions | `show_promotions` | `1` / `0` – the [bar with the promotions](/en/docs/promotions/#what-the-customer-sees) running now, above the menu | `1` |
| Columns (list only) | `list_columns` | `1`, `2`, `3` – the list in columns; a narrower screen shows fewer columns, always the same number in every row, with the prices and “+” buttons of a row at one height | `1` |
| Minimum tile width (px) | `min_width` | a number; tiles are wider if the column has room | automatic |
| Sizes (variants) → Price of a product with sizes | `variant_price` | `from` (“from €29”), `range` (“€29–39”), `list` (“32 cm €29 · 40 cm €39”), `labels` (the sizes and “from €29”) | `from` |
| Sizes (variants) → Size choice on the card | `variant_pick` | `1` / `0` – sizes as buttons on the card: a click adds the size to the cart (a green “Added ✓” on the button) or opens the window when something has to be chosen | `0` |

The last two options are for dishes with [sizes](/en/docs/sizes-and-variants/). A sold-out size is greyed out on the card, not hidden.

Example:

```
[wp-inplate-menu layout="list" show_description="0" variant_price="list" variant_pick="1"]
```

The menu page must be set in **InPlate → Settings → System → Pages → Menu page**. Redirects from the WooCommerce shop pages and links from the cart lead to it.

## Menu navigation

Category buttons that scroll the page to the chosen menu section. The current category is highlighted while scrolling. Put the block above the menu (a row) or in a sidebar next to the menu (a column).

| Block option | Attribute | Values | Default |
|---|---|---|---|
| Layout | `type` | `row` – a horizontal bar above the menu, `column` – categories one under another, e.g. in a sidebar | `row` |
| Sticky navigation | `sticky` | `1` – stays visible while scrolling, `0` – static | `1` |

Example of navigation in a sidebar: `[wp-inplate-menu-nav type="column"]`.

## Daily dish

Today's highlighted InPlate dishes, e.g. on your home page. When ordering is closed, the block shows a message and optionally the date from which you accept orders again.

| Block option | Shortcode attribute | Description | Default |
|---|---|---|---|
| Dish types | `type` | Type keys separated by commas, e.g. `danie-dnia,zupa-dnia`. None = all types | all |
| Layout | `layout` | `list`, `grid`, `tiles` | `list` |
| Show unavailable dishes | `show_unavailable` | `1` – unavailable dishes show as sold out | `0` |
| Show image | `show_image` | `1` / `0` | `1` |
| Show description | `show_description` | `1` / `0` | `1` |
| Minimum tile width | `min_width` | a number in px | automatic |
| Message when no dishes | `alt` | The text shown when there are no dishes today, e.g. “See you tomorrow” | default text |
| Closed message | block only | The text shown when ordering is closed or the order-taking time has passed | default text |
| Show return date | block only | Shows when you accept orders again | on |

You find the type keys in **InPlate → Dish types** – every type has a ready-made shortcode.

Example:

```
[wp-inplate-dish type="danie-dnia" layout="grid" alt="No daily dish today – see you tomorrow."]
```

The older `[wp-inplate]` shortcode still works like `[wp-inplate-dish]`, but it is deprecated. Replace it with the new one.

## Cart

A button with an item counter. Clicking it slides out a panel with the order summary: items with add-ons, changing quantities, a “Personalize” link for dishes with add-ons, the total and a button to go to the order. Available as a block.

| Option | Description | Default |
|---|---|---|
| Button text | The text on the button | “View order” |
| Show cart icon | An icon before the text | on |
| Slide-in side | From the right or from the left | from the right |
| Maximum width (px) | The panel's width | 360 |
| Checkout button text | The text on the button in the panel | “Place order” |
| Colors | Button background, icon color, counter background, number color | theme colors |

The customer enters a discount code on the order page, not in the cart panel. A discount applied on the order page is included in the total in the panel.

## Delivery checker

A button that opens a window with two steps: first the customer chooses how they will eat the order (eat in or delivery), then for delivery they enter the address. The result shows straight away: the address is in a zone (with the fee, the minimum order and – when the zone has one – the [free delivery](/en/docs/delivery-zones/#free-delivery-from-an-amount) threshold) or outside the zones (with a pickup suggestion). The customer's choice is remembered and preselected in the order form.

The window also works outside ordering hours – the customer then sees that ordering is closed and the result for their address.

| Block option | Description |
|---|---|
| Show icon / Change icon | An icon in the window's header, from the media library |
| Show title / Title | Default “How would you like to get your order?” |
| Show description / Description | Default “We'll remember your choice for next time.” |
| Label: Dine-in | The name of the choice button, e.g. “Collect at the venue” |
| Label: Delivery | The name of the choice button, e.g. “Delivery to the office” |

An empty field means the default text.

## Allergen chart

The **InPlate – Allergen chart** block or the `[wp-inplate-allergen-card]` shortcode: a table of dishes with filled-in allergens (by menu category) and of add-ons with allergens, with a legend of numbers and a **Print** button. See [Allergens](/en/docs/allergens/#allergen-chart).

| Block option | Shortcode | Description |
|---|---|---|
| Show title | `show_title="no"` turns it off | The “Allergen chart” heading |
| Show add-ons | `show_addons="no"` turns it off | The table of add-ons from templates that have allergens |

## Language switcher

The **InPlate – Language switcher** block or the `[wp-inplate-language-switch]` shortcode: language buttons, e.g. **PL · EN**, that customers use to change the language of the menu and ordering. It usually goes in the site header – in the Kadence theme, put the shortcode in the header's **HTML** element. It also works on pages without a menu: the choice is remembered and applies to the menu, the cart and the order form.

The switch shows only on a multilingual site – see [Menu in several languages](/en/docs/multilingual-menu/). When you add it yourself, turn off the switch added above the menu and in the order form (**Settings → System → Translations**), so customers don't see two.

| Block option | Shortcode | Description |
|---|---|---|
| Alignment | `align="left"`, `"center"` or `"right"` | Where the buttons stand; right by default |

## Order form

The `[wp-inplate-checkout]` shortcode adds the order form: choosing the fulfillment method, time, address, contact details and payment. Put it on a separate page and set that page in **InPlate → Settings → System → Pages → Checkout page**. The setup wizard creates this page automatically.

What the customer sees is described in [How customers order](/en/docs/how-customers-order/).