Meld je aan voor mijn gratis online mini-workshops

Ja, vertel mij meer!

WooCommerce product knoppen plaatsen op een andere pagina


Heb je een WooCommerce webshop bij je WordPress website en wil je buiten de productpagina om knoppen plaatsen waarmee men gelijk een product kan toevoegen aan de winkelwagen? Bijvoorbeeld op een salespage of op een pagina waar je aanbod staat? No worries, dat kan gewoon in WooCommerce 🙂 Ik zal je uitleggen hoe je dit kunt doen.


Vind de pagina ID

Elke pagina, bericht, afbeelding, webshop product, etc. heeft zijn eigen ID. Dat gaat automatisch in WordPress en WooCommerce. Heel handig, daarmee kun je namelijk aanduiden om wélk product het gaat. Hieronder ga ik drie manieren laten zien om een WooCommerce product knop in een (andere) pagina te plaatsen. Voor beide manieren is het van belang dat je eerst de ID van het product vind. Dit is heel simpel;

  • Ga in je WordPress dashboard naar het kopje “Producten”.
  • Je ziet dan een overzicht van alle producten in jouw webshop.
  • Beweeg je muis op het product waarvan je de ID wilt weten (je hoeft niet te klikken).
  • Er verschijnen dan verschillende opties. Helemaal vooraan zie je in het grijs de ID staan.
  • Kopieer of onthoud de ID.

WooCommerce product knop


01. Weergeef prijs en knop

Als je alleen een prijs en een knop wilt laten weergeven, dan kun je onderstaande shortcode gebruiken. Plak deze in een pagina of eventueel in een bericht en voeg de juiste ID toe op de plek waar nu 340 staat. VERWIJDER het sterretje na “cart”. In sommige themes zal dit er niet mooi uit zien, in andere themes wel. Dat is afhankelijk van de theme die je gebruikt.

[add_to_cart* id="340"]

WC product knop tonen


02. WooCommerce product tonen

Als je meer wilt tonen dan alleen de prijs en de winkelwagenknop, dan kun je met onderstaande code het “hele” product weergeven. Het toont dan de afbeelding, prijs, rating en de bestelknop. Wanneer men klikt op de knop, komen ze op de productpagina terecht. Het product wordt dan dus niet automatisch toegevoegd aan de winkelwagen. Ook hier is het wederom afhankelijk van je theme hoe het product precies zal worden weergegeven. VERWIJDER het sterretje na “product”.

[product* id=”340″]


03. Maak zelf een link of button

Naast bovenstaande opties is het ook mogelijk om zelf een linkje of knop toe te voegen. Aan de hand van een URL kun je dan instellen dat men een specifiek product in het winkelwagentje doet. Het is op zich niet moeilijk om te stellen, maar vereist wel iets meer moeite dan de twee opties hierboven.

  • Maak een linkje of knop zoals je dat normaal gesproken ook zou dan.
  • Vul als URL eerst de URL in van de pagina/blogbericht waar je de link gaat plaatsen. Dus niet de pagina van het product zelf. Stel ik wil een link plaatsen op mijn contactpagina dan zou de URL dus zijn: https://www.boonwebdesign.nl/contact/
  • Vervolgens voeg je het volgende stukje code toe: ?add-to-cart=340
  • Vervang de 340 door jouw product ID.
  • De link ziet er dan zo uit: https://www.boonwebdesign.nl/contact/?add-to-cart=340
  • Wanneer men dan klikt op de link, zal het product met de ID 340 automatisch worden toegevoegd in het winkelwagentje.

Gratis workshops van Boon Webdesign

Ik geef regelmatig gratis online mini-workshops in mijn groep op Facebook over onder andere WordPress en internet marketing. Wil jij ook een website met meer succes? Meld je dan gratis aan.

Gratis aanmelden

Sinds 2008 bouw ik (Sandra Boon) WordPress websites en WooCommerce webshops. In de afgelopen jaren heb ik behoorlijk wat kennis opgedaan tijdens alle avonturen die ik heb beleefd in het WordPress wereldje. Via mijn tips en adviezen deel ik een gedeelte van deze kennis met jou.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *