arrow_drop_up arrow_drop_down
5 april 2017 

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.

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

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.
Over de schrijver
Ik (Sandra Boon van Boon Webdesign) ben jouw partner in crime voor WordPress websites en online marketing. Voor ondernemers bouw ik BoonTheme WordPress websites - de perfecte mix tussen kant-en-klaar en maatwerk. Daarnaast bouw ik ook online leeromgevingen voor mijn klanten.
Saskia
Door

Saskia

op 12 April 2019

Wat handig! En stel ik wil dat de button niet alleen een product toevoegt aan het winkelmandje, maar dat iemand ook direct naar de winkelmand-pagina wordt doorgestuurd. Kan dat ook? En hoe wordt dan precies de button-link geformuleerd?

Reactie plaatsen