Woocommerce

WooCommerce product knoppen plaatsen op een andere pagina

03 maart 2022

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.

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"]

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″]

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.