Skip to main content

Webshop in WordPress

Webshop op jouw WordPress website

Je kunt de widget op twee manieren gebruiken:

  1. Een knop op je website
  2. De widget op je website

1: Knop op je website

Een knop op je website plaatsen is de gemakkelijkste manier. Je plaatst ergens op je website een knop of link naar https://shop.jodibeauty.com?salon=jouwafkortinghier. De afkorting kun je instellen in je account.

Voor dit voorbeeld maken we een nieuwe pagina in WordPress, maar je kunt hem overal zetten. Ook in een blogpost bijvoorbeeld.

  1. Open de pagina of post waar je de knop wilt invoegen.

  2. Klik op de plus en zoek naar "Knoppen" ("Buttons" in het Engels) en voeg toe.

    Een knop toevoegen in WordPress

  3. Type nu "Bestel online" of "Webshop" of iets dergelijks.

  4. Je kunt nu zelf nog aan de rechterkant in het scherm de kleur en de ronding instellen; de knop 'stylen'.

    Een knop stylen in WordPress

  5. Klik nu op het "Link"-icoontje en type of plak daar de link, aangepast met jouw slug: https://shop.jodibeauty.com?salon=jouwafkortinghier.

    Een knop linken in WordPress

2: De widget op je website

Wil je dat jouw klanten rechstreeks op jouw website kunnen boeken, dan kun je de widget ook op je website integreren (embedden). Je krijgt dan de widget zonder header (je logo en de terugknop) en footer (grijze balk onderaan de pagina). De link naar de embed-versie van de widget is: https://shop.jodibeauty.com/embed?salon=demosalon. Uiteraard verander je hier onze demoslug demosalon weer door jouw eigen slug.

Voor dit voorbeeld maken we een nieuwe pagina in WordPress, maar je kunt de widget overal embedden. Ook in een blogpost.

  1. Open de pagina of post waar je de widget wilt invoegen.

  2. Klik op de plus en zoek naar "html" en voeg een "Eigen HTML" ("Custom HTML" in Engels) blok toe.

    Eigen html toevoegen in WordPress

  3. Kopieer onderstaande code en plak het in het HTML blok.

    <embed
    type="text/html"
    title="Webshop"
    src="https://shop.jodibeauty.com/embed?salon=demosalon"
    width="100%"
    height="600">

    Voorbeeld embedded module in WordPress

  4. Pas de salonnaam (de slug) aan en klik op "Voorbeeld" ("Preview" in Engels).

    Voorbeeld embedded module in WordPress

  5. Eventueel kun je nu de breedte (width) en hoogte (height) aanpassen, zodat de widget mooi in je website past. Door rechtsboven in het scherm op "Voorbeeld" (of "Preview") te klikken en te kiezen voor "Voorvertoning in nieuwe tab" ("Preview in new tab") krijg je het resultaat te zien.

    Resultaat embedded module in WordPress