WooCommerce aanpassen: aangepaste velden toevoegen aan uw eenvoudige producten

Misschien ben je je e-commercewebsite helemaal opnieuw aan het opzetten en wil je verschillende soorten producten verkopen. Misschien heb je de afgelopen jaren een webshop gehad en wil je je horizon verbreden en nieuwe producten aanbieden. Wat je ook naar deze tutorial heeft gebracht, feit is dat je WooCommerce moet aanpassen. En je vindt alles wat je moet weten met Bright Vessel!

WooCommerce is het populairst WordPress-plug-in voor e-commerce en de voorkeursoplossing voor veel verkopers. Waarom? Het is gratis en bovendien zeer veelzijdig, omdat je WooCommerce moeiteloos kunt aanpassen aan je behoeften. Hoewel de plugin een reeks vaste opties biedt, kun je er achter de schermen veel mee doen.

Veel van onze klanten bij Bright Vessel zijn op zoek naar een unieke e-commerceoplossing die rekening houdt met de specifieke kenmerken van hun bedrijf. Dankzij onze ruime ervaring met WooCommerce kunnen we je helpen je e-store zo in te richten dat deze perfect aansluit bij jouw behoeften. Laten we met dat in gedachten aan de slag gaan!

Wat je nodig hebt WooCommerce aanpassen

Hieronder vindt u de basisinstellingen die u nodig hebt om WooCommerce aan te passen:

• Uw favoriete desktopbesturingssysteem, of dit nu MacOS, Microsoft Windows, Linux-distributies, etc. is.
• Hypertext Preprocessor (PHP) minimaal 5.6.25.
• HTTP-servers Apache of Nginx.
• MySQL 5.6.33.
• Een bijgewerkte WordPress, of in ieder geval versie 4.7.
• De WooCommerce plugin is minimaal versie 3.9.
• De geïntegreerde ontwikkelomgeving (IDE) van uw keuze.

WooCommerce aanpassen om gepersonaliseerde velden toe te voegen

Dat gezegd hebbende, aangepaste velden in WooCommerce verschillen enigszins van die in WordPress. In plaats van te werken met metadata op berichten, zoals WordPress dit definieert, noemen we "aangepaste velden" een echt tekstveld. Ga in het WooCommerce-menu naar het tabblad Gekoppelde producten van het type Eenvoudige producten.

WooCommerce API - Hooks

Er is een cruciaal WordPress-concept dat we moeten bespreken voordat we ingaan op het aanpassen van WooCommerce: Hooks. Volgens WPBeginner Hooks zijn "functies die van toepassing zijn op een actie of filter in WordPress. Acties en filters in WordPress zijn functies die u kunt aanpassen door thema- en pluginontwikkelaars om de standaardfunctionaliteit van WordPress te wijzigen."

WooCommerce biedt een API waarmee gebruikers kunnen inhaken op de levenscycli van de pagina's. De WooCommerce API verschilt echter enigszins van de metadata van WordPress. Er zijn twee belangrijke hooks die je moet kennen:

• Woocommerce_product_options_grouping. Deze hook dient om een beschrijving en tekstinvoer te creëren die onze waarden accepteert.
• woocommerce_process_product_meta. Deze functie wordt gebruikt om de waarde van de tekstinvoer te verwerken, te zuiveren en op te slaan.

Om deze hooks te gebruiken, moet u ze definiëren en hun functionaliteit aanpassen.

Functionaliteit aanpassen

• Definieer een klasse met een since-variabele als instantiegegevens. Deze variabele representeert de ID van het invoerveld zoals die aan de gebruiker wordt getoond:

U kunt nu de bovenstaande hooks gebruiken door een initialisatiefunctie toe te voegen die twee aangepaste functies op de hook registreert.

Tekstinvoerveld

Om een tekstinvoerveld toe te voegen, moet u eerst een functie toevoegen die is gekoppeld aan woocommerce_product_options_grouping:

Om de functie te implementeren, moet u het volgende doen:

• Maak een unieke ID om het tekstveld te identificeren. Gebruik de instantiegegevens in de constructor.
• Gebruik een label om een beschrijving aan het invoerveld toe te voegen.
• Indien gewenst, kunt u een tijdelijke aanduiding opgeven.
• Als het handiger is, kunt u een tooltip weergeven wanneer de gebruiker met de muis over een pictogram beweegt.
• Als u tekst aan de tooltip wilt toevoegen, kunt u de optie voor een beschrijving gebruiken.

De bovenstaande informatie wordt in een bijbehorende array geplaatst en komt vervolgens in woocommerce_wp_text_input terecht. Deze API-functie voor het aanpassen van WooCommerce genereert een tekstelement met de informatie die u zojuist hebt opgegeven.

Informatie opslaan

Om de bovenstaande wijzigingen op te slaan, moet u het volgende doen:

• Voeg deze code toe aan de init-methode:
• Controleer of er meerdere nonce-waarden aanwezig zijn; anders moet u als veiligheidsmaatregel false retourneren. U kunt nonce-waarden detecteren door te kijken naar wat WooCommerce specifiek in de broncode vermeldt.
• In de $_POST-verzameling die overeenkomt met de gebruikersinvoer, de gegevens opschonen.
• Sla de eerder vastgelegde informatie op in de postmetagegevenstabel.

Informatie weergeven op de front-end

Om informatie op de front-end weer te geven, moet je een nieuwe klasse aanmaken. Je hebt specifiek het volgende nodig:

Een tekstveld-ID en het initialiseren ervan in de constructor.

• Een initialisatiefunctie om de front-end te koppelen aan de eerder gemaakte code.
• Om de werkelijke waarde weer te geven.

De plug-in starten

Je bent bijna klaar met deze tutorial over het aanpassen van WooCommerce! De laatste stap is het opzetten van een bootstrapbestand om de plugin met alle recente wijzigingen te starten. Hier is de code om te starten:

Een paar extra opmerkingen:

• Hier voegt u de afhankelijkheden toe.
• Controleer of de functie werkt en het dashboard wordt weergegeven. Zo ja, dan is het juiste onderdeel van de plugin correct geladen; zo niet, dan is de standaardweergave correct.

Tot slot

Nu je weet hoe je WooCommerce kunt aanpassen om je velden aan eenvoudige producten toe te voegen, ben je op weg om precies de diensten te leveren die je wilt. Je kunt meer informatie vinden WooCommerce-zelfstudies op onze blog. Als je op zoek bent naar experts die weten hoe je met deze populaire e-commerce plugin om moet gaan, Neem contact met ons op voor meer informatie!