Als je het runnen van een online bedrijf, heeft u misschien op zoek naar manieren om de omzet te verhogen, conversies en omzet. U kunt e-mailadressen van bezoekers vastleggen, exit-intent pop-ups inschakelen of nieuwsbrieven verzenden, maar er is iets veel krachtiger. In dit bericht, we gaan u laten zien hoe u een quick buy knop in WooCommerce toe te voegen!
Wat is een Quick Buy-knop?
een quick buy-knop, ook bekend als een buy now-knop, laat uw klanten de producten die ze willen sneller kopen en voorkomen dat extra stappen van het afrekenproces. Dus in plaats van items aan de winkelwagen toe te voegen, naar de winkelwagenpagina te gaan en vervolgens naar de afrekenpagina te gaan, kunnen ze met één klik van de productpagina naar de afrekenpagina gaan. Op deze manier, u verminderen drop-offs en winkelwagen verlating.
De meeste grote e-commerce bedrijven zoals Amazon hebben een snelle aankoop knop op hun product pagina die u toelaat om te kopen in een klik. Dus wanneer een shopper op de knop Nu Kopen klikt, worden ze automatisch doorgestuurd naar de afrekenpagina. Zoals u zich kunt voorstellen, Dit is een geweldige manier om de verkoop te verhogen. 
waarom zou u een WooCommerce Quick Purchase-knop gebruiken?
meer dan 75% van de shoppers verlaat online winkels met producten in hun kar. Een van de belangrijkste redenen daarvoor is omdat het aankoopproces lang en verwarrend is. Hoe langer dat proces is hoe meer kansen gebruikers hebben om drop-off dus een van de beste oplossingen is om een quick buy knop toe te voegen aan uw WooCommerce winkel. Dit betekent niet dat je nodig hebt om zich te ontdoen van de knop Toevoegen aan winkelwagen. Niet al uw bezoekers zijn klaar om te kopen het moment dat ze uw site te bezoeken.
echter, het geven van gebruikers die klaar zijn om direct te kopen de optie om het te doen in één klik, zal u helpen uw conversies te verhogen. Bovendien, quick buy knoppen zijn een goed idee voor abonnement of lidmaatschap websites. Wanneer een gebruiker zich aanmeldt voor een abonnement, alles wat je hoeft te doen is omleiden naar de kassa pagina in plaats van ze naar de winkelwagen pagina en vervolgens naar de kassa.
Hoe voeg ik een Quick Buy knop toe In WooCoommerce?
Er zijn drie belangrijke methoden om een quick buy-knop toe te voegen in WooCommerce:
- Plugin
- programmatisch (codering)
- Shortcodes
al deze methoden zijn 100% beginnersvriendelijk, zodat u de methode kunt kiezen die het beste bij u past.
1) Plugin
Er zijn veel WordPress plugins beschikbaar voor het toevoegen van een quick buy knop aan uw site. We raden echter WooCommerce Direct Checkout door QuadLayers aan, een van de beste en lichtgewicht add-ons om het afrekenproces te vereenvoudigen.
Direct Checkout voor WooCommerce is een freemium tool met een gratis versie en drie premium plannen die beginnen bij 20 USD (eenmalige betaling). De gratis versie heeft meer dan 70.000 actieve installaties en heeft tal van geweldige functies. Maar als u meer geavanceerde functionaliteiten wilt, is de pro-versie uw beste keuze.
Plugin installatie en activering
1) Installeer de plugin op uw site. 
2) Activeer het dan. 
als u een aantal van de premium plannen gebruikt, kunt u vanaf dezelfde pagina de gedownloade Plug-inbestanden uploaden. Klik vervolgens op Nu installeren.
activeer na de installatie de plugin.
nu de directe Checkout voor WooCommerce is geactiveerd, laten we eens kijken naar de configuratie.
Activeer de licentie
onder WooCommerce > Instellingen > Direct Checkout, kunt u de configuratie opties zien om het checkout proces te vereenvoudigen.
het volgende wat u moet doen is de premium kopie van de plugin activeren met een geldige licentiesleutel.
de licentiesleutel kan gevonden worden op uw account met vier lagen. Kopieer de licentiesleutel en plak deze in de instellingen van uw plug-ins met het e-mailadres dat eraan is gekoppeld. Het verifiëren van uw sleutel is belangrijk omdat het u zal toestaan om automatische updates te krijgen. Wanneer er een nieuwe versie van de plugin, kunt u deze direct vanaf uw WordPress dashboard bijwerken.
configuratie
voordat u een knop Nu Kopen toevoegt aan WooCommerce, moet u uw checkout-opties configureren en aanpassen. Allereerst, zorg ervoor dat u een aantal producten beschikbaar in uw winkel, zodat u de aanpassing kunt testen. In ons geval hebben we één testproduct en, zoals u kunt zien, heeft de productpagina slechts een knop Toevoegen aan winkelwagen. 
wanneer een bezoeker op die knop klikt, zal het product aan hun karren worden toegevoegd. De klant zal moeten gaan naar de winkelwagen pagina en vervolgens de kassa pagina. Dus met directe Checkout, kunt u de shopper direct van de productpagina naar de checkout pagina overslaan van de winkelwagen pagina. Op deze manier kunt u conversies verhogen.
het gebruik van deze plugin is zeer eenvoudig. In de Direct Checkout instellingen sectie, ziet u de optie om de winkelwagen pagina uit te schakelen. Het enige wat u hoeft te doen is het inschakelen van de omleiding en voeg de kassa pagina als de bestemming.
daarna moet u de wijzigingen opslaan.
nu bent u klaar om te gaan. Wanneer shoppers op de aankoopknop klikken, worden ze automatisch doorgestuurd naar de afrekenpagina. Vanaf daar kan de klant factureringsgegevens, verzendadressen en de betaling toevoegen.
WooCommerce Direct Checkout plugin kunt u ook kassavelden, factuuradressen, verzendadressen en meer te verwijderen.
WooCommerce Direct Checkout prijzen
Direct Checkout voor WooCommerce heeft een gratis versie met basisfuncties en drie premium plannen. 
- Personal-20 USD eenmalige betaling – enkele licentiesleutel
- agentschap-40 USD eenmalige betaling-5 licentiesleutels
- Ontwikkelaar-80 USD eenmalige betaling-onbeperkte licentiesleutels
De gratis versie is uitstekend en heeft alles wat u nodig hebt om te beginnen. Maar als u meer geavanceerde functies wilt, raden wij u proberen de persoonlijke of Agentschap plan.
Controleer WooCommerce Direct Checkout
Als u een kijkje wilt nemen op andere tools, bekijk dan onze lijst met de beste snelle aankoop plugins. Als u aan de andere kant uw afrekenpagina nog meer wilt aanpassen door afrekenvelden toe te voegen en te bewerken, kunt u een kijkje nemen op WooCommerce Afrekenmanager.
2) programmatisch (codering)
Als u geen plugins wilt installeren, kunt u een quick buy-knop in WooCommerce programmatisch toevoegen. Deze methode vereist enige technische kennis en geduld. Echter, als je deze stappen te volgen, zult u in staat om het te doen, zelfs als je een beginner. We laten u zien hoe u een add-to-cart-knop maakt, de URL ervan wijzigt en hoe u deze kunt invoegen voor eenvoudige, variabele en gegroepeerde producten.
1-Maak een checkout URL
eerst moet u de link toevoegen aan de knop Toevoegen aan winkelwagen. U moet PRODUCT_ID vervangen voor de code van het product dat u in de winkelwagen wilt opnemen.
https://yourdomain.com/cart/?add-to-cart=PRODUCT_ID
omdat we willen dat de gebruikers de winkelwagenpagina overslaan en doorsturen naar de kassa pagina, moeten we de URL als volgt wijzigen:
https://yourdomain.com/checkout/?add-to-cart=PRODUCT_ID
2 – Maak een product link
daarna moet u de URL aanpassen op basis van het producttype: single, variabele en gegroepeerd. A) Single product de URL voor single producten is:
https://yourdomain.com/checkout/?add-to-cart=PRODUCT_ID
u moet PRODUCT_ID vervangen door uw Product-ID. Bijvoorbeeld, voor een enkel product met ID = 10, zal de link zijn:
https://yourdomain.com/checkout/?add-to-cart=10
B) de Variabele product Voor variabele producten, u moet er variatie ID van de Producten > Variaties en het gebruik van de Variant-ID in de URL als volgt:
https://yourdomain.com/checkout/?add-to-cart=VARIATION_ID
Dus als je variatie ID = 29, de link zal worden:
https://yourdomain.com/checkout/?checkout=29
U kunt ook een koppeling maken met behulp van de Product-ID en de Variatie-ID:
https://yourdomain.com/checkout/?checkout=PRODUCT_ID&variation_id=VARIATION_ID
wij adviseren u Echter gebruik alleen de variatie ID, omdat het eenvoudiger is.
opmerking: Dit zal alleen werken voor de variaties die alle gegenereerde attributen hebben. Voor de andere variaties, je nodig hebt om de definitie van het attribuut dat ontbreekt aan de link toe te voegen. Bijvoorbeeld, laten we zeggen dat u de URL wilt maken voor de variatie ID = 30. De attribuutkleur is gedefinieerd (groen), maar niet de grootte. Dus als we de size = medium willen toevoegen, zal de URL:
https://yourdomain.com/checkout/?checkout=30&pa_size=medium
C) gegroepeerd product voor de gegroepeerde producten, in plaats van het toevoegen van de variatie-ID, moet u de gegroepeerde Product-ID toevoegen samen met de Product-ID van de subproducten en de hoeveelheden voor elk van hen.
https://yourdomain.com/checkout/?add-to-cart=GROUPED_PRODUCT_ID&quantity=1&quantity=1
bijvoorbeeld, hier nemen we de gegroepeerde product ID = 1900, en het subproduct ID = 10 en 15.
https://yourdomain.com/checkout/?add-to-cart=1900&quantity=1&quantity=1
3 – Definieer de hoeveelheid
Daarnaast kunt u ook het aantal producten definiëren dat u wilt opnemen. Voor dat, je moet de parameter hoeveelheid te gebruiken. Als u het aantal producten niet opgeeft, wordt het standaard 1.
laten we nu eens kijken hoe we de parameterhoeveelheid kunnen opnemen in enkele, variabele en gegroepeerde producten.
a) enkel product u voegt de parameter hoeveelheid toe na de product_id:
https://yourdomain.com/checkout/?add-to-cart=PRODUCT_ID&quantity=1
dus als u het product ID = 10 x2 wilt toevoegen, zal de link zijn:
https://yourdomain.com/checkout/?add-to-cart=10&quantity=2
B) variabel product voor variabele producten is de logica hetzelfde:
https://yourdomain.com/checkout/?add-to-cart=VARIATION_ID&quantity=1
voor variatie ID = 29, en hoeveelheid = 3 wordt het verband:
https://yourdomain.com/checkout/?add-to-cart=29&quantity=3
c) gegroepeerde producten ten slotte is voor gegroepeerde producten de standaard URL:
https://yourdomain.com/checkout/?add-to-cart=GROUPED_PRODUCT_ID&quantity=1&quantity=1
dus voor het gegroepeerde product ID = 1900 zal de link met product ID = 10 x3 en product ID = 15 x2 zijn:
https://yourdomain.com/checkout/?add-to-cart=1900&quantity=3&quantity=2
eenmaal u klaar bent met het aanpassen van de URL, als u de pagina van de frontend, u in staat om een add to Cart URL die gebruikers direct zal omleiden naar de kassa pagina te zien zal zijn. 
dit werkt functioneel maar ziet er niet geweldig uit. Nu moet je die link om te zetten in een mooie knop, het toevoegen van wat styling met een beetje CSS.
4-definieer knopstijl
nadat u alle URL ‘ s hebt gewijzigd, moet u de knop Nu Kopen aanmaken. Omdat we klanten direct naar de kassa sturen, bellen we de knop Nu Kopen in plaats van toevoegen aan winkelwagen.
in WooCommerce zijn er twee knopstijlen:
1. Standaard knopstijl
<a class="button" href="#">Purchase Now</a>
2. Alternatieve knopstijl
<a class="button alt" href="#">Purchase Now</a>
Bovendien kunt u uw aangepaste knopstijl maken:
<a class="button my-button" href="#">Purchase Now</a>
De volgende code toont een rode knop met witte letters en een dunne blauwe rand.
.my-button {color: white;background-color: red;border: 1px solid blue;border-radius: 3px;box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.75);}
kopieer en plak de code in het WordPress dashboard> uiterlijk> aanpassen> Aangepaste CSS. 
vervolgens, pas het aan om het de look en feel van uw site veranderen van de kleuren, randen, grootte, enzovoort. Als u uw winkel wilt aanpassen met een beetje codering, raden we u aan een aantal van de volgende hulplijnen te bekijken:
- Hoe de knop Toevoegen aan winkelwagen aanpassen
- Hoe de winkelpagina bewerken
- stap voor stap
3) Shortcodes
De laatste methode die we zullen zien om een knop Nu Kopen toe te voegen is met shortcodes. Hoewel er geen shortcode is voor een quick buy-knop in WooCommerce, zijn er oplossingen om iets dergelijks te doen. Deze methode is handig als, bijvoorbeeld, u wilt een van uw producten te bevorderen op een blog post, kunt u een snelle aankoop optie artikel toe te voegen zonder deze te koppelen aan het product.
WooCommerce wordt geleverd met veel shortcodes die u overal op uw site kunt gebruiken. Het grote ding over het gebruik van shortcodes is dat je niet nodig om de core bestanden of iets te wijzigen. Kopieer en plak de shortcode waar u het wilt weergeven en dat is het.
Voeg toe aan winkelwagen shortcode
omdat er geen shortcode is voor een quick buy-knop, voegen we een knop Toevoegen aan winkelwagen en wijzigen we de URL om de gebruiker naar de kassa te leiden. Log eerst in op uw WordPress site en ga naar de content editor waar u de knop Toevoegen aan winkelwagen wilt weergeven. Hier, zult u de knop toe te voegen aan een van uw product review berichten bijvoorbeeld.
de Gutenberg editor wordt geleverd met het shortcode blok dus voeg het blok aan uw inhoud gebied. 
de shortcode die we zullen gebruiken voor de knop is:
u moet de ID vervangen door uw Product-ID. U kunt uw unieke product-ID halen uit de WooCommerce-producten sectie.
in ons geval is de Product-ID 10, dus we zullen de shortcode als volgt wijzigen:
in dit voorbeeld plak de shortcode in uw inhoudgebied en publiceer of update het bericht. 
dus wanneer u uw artikel van de frontend controleert, ziet u een stijlvolle knop waarmee uw klanten het product met ID=10 aan hun winkelwagentje kunnen toevoegen. 
U kunt de shortcode ook aanpassen met enkele attributen. Samen met de ID, de shortcode ondersteunt andere attributen zoals klasse, hoeveelheid, SKU, stijl, en Toon de prijs. U kunt bijvoorbeeld de knop Toevoegen aan winkelwagen wijzigen met een shortcode als deze:
schrijf eenvoudig de juiste waarden voor uw product in elk attribuut. Daarnaast kunt u de styling van de knop Aanpassen. Een voordeel van deze methode is dat u ook een add-to-cart knop in een van de widget gebieden kunt invoegen. 
Wijzig de URL om gebruikers naar de kassa te leiden
zodra u de shortcode plaatst, vergeet dan niet de URL van de winkelwagen te wijzigen om de gebruiker naar de kassa te leiden.
href=”http://yourdomain.com/checkout/?add-to-cart=10″
om dit te doen zijn er twee opties:
- in uw WP-dashboard, ga naar WooCommerce > Instellingen > producten > Algemeen. Hier, Vink De “inschakelen Ajax toevoegen aan winkelwagen knoppen op Archieven” optie en uitschakelen “omleiden naar de winkelwagen pagina na succesvolle toevoeging”.
- installeer Direct Checkout voor WooCommerce om de winkelwagenpagina over te slaan en om te leiden van de productpagina naar de kassa pagina.
probleemoplossing
als u de CSS-knop hebt gewijzigd en de wijziging niet in uw frontend wordt weergegeven, is het waarschijnlijk een probleem met betrekking tot de cache. Dus om het op te lossen, gewoon duidelijk uw browser cache en WordPress cache. Als de knop nog steeds niet verschijnt, controleer dan de code.
conclusie
al met al kan het toevoegen van een quick buy-knop aan uw WooCommerce-winkel u helpen om conversies te verhogen. Je hebt 3 verschillende manieren geleerd om dit te bereiken:
- Met een plugin
- programmatisch (codering)
- met shortcodes
de meest eenvoudige manier is door gebruik te maken van de Direct Checkout plugin. Met een paar klikken kunt u uw gebruikers van de productpagina naar de afrekenpagina leiden. Als u geen plugins wilt gebruiken, is de coderingsmethode een uitstekende keuze, maar vereist een aantal technische vaardigheden.
tot slot, een andere interessante optie om het checkout-proces te verkorten en conversie te stimuleren is het creëren van directe checkout-links op uw winkel. Voor meer informatie hierover kunt u onze stap-voor-stap handleiding raadplegen.
We hopen dat u deze handleiding nuttig vond en geleerd hebt hoe u een snelle aankoopknop kunt toevoegen in WooCommerce. Als je dat deed, overweeg dan om dit bericht te delen op sociale media.