Op zoek naar een manier om aangepaste velden toe te voegen aan WooCommerce-productpagina’s?

Of u nu gedetailleerde specificaties wilt toevoegen aan een WooCommerce-productpagina of alternatieve productvarianten wilt tonen met een klik op een knop, het toevoegen van aangepaste velden in WooCommerce neemt slechts enkele ogenblikken van uw tijd in beslag.

Daarna bent u in staat om alle delen van uw WooCommerce dashboard aan te passen en snel site-informatie op te nemen die meestal handmatige gegevensinvoer zou vereisen.

Voorbeelden van het gebruik van aangepaste velden voor WooCommerce

Wanneer kunnen aangepaste velden in WooCommerce nuttig zijn?

• Voor het toevoegen van extra productinformatie voor dingen zoals computers, waar je technische specificaties zoals RAM en rekenkracht zou kunnen laten zien.
• Promotieboodschappen die je snel kunt veranderen in iets anders.
• Unieke media-elementen die niet kunnen worden ingevoegd met behulp van de standaard WooCommerce-functies, zoals een extra video.
• Data en tijden voor als je een countdown, veiling of release datum voor een product hebt.
• Extra product opties, naast varianten, waar klanten doorheen kunnen kijken.
• Paragrafen om gedetailleerde instructies voor het gebruik van een artikel uit te leggen.
• Add-on aanbiedingen waarbij de gebruiker verschillende upsells gepresenteerd krijgt die het huidige product aanvullen. Voorbeelden hiervan zijn opzetborstels voor elektronische tandenborstels of verschillende bedels voor een armband.
• Alle ongebruikelijke of extra gegevens die u wilt opnemen op een productpagina die ofwel niet wordt ondersteund door WooCommerce of het is gemakkelijker in te vullen met aangepaste velden.

Hoe aangepaste velden toe te voegen in WooCommerce productpagina’s

In dit voorbeeld maken we een mock computerwinkel die laptops verkoopt. Het zou een aanzienlijke hoeveelheid tijd kosten om computerspecificaties in te typen voor elke nieuwe laptop, dus in plaats daarvan zullen we velden opnemen om die specificaties te selecteren op basis van de soorten computers die we verkopen.

Om aangepaste velden aan WooCommerce-producten toe te voegen, moet u de gratis Advanced Custom Fields-plugin op uw WordPress-site installeren. Vervolgens leest u hier hoe u deze instelt…

Hier ziet u hoe u stap voor stap aangepaste velden kunt toevoegen aan WooCommerce productpagina’s:

1. Maak een nieuwe veldgroep
2. Voeg uw aangepaste veld(en)toe
3. Configureer extra veldgroepinstellingen
4. Voeg informatie toe aan producten
5. Toon aangepaste veldinformatie op front-end

Maak een nieuwe veldgroep

In uw WordPress-dashboard gaat u naar het nieuwe tabblad Aangepaste velden. Klik vervolgens op Nieuw toevoegen naast Veldgroepen.

Noem een veldgroep. Bijvoorbeeld “Computervelden”. Een veldgroep is een verzameling velden die u voor één product of onderdeel van uw website hebt, zoals een lijst met specificaties die u op alle productpagina’s van laptops wilt laten verschijnen.

Voeg uw aangepaste veld(en)toe

Klik op de knop Veld toevoegen om een veld aan deze groep toe te voegen.

Maak een:

1. Veldlabel – voornamelijk voor uw eigen referentie.
2. Veldnaam – dient als de letters die u in uw eigen aangepaste code plaatst, of shortcode in ons geval. Je kunt dit laten staan als de standaard die de plugin genereert.
3. Veld Type – de opmaak die je voor dat veld maakt. Je kunt kiezen uit opties als datumselectors, selectievakjes, vervolgkeuzelijsten en keuzerondjes.

Je kunt ook enkele instructies voor jezelf of de ontwikkelaar plaatsen, samen met een specificatie of dit veld verplicht is of niet.

Als u werkt met een veld dat meerdere opties heeft (zoals keuzerondjes), moet u vervolgens uw veld Keuzes toevoegen. Dit zijn de selectieopties die u wilt weergeven op de achterkant van uw productpagina, zoals verschillende kernprocessors.

De rest van de instellingen is meestal optioneel, zoals de standaardwaarde, de lay-out en of u de waarde of het label wilt weergeven.

Wanneer u klaar bent met een veld of groep, klikt u op de knop Publiceren of Bijwerken om ervoor te zorgen dat het wordt opgeslagen.

Om meer velden aan uw groep toe te voegen, klikt u nogmaals op de knop Veld toevoegen.

Hier ziet het er uit met vier velden in deze groep voor:

• CPU
• Memory
• Operating System
• Release Date

Configure additional field group settings

Als de veldgroep klaar is, scrolt u naar de module Location. Hier bepaalt u waar u de veldgroep in uw WordPress-dashboard wilt laten verschijnen.

Zet het Post Type gelijk aan Product. Of, als u specifieker wilt zijn, kunt u ook een specifieke categorie producten kiezen.

Onder Instellingen, zorgt u ervoor dat de veldgroep Actief is. Hierdoor kunt u het op die productpagina’s zien en mogelijk de veldselecties aan uw klanten laten zien.

De stijl hangt af van uw eigen voorkeuren. Hetzelfde kan worden gezegd voor de positie, label plaatsing, en instructie plaatsing. Dat is allemaal persoonlijke voorkeur en hoe u uw backend wilt indelen. Bij twijfel, laat ze gewoon als standaard.

Stel het Ordernummer in als u meerdere veldgroepen op productpagina’s heeft. Hiermee bepaalt u de volgorde waarin de verschillende veldgroepen worden weergegeven.

U kunt ook een beschrijving instellen en bepaalde details op uw scherm verbergen.

Voeg informatie toe aan producten

Naar aanleiding hiervan navigeert u naar de editor voor een product waar u aangepaste velden wilt toevoegen.

Als alle instellingen correct zijn geconfigureerd, zou u de aangepaste velden onder het vak Productgegevens moeten zien.

In ons voorbeeld, als u een nieuwe productpagina voor een laptop wilt toevoegen, kunt u de CPU, het geheugen, het besturingssysteem en de releasedatum kiezen.

De informatie uit uw aangepaste velden op de voorkant weergeven

Om alles af te ronden, moet u de informatie uit uw aangepaste velden op de afzonderlijke productpagina aan de voorkant weergeven. U kunt deze informatie overal toevoegen, maar goede startplekken zijn in de lange of korte beschrijving van het product.

Om veldinformatie op de front-end weer te geven, gebruikt u de shortcode. Voeg de veldnaam toe tussen de aanhalingstekens:

U kunt de veldnaam voor elk veld vinden in de interface van de veldgroepeditor:

Om alles af te ronden, drukt u op de knop Publiceren of Bijwerken.

Wanneer u uw product opent op de front-end, zou u uw aangepaste velden moeten zien waar u de shortcodes hebt toegevoegd:

Heeft u vragen over hoe u aangepaste velden toevoegt?

Het is een prachtige optie om uw creativiteit uit te breiden en de vervelende taak van het maken van productpagina’s een beetje eenvoudiger te maken.

We begrijpen dat de Advanced Custom Fields-plugin een beetje een leercurve heeft, dus als u gedachten of vragen heeft over het toevoegen van aangepaste velden in WooCommerce, laat het ons dan weten in de opmerkingen hieronder!

U kunt ook onze volledige ACF tutorial bekijken om meer te leren over het gebruik van deze flexibele plugin.