Het aanbieden van kortingscodes aan uw klanten is een geweldige manier om verkopen te stimuleren en de betrokkenheid bij uw WooCommerce winkel te vergroten. Of het nu gaat om een korting, gratis verzending of een gratis cadeau, kortingscodes zijn een uitstekende manier om klanten aan te moedigen een aankoop te doen. Het invoerveld voor kortingscodes op de WooCommerce winkelwagenpagina kan echter vrij klein en krap zijn, wat leidt tot een minder ideale klantervaring.
Gelukkig is er een eenvoudige manier om het invoerveld voor kortingscodes te vergroten en de algehele klantervaring te verbeteren. Met een paar eenvoudige stappen kunt u snel en gemakkelijk het invoerveld voor kortingscodes op uw WooCommerce winkelwagenpagina vergroten, wat zorgt voor een gebruiksvriendelijkere ervaring voor uw klanten.
Introductie
Wanneer u veel WordPress-thema's installeert die beweren WooCommerce te ondersteunen, is een van de grote problemen (en een van mijn grootste ergernissen) dat niemand aandacht lijkt te besteden aan de grootte van het kortingscodeveld op de winkelwagenpagina.
Als u last heeft van een te kort en onleesbaar kortingscodeveld op uw winkelwagenpagina en u wilt er iets aan doen zodat mensen het kunnen gebruiken, dan bent u bij het juiste artikel beland!
De oplossing is relatief eenvoudig, het is slechts wat CSS en ik ga u laten zien hoe u de oplossing op een paar verschillende manieren kunt implementeren.
Hoe u een te kort invoerveld voor kortingscodes op uw winkelwagenpagina kunt oplossen
De eerste stap is om Google Chrome, Safari of Firefox te openen, eigenlijk elke moderne browser.
U wilt met de rechtermuisknop op dat kortingscodeveld klikken en vervolgens op Inspecteren klikken.
Wanneer u op Inspecteren klikt, opent u de Ontwikkelaarstools, waarmee u elementen op de pagina kunt inspecteren.
Als u dit voor de eerste keer doet, hoeft u zich geen zorgen te maken, ik zal u precies laten zien wat u vervolgens moet doen.
Het opent een invoerveld voor kortingscodes zoals dit:
De stijlen zijn wat we willen veranderen.
Laten we een beetje experimenteren om er zeker van te zijn dat we meteen een nieuwe CSS-regel maken met de juiste breedte. Het goede is dat als u wijzigingen aanbrengt in dit vak van de Ontwikkelaarstools, dit tijdelijk op de site wordt weergegeven (totdat u de pagina opnieuw laadt), zodat u kunt testen wat het beste werkt qua breedte.
Klik op de knop Nieuwe stijlregel:
Hernoem vervolgens de gemarkeerde tekst naar het volgende:
.woocommerce-cart table.cart td.actions input#coupon_code
Nadat u deze tekst hebt ingevoerd, drukt u op de TAB-toets op uw toetsenbord, niet op Enter. Als u per ongeluk op Enter drukt, is dat niet erg, klik gewoon tussen de accolades { } en er wordt een nieuwe regel tussen de accolades toegevoegd.
Voeg de regel als volgt toe:
Experimenteer met de breedtewaarde (de 200px in de screenshot) totdat u tevreden bent met hoe het kortingscodeveld er op het scherm uitziet. U ziet dat de webpagina wordt bijgewerkt wanneer u de waarde wijzigt.
Als u tevreden bent, kopieert u de tekst en plakt u deze in Kladblok (Windows) of Teksteditor (Mac) ter beveiliging.
.woocommerce-cart table.cart td.actions input#coupon_code {
width: 200px;
}
Dit is de CSS-code die we hebben gegenereerd en nu hoeven we deze alleen nog maar permanent op de site te installeren.
De Coupon Entry Box Fix Permanent Installeren
Als je enige ervaring hebt met het bewerken van CSS-bestanden, weet je waarschijnlijk dat er een style.css-bestand is in de map van elk thema dat je installeert.
Idealiter zou je dit moeten overschrijven met een child theme en je wijzigingen daar installeren.
Maar als je er geen hebt, is er nog een andere manier en die omvat niet het bewerken van CSS-bestanden die mogelijk worden overschreven wanneer je het thema bijwerkt.
Er is een plugin genaamd Simple Custom CSS and JS. Met deze plugin kun je al die kleine CSS- en javascript-aanpassingen bijhouden die je nodig hebt voor je thema, zonder het thema zelf te hoeven bewerken. Het is erg handig.
Installeer het door naar Plugins -> Nieuwe toevoegen te gaan en ernaar te zoeken. Installeren & activeren.
Je krijgt dan een nieuw menu op de backend:
Klik op Aangepaste CSS toevoegen. Dit opent een nieuw venster waar je de code kunt invoeren die je eerder hebt gegenereerd.
Geef het een naam zoals "Cart Coupon Box Width Fix" zodat je in één oogopslag kunt zien waar het later voor was en voeg je code toe in het daarvoor bestemde vak.
Het zou er zo uit moeten zien:
En dat is alles!
Dus waarom was dit zo belangrijk?
Nou, coupons zijn een van je beste marketingwapens en zonder de visuele aanwijzingen voor hoe je die coupons kunt gebruiken, zullen je klanten gedwongen worden om te zoeken naar waar ze de code kunnen invoeren.
Ik heb door de jaren heen waargenomen dat klanten behoorlijk lui kunnen zijn als het op dit soort dingen aankomt en ze geven gemakkelijk op. Hoe duidelijker je iets maakt, hoe beter je resultaten zullen zijn voor die actie.
Dus in dit artikel hebben we belangrijke concepten aangepakt om je couponinvoervak te repareren:
- Hoe u een te kort invoerveld voor kortingscodes op uw winkelwagenpagina kunt oplossen
- De Coupon Entry Box Fix Permanent Installeren
Dus ga ervoor en probeer deze oplossing uit, je kunt het!
