WordPress: storefront bouwen

Gesynchroniseerde producten zijn beschikbaar als semble_product posts met publieke URL's op /product/{slug}/. De plugin bevat een standaard single-product template, of je bouwt custom layouts met Elementor of klassieke shortcodes.

Productpagina's

Elke semble_product post toont gesynchroniseerde prijzen, voorraad, beschrijvingen, galerijafbeeldingen en categorie-breadcrumbs. Het standaard template op templates/single-semble_product.php rendert out of the box een complete productpagina.

Met Elementor maak je een Single template voor het semble_product post type en stel je de layout samen met Formix-widgets en dynamische tags.

Elementor-widgets

Als Elementor is geïnstalleerd, vind je widgets onder de Formix-categorie in het Elementor-paneel:

Formix Product Grid — filterbaar productgrid met toevoegen-aan-winkelwagen-knoppen
Formix Product Price / Code / Stock — individuele veldweergaven
Formix Add to cart — offerte-knop of offertesamenvatting
Formix Product Gallery — productafbeeldingen
Formix Product Breadcrumb — categorienavigatie
Formix Category Selector — categorieboom of dropdownnavigatie
Formix Product Search — zoekformulier beperkt tot producten
Formix Cart Icon — header-winkelwagenlink met live aantal
Formix Quote Wizard — meerstaps offerteaanvraagformulier
Formix Upsells — contextuele upsell-productstrip

Dynamische tags (Formix-groep) laten je prijs, code, beschrijvingen, voorraad, tags en galerijdata overal in Elementor binden.

Shortcodes zonder Elementor

Klassieke thema's en de block editor ondersteunen dezelfde functionaliteit via shortcodes. Alle attributen zijn optioneel; standaardwaarden staan tussen haakjes.

`[semble_product_grid]`

Filterbaar productgrid (24 producten per pagina, uitgelichte afbeelding en toevoegen-aan-winkelwagen getoond).

category (leeg) — kommagescheiden categorie-slugs en/of term-ID's om op te filteren; leeg toont alles
include_children (1) — bij filteren op categorie ook subcategorieën meenemen. Accepteert 1, yes, true, on voor true
price_basis (incl) — prijstier om te tonen: incl (incl. BTW), excl (excl. BTW) of both

`[semble_category_selector]`

Categorienavigatie als boom of dropdown.

display (tree) — layout: tree of dropdown
root (leeg) — rootcategorie-slug of term-ID om vanaf te starten; leeg toont bovenste niveau
depth (0) — maximaal aantal niveaus; 0 is onbeperkt
show_count (0) — toon het productaantal naast elke categorie
show_empty (0) — neem categorieën zonder producten mee
highlight_current (1) — markeer de categorie van de huidige pagina
all_label (leeg) — label voor het item "alle categorieën"
dropdown_label (leeg) — label boven/in de dropdown

`[semble_product_search]`

Zoekformulier beperkt tot producten.

placeholder (leeg) — placeholdertekst van het invoerveld
button (leeg) — label van de verzendknop
show_category (0) — voeg een categoriefilter-dropdown toe aan het formulier
category_label (leeg) — label voor het categoriefilter
all_categories (leeg) — label voor de optie "alle categorieën" in het filter

`[semble_cart_icon]`

Winkelwagenlink met live aantal-badge.

url (site home) — linkdoel voor het winkelwagenicoon
hide_badge_when_zero (leeg) — zet op yes om de badge te verbergen wanneer de winkelwagen leeg is
label (View quote cart) — screenreader-label voor de link

Productveld-shortcodes

Deze renderen velden van één product. Ze gebruiken het huidige product op een productpagina, of accepteren een expliciete post_id.

[semble_product_price] — huidige productprijs
- post_id (huidig product) — product post-ID om uit te lezen
- currency_prefix ($) — symbool vóór het bedrag
- price_basis (incl) — incl, excl of both
- price_field (current) — current prijs of list prijs
[semble_product_code] — productcode (post_id)
[semble_product_short_description] — korte beschrijving (post_id)
[semble_product_long_description] — lange beschrijving (post_id)
[semble_product_stock] — voorraadweergave
- post_id (huidig product) — product post-ID om uit te lezen
- output_mode (labeled) — labeled voor leesbare tekst, raw voor het kale aantal
- label_unknown (Stock unknown) — tekst wanneer voorraad onbekend is
- label_out (Out of stock) — tekst wanneer niet op voorraad
- label_in_stock_format (%d in stock) — formattekenreeks voor voorraadaantallen; %d is de hoeveelheid
[semble_product_tag] — producttagwaarde
- post_id (huidig product) — product post-ID om uit te lezen
- tag_key (leeg, verplicht) — sleutel van de tag om te tonen; rendert niets indien weggelaten
[semble_product_tag_if]…[/semble_product_tag_if] — conditionele wrapper voor labels, HTML of lijstitems rond [semble_product_tag]
- post_id (huidig product) — product post-ID om uit te lezen
- tag_key — vereist één tag voordat de binnenste inhoud wordt getoond
- tag_keys — kommagescheiden lijst; alle genoemde tags moeten een waarde hebben
- Als geen van beide attributen is ingesteld, worden tagsleutels automatisch gedetecteerd uit geneste [semble_product_tag]-shortcodes in de binnenste inhoud
- Rendert niets wanneer vereiste tags ontbreken, zodat prefixes en lijstopmaak niet achterblijven
Voorbeeld (één tag met label erbuiten):
```
[semble_product_tag_if tag_key="color"]
<li>Kleur: [semble_product_tag tag_key="color"]</li>
[/semble_product_tag_if]
```
Voorbeeld (regel met meerdere tags — verborgen als een tag ontbreekt):
```
[semble_product_tag_if tag_keys="color,material"]
Verkrijgbaar in [semble_product_tag tag_key="color"] en [semble_product_tag tag_key="material"].
[/semble_product_tag_if]
```

Veld-shortcodes werken op single productpagina's. Plaats [semble_product_grid] en [semble_category_selector] op catalogus- en landingspagina's.

Een Formix-flow embedden

Configuratorflows worden apart van de WordPress-plugin geëmbed. Om een begeleide Formix-flow aan een WordPress-pagina toe te voegen, gebruik je de embed.js-scripttag (zie Gekoppelde apps en website-inbedding).

De plugin regelt catalogusbrowsen en offerteaanvragen; embed.js regelt stapsgewijze configurators. Beide kunnen op dezelfde site naast elkaar bestaan.