Werken met variabele producten in WooCommerce

Bron

Stel je een scenario voor waarin je weken op de perfecte website met WooCommerce voor een nieuwe klant hebt doorgebracht. Nu wil je de vruchten van je arbeid laten zien. De klant verkoopt sinds een paar weken producten en heeft een aantal nieuwe toevoegingen gecreëerd. Zoals veel van hen – een goede reden om greep te krijgen op variabele producten in WooCommerce.

Hierdoor kunt u individuele aanbiedingen voor exact hetzelfde product vermijden met slechts kleine variaties zoals kleur en maat.

Het is mij overkomen, en als je al een tijdje WooCommerce-sites voor klanten bouwt, is het jou waarschijnlijk ook overkomen. Als u bijvoorbeeld een productpagina moet verlaten om door meerdere aanbiedingen voor hetzelfde product in verschillende maten en kleuren te navigeren, is dit gewoon een slechte ervaring voor shoppers.

Bespaar tijd om online te gaan

Met GoDaddy Managed WordPress eCommerce Hosting bespaart u tijd om online te gaan. Het bevat de functies om u te helpen met de strategieën die we gaan behandelen — het gaat niet alleen om het verkrijgen van een domein en hosting.

Dit krachtige platform dat is geoptimaliseerd voor WordPress, bevat ook tools voor beveiliging, verzending, betalingen en siteprestaties.

Zodra uw WooCommerce-winkel operationeel is, is het eenvoudig om bestellingen te volgen met aanpasbare sequentiële ordernummering, de winstgevendheid in de gaten te houden met native COGS-tracking en de winkelprestaties te volgen met behulp van geavanceerde en geïntegreerde Google Analytics.

De meerderheid van jullie die dit al een tijdje doen, weten al dat WooCommerce een oplossing biedt. Ingebouwd is de mogelijkheid om standaard variabele producten te maken, waardoor we de mogelijkheid hebben om individuele productvermeldingen te maken die meerdere kenmerken hebben, zoals kleur en maat.

Met variabele producten kan een shopper kiezen tussen opties voor een product vanaf één pagina.

Omdat deze variabele producten worden weergegeven in nogal matte vervolgkeuzelijsten, kunnen ze standaard behoorlijk saai zijn. Om het probleem nog erger te maken, willen sommige klanten vermijden om variabele producten te maken en te bewerken, omdat ze dit een grotere uitdaging vinden dan een eenvoudig product. Om een goede meerderheid van die klanten aan boord te krijgen, zullen we wat extra werk moeten verzetten tijdens de vroege ontwikkelingsstadia.

Door dit te doen, kunnen we de weg vrijmaken voor een geweldige winkelervaring voor de klanten van uw klant. Als ze er goed uitzien, zie je er goed uit. Laten we graven.

Variabele producten maken in WooCommerce

Om een variabel product in WooCommerce te maken, moeten we eerst enkele attributen hebben om mee te werken. Vervolgens maken we termen voor die attributen. U kunt een attribuut zien als een ouder (kleur) en termen als de kinderen (rood, blauw, groen). Na het instellen van de belangrijkste attributen en het configureren van termen kunnen we vervolgens een daadwerkelijk variabel product maken. Hier is hoe.

1. Ga vanuit het beheerdersdashboard van WordPress met de muis over Producten in het menu aan de linkerkant en klik op Kenmerken .
2. Vul de velden in voor de attributen die u gaat maken (bijvoorbeeld kleur). U kunt het invullen van het slug-veld overslaan, omdat het gewoon wordt gevuld met alles wat u in het veld Naam invoert. Vergeet niet het vakje Archief inschakelen aan te vinken als u dat kenmerk later in filters wilt weergeven. Aangepaste volgorde is de standaardinstelling voor de vervolgkeuzelijst Standaard sorteervolgorde , wat prima is als u de volgorde wilt wijzigen waarin de kenmerken op productpagina’s worden weergegeven.
   
3. Klik op de knop Attribuut toevoegen.
4. Nadat u op de knop Attribuut toevoegen hebt geklikt, ziet u het kenmerk aan de rechterkant van die pagina verschijnen. Klik helemaal rechts onder dat kenmerk op Voorwaarden configureren .
5. Deze pagina zal lijken op het hoofdattribuut dat is gemaakt, maar dit zijn termen. Vul het veld Naam in. De velden voor slug en beschrijving zijn optioneel, hoewel het veld Beschrijving van pas kan komen bij kruisverwijzingen naar twee totaal verschillende producten die beide dezelfde term hebben. Rode shirts of rode horloges bijvoorbeeld.
6. Klik op de knop Nieuwe toevoegen (wat het kenmerk ook is). U ziet de nieuwe term aan de linkerkant van die pagina verschijnen. Voeg hier zoveel termen toe als u nodig heeft voordat u doorgaat naar de volgende stap.
   
7. Beweeg uw muis over Producten vanuit het WordPress-beheerdersdashboard en klik op Nieuw toevoegen .
8. Net onder het hoofdveld met productbeschrijving ziet u het gebied Productgegevens met een vervolgkeuzelijst in de linkerbovenhoek. Klik erop en selecteer Variabel product .
9. Voordat je variaties in WooCommerce kunt maken, moet je eerst enkele attributen toewijzen. Klik hiervoor op Kenmerken in het gedeelte met verticale tabbladen van het gedeelte Productgegevens , selecteer de kenmerken die u wilt gebruiken in het vervolgkeuzemenu en klik vervolgens op de knop Toevoegen.
   
10. U ziet een optiepaneel geopend voor het kenmerk net onder de vervolgkeuzelijst Aangepaste productkenmerken. Zorg ervoor dat het optievak Gebruikt voor variaties is aangevinkt.
11. Het veld Waarde(n) is nu leeg. U kunt in het lege veld klikken om een keuze te maken uit een lijst met termen die voor het attribuut kunnen worden gebruikt. U kunt ook op de knop Alles selecteren net onder het lege veld klikken om alle termen die u gebruikt in één keer te selecteren.
    
12. Voeg hier zoveel attributen en waarden/termen toe als nodig zijn en klik op de knop Attributen toevoegen.
13. Klik op Variaties net onder het tabblad Kenmerken waarmee u net werkte.
14. U ziet een vervolgkeuzelijst met de tekst Variatie toevoegen . U kunt eenvoudig op de knop Go rechts van dat veld klikken om individuele variaties handmatig toe te voegen of op de vervolgkeuzelijst klikken, Variaties maken van alle attributen selecteren en vervolgens op de knop Go klikken. Klik gewoon op OK wanneer u wordt gevraagd of u het zeker weet. Klik nogmaals op OK wanneer u wordt geïnformeerd over het aantal variaties dat is gemaakt.
15. U ziet nu een lijst met varianten die voor dit product zijn gemaakt. Elk moet op dezelfde manier worden geconfigureerd als een eenvoudig product, maar afzonderlijk. Klik gewoon op een gebied naast de optie termijn/waarden, zoals prijs, verzending, voorraadstatus en beschrijving. Als de producten er anders uitzien (zoals bij kleuren), is het een goed idee om hier ook een afbeelding voor elke variatie toe te voegen.
    
16. Nadat u de informatie voor elke variatie heeft toegevoegd, klikt u onderaan op de knop Wijzigingen opslaan.

Een korte opmerking hier. Je kunt eenvoudig een variabel product rechtstreeks vanaf het tabblad met attributen van een WooCommerce-productpagina maken door daar direct een attribuut te maken. Het probleem is dat die kenmerken alleen kunnen worden gebruikt voor varianten van het product waarin het is gemaakt. Het werkt, maar is niet erg dynamisch en niet erg handig voor bestemmingspagina’s, filters of navigatie, die we zullen bespreken in een moment.

Het ideale thema vinden in WooCommerce

Dat is eigenlijk alles om een variabel product te maken, en het werkt. Voor deze demo’s gebruik ik alleen het gratis Storefront-thema van WooCommerce, dat geen extra functionaliteit bevat voor variabele productvermeldingen. Om dat te doen hebben we een plug-in nodig om onze variabele productdisplays te verbeteren of een thema met ingebouwde functionaliteit. Ik heb het over stalen. Hieronder ziet u een screenshot van hoe ons variabele product er standaard uitziet.

U zult merken dat alle gewenste functionaliteit aanwezig is, zoals verschillende prijzen op basis van variaties van dat product en de mogelijkheid voor de shopper om te kiezen tussen kleuren en bandmaten. Het ziet er gewoon niet geweldig uit. Met stalen kunnen variabele productweergaven aanzienlijk worden verbeterd met functies zoals het omzetten van kleurvariaties in klikbare kleuren of formaten in tekstknoppen in plaats van vervolgkeuzelijsten.

Er is meer dat je kunt doen – maar je begrijpt wat ik bedoel.

Idealiter zou u deze functionaliteit willen overwegen bij het winkelen voor een nieuw thema. Als uw klant al een thema heeft dat ze willen gebruiken en het biedt geen opties voor stalen, dan moet u een plug-in vinden of er zelf een maken. De staalplug-ins die ik heb kunnen vinden, zijn enigszins prijzig, wat al dan niet een probleem kan zijn, afhankelijk van het project. Er is één plug-in op de WooCommerce Marketplace die zou werken, maar die kost $ 99 per jaar. Jakkes!

Ik vond een andere vermeld op WordPress genaamd Variation Swatches For WooCommerce, dat is slechts $ 49 per jaar voor één domein/website. Het is ook een freemium-plug-in, dus de meest elementaire functies kunnen worden gebruikt zonder iets te betalen. Ze hebben meer dan 200.000 actieve installaties met voornamelijk 5-sterrenbeoordelingen, dus niet te armoedig. Hieronder ziet u een screenshot van hoe ons variabele product eruitziet met deze plug-in geïnstalleerd en geconfigureerd met alleen de gratis opties.

Om deze plug-in te installeren, gaat u naar Plug-ins > Nieuwe toevoegen en typt u “staal” in het zoekvak. Variatiestalen voor WooCommerce was het eerste resultaat toen ik ernaar probeerde te zoeken. Installeer gewoon op dezelfde manier als elke andere plug-in. Na een succesvolle installatie wordt u begroet met het instellingenscherm. Klik op het tabblad Tutorials in de linkerbovenhoek van die pagina voor een paar snelle inleidingen om u op weg te helpen.

Extra bonussen bij het gebruik van variabele producten in WooCommerce

Variabele producten zijn niet alleen een leuke manier om shoppers al hun opties voor een product op één pagina te geven. Variabele producten kunnen ook worden gebruikt om de navigatie in de archiefpagina’s van de winkel of op bestemmingspagina’s te verbeteren. In mijn artikel over het maken van prachtige WooCommerce-pagina’s met alleen de gratis storefront en Gutenberg-editor, heb ik de secties Product toevoegen aangeraakt. Welnu, u kunt hetzelfde doen met attributen. Dat artikel gaat in detail over hoe je dit kunt bereiken, dus ik zal niet aan een dood paard trekken.

Stelt u zich eens voor dat uw klant een Saint Patrick’s Day-uitverkoop heeft en dat ze al hun groengekleurde producten willen laten zien. Door het widgetblok WooCommerce Products by attribute te gebruiken, is het vrij eenvoudig om sommige of al deze producten aan de startpagina of een speciale laadpagina toe te voegen. Maar wacht. Er is meer!

Variabele productkenmerken kunnen ook worden gebruikt in de reguliere websitenavigatie. Bekijk de sectie genaamd Superchargen van de zijbalk in het artikel Top 4 WooCommerce-tips en -trucs voor betere productzichtbaarheid om een volledig overzicht te krijgen van hoe u de navigatie in de zijbalk kunt verbeteren met behulp van attributen voor variabele producten.

Hoewel dit standaard een aantal krachtige navigatiefuncties biedt, kan dit zelfs worden verbeterd met behulp van plug-ins zoals Ajax-Enabled Enhanced Layered Navigation van WooCommerce. Nogmaals, dit is een betaalde plug-in. In plaats van het gebruik van dropdown boxes zoals in het voorbeeld hierboven, maakt dit type plug-in het mogelijk om attributen te gebruiken voor zaken als kleuren en grootte voor websites met veel variabele producten.

Het zet in feite attributen om in kleur- en tekststalen voor gebruik in widgetgebieden zoals de zijbalk van een website. Het is meer een nice to have dan een must-have, maar hey, het is ook een leuke optie.

Een paar tips om uw klanten aan boord te krijgen

Zoals aan het begin van dit artikel vermeld, is een van de belangrijkste nadelen van het gebruik van variabele producten dat het niet de gemakkelijkste optie is. Als u veel klanten heeft, wilt u dat ze idealiter zelf nieuwe variabele producten kunnen maken. U kunt dit veel redelijker voor hen maken door te vragen welke kenmerken hun producten zullen delen. Maak productkenmerken tijdens de eerste opbouw. Op deze manier kan uw klant zijn opties rechtstreeks vanaf de productpagina’s kiezen in plaats van te proberen door WordPress te navigeren om productkenmerken en voorwaarden in te stellen.

Dat is natuurlijk veel heen en weer.

Natuurlijk, het is nog steeds iets moeilijker voor hen om te onthouden dat ze een nieuw product als variabele moeten instellen, maar we hebben het alleen over een vervolgkeuzelijst en twee zijtabbladen — ervan uitgaande dat je het voetenwerk hebt gedaan bij het maken van de attributen en termen die zijn meest waarschijnlijk worden gebruikt. Het feit dat hun website die mooie stalen en verbeterde navigatie zal bevatten, zal hen helpen om variabele producten te maken wanneer dat zinvol is. In het geval dat ze niet worden beïnvloed… Nou, dat is meer werk waar je voor betaald wordt, en de website ziet er nog steeds geweldig uit en werkt nog steeds.

Het bericht Werken met variabele producten in WooCommerce verscheen eerst op GoDaddy Blog.