Aanvraagwinkelwagen in WooCommerce

Met versie 1.5.0 hebben we de nieuwe aanvraagwinkelwagen geïntroduceerd. Daarmee gebruiken je klanten de standaardfunctie ‘In winkelwagen’ van WooCommerce, maar zonder afrekenproces.

In plaats van het afrekenproces zien je klanten op de winkelwagenpagina’s een knop “Aanvraag versturen”, waarmee ze je een bericht sturen met alle producten in hun winkelwagen.

Knop ‘Toevoegen aan aanvraagwinkelwagen’

Toon de knop ‘Toevoegen aan aanvraagwinkelwagen’ eenvoudig bij losse producten. Ga naar onze plugininstellingen > Enquiry Cart, schakel de functie in en stel een eigen knoptekst in.

Aanvraagwinkelwagen en formulier

De aanvraagwinkelwagen bevat de producten die de gebruiker voor zijn aanvraag heeft gekozen. Hij toont productgegevens zoals naam, aantal en prijs (indien ingeschakeld). Daarnaast kun je producten verwijderen, het aantal bijwerken en, het belangrijkste, een aanvraag versturen.

Het formulier dat opent als je op de knop klikt, kan elke tekst of shortcode bevatten. Wij gebruiken hier een CF7-formulier met een tekstvak “products”. Onze plugin zet de producten uit de winkelwagen automatisch in dat tekstvak.

Instellingen van de WooCommerce-aanvraagwinkelwagen

Voor de nieuwe functie zijn diverse opties beschikbaar, zoals aan- en uitzetten en eigen knop- en winkelwagenteksten. Je kunt ook kiezen of de aanvraagmodal opent, waarin je de CF7-shortcode gebruikt, of dat je naar een heel andere pagina linkt. Daarnaast toon of verberg je prijs, SKU of aantal in de aanvraagwinkelwagen.

Gebruik je een andere formulierplugin, dan moet je misschien de veldnaam voor producten in deze instellingen aanpassen. Inspecteer je formulier met de Chrome-inspector en zoek het name-veld. Vul die waarde in bij Products Field Name.

Hieronder een voorbeeld met Contact Form 7. Heel belangrijk is het veld “products”: we zetten de winkelwagenitems alleen in een veld met de naam products.

<p>Your Name*<br />
    [text* your-name] </p>
<p>Your E-Mail*<br />
    [email* your-email] </p>
<p>Subject*<br />
    [text* your-subject]</p>
<p>Products*<br />
    [textarea* products]</p>
<p>Your Message<br />
    [text your-message] </p>
<p>[submit "Send"]</p>