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 the most popular WordPress-plug-in for eCommerce and the preferred solution for a lot of sellers. Why? It’s free and also highly versatile, as it’s effortless to customize WooCommerce to fit your needs. While the plugin offers a series of set options, there’s a lot you can do from its backstage.

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 hebtCustomize WooCommerce

Below, you’ll find the basic setup you’ll need to customize WooCommerce:

• 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

There’s a critical WordPress concept we need to get out of the way before delving into how to customize WooCommerce: Hooks. According to WPBeginner, Hooks are “functions applicable to an Action or a Filter in WordPress. Actions and Filters in WordPress are functions that you can modify by theme and plugin developers to change the default WordPress functionality.”

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:

To implement the function, you should:

• 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.
• If it makes things more comfortable, you can display a tooltip when the user hovers the mouse over an icon.
• 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

To save the changes above, you’ll need to:

• 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

To render information on the front-end, you’ll need to create a new class. You’ll specifically need:

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:

A couple of extra notes:

• 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

Now that you know how to customize WooCommerce to add your fields to simple products, you’re on your way to providing exactly the services you want to deliver. You can find more WooCommerce-zelfstudies on our blog. If you’re looking for experts who know how to work around this popular eCommerce plugin, Neem contact met ons op for more information!