WooCommerce Hooks: een uitgebreide gids voor beginners en ontwikkelaars

Ben jij een WooCommerce ontwikkelaar en wil je je webshop naar een hoger niveau tillen? Wilt u de functionaliteit en het uiterlijk van uw winkel aanpassen zonder de kernbestanden te wijzigen?

WooCommerce hooks zijn de oplossing.

Hooks zijn krachtige tools waarmee u uw WooCommerce-winkel kunt afstemmen op uw unieke zakelijke behoeften. Hiermee kunt u functies toevoegen, wijzigen of verwijderen op belangrijke punten in het WooCommerce-proces. Deze flexibiliteit stelt u in staat om een gepersonaliseerde winkelervaring voor uw klanten te creëren.

In deze uitgebreide gids duiken we diep in de wereld van WooCommerce-hooks. We onderzoeken wat hooks zijn, hoe ze werken en hoe u ze kunt gebruiken om uw online winkel te verbeteren.

Maar laten we eerst beginnen met de basis.

Wat zijn WooCommerce hooks?

WooCommerce-hooks, gebouwd op dezelfde basis als WordPress-hooks, zijn een manier voor ontwikkelaars om aangepaste code in te voegen op specifieke punten in de WooCommerce-plug-in. Hiermee kunt u functionaliteit toevoegen, verwijderen of wijzigen zonder de kernbestanden van de plug-in rechtstreeks te bewerken. Dit betekent dat u uw winkel veilig kunt aanpassen terwijl u WooCommerce nog steeds kunt updaten wanneer er nieuwe versies worden uitgebracht.

Lees ook: Pas uw WooCommerce-winkel aan in 5 stappen – Bluehost Blog

Er zijn twee soorten hooks in WooCommerce: action hooks en filter hooks. Met actiehaken kunt u functionaliteit toevoegen of wijzigen, terwijl u met filterhaken gegevens kunt wijzigen voordat deze worden weergegeven of opgeslagen.

Belang van hooks in WooCommerce ontwikkeling

Hooks zijn een essentieel onderdeel van de ontwikkeling van WooCommerce. Ze bieden een manier om de functionaliteit van uw winkel aan te passen aan uw specifieke behoeften. Of u nu aangepaste velden wilt toevoegen aan de afrekenpagina, het formaat van de producttitel wilt wijzigen of de manier waarop prijzen worden weergegeven wilt wijzigen, hooks maken het mogelijk.

Het gebruik van hooks kan je ook helpen om je aanpassingen gescheiden te houden van de kern WooCommerce-bestanden. Dit maakt het gemakkelijker om uw code te onderhouden en zorgt ervoor dat uw wijzigingen niet worden overschreven wanneer u de plug-in bijwerkt.

Hoe WooCommerce hooks werken

Om hooks effectief te gebruiken in uw WooCommerce-winkel, moet u eerst hun structuur begrijpen en hoe ze onder de motorkap werken. In dit gedeelte wordt dieper ingegaan op de anatomie van actie- en filterhaken, worden hun verschillen uitgelegd en hoe ze omgaan met uw aangepaste code.

Actie haken

Met actiehooks kun je aangepaste functies uitvoeren op specifieke punten tijdens het laden van de WooCommerce-pagina. Ze geven u de mogelijkheid om functionaliteit toe te voegen of aan te passen zonder de kernbestanden rechtstreeks te bewerken.

Wanneer een action hook wordt aangetroffen in de code van WooCommerce, wordt deze geactiveerd en voert deze alle functies uit die erin zijn “gehaakt” met behulp van de functie add_action(). Actiehaken geven geen waarden terug; Ze stellen je gewoon in staat om je eigen code uit te voeren wanneer ze worden geactiveerd.

De basissyntaxis voor het toevoegen van een functie aan een action hook is:

add_action( 'hook_name', 'your_function_name', priority, accepted_args );

• ‘hook_name‘ is de naam van de actiehaak waarop je je wilt richten

• ‘your_function_name‘ is de naam van de aangepaste functie die je hebt geschreven om uit te voeren wanneer de haak afgaat

• Prioriteit is een geheel getal dat de volgorde bepaalt waarin uw functie wordt uitgevoerd als meerdere functies aan dezelfde actie zijn gekoppeld. Lagere getallen komen overeen met eerdere uitvoering. De standaardprioriteit is 10

• accepted_args is het aantal argumenten dat uw functie accepteert. Dit is optioneel en staat standaard op 1

Hier volgt een eenvoudig voorbeeld van het gebruik van de functie add_action():

function my_custom_function() { 
    // Your custom code here 
} 
add_action( 'wooCommerce_before_main_content', 'my_custom_function' ); 

In dit voorbeeld wordt de my_custom_function() uitgevoerd wanneer de actiehaak ‘wooCommerce_before_main_content‘ wordt geactiveerd. Dit is meestal vlak voordat het hoofdinhoudsgebied van een WooCommerce-pagina wordt geladen.

Enkele veel voorkomende WooCommerce-actiehaken zijn:

• ‘wooCommerce_before_shop_loop‘: Brandt voor de productlus op archiefpagina’s

• ‘wooCommerce_before_single_product‘: Brandt voor de inhoud van de afzonderlijke productpagina

• ‘wooCommerce_after_add_to_cart_form‘: Brandt na het formulier Toevoegen aan winkelwagentje op productpagina’s

• ‘wooCommerce_checkout_order_processed‘: Branden nadat een bestelling is verwerkt

Filter haken

Filterhooks daarentegen stellen je in staat om een waarde te manipuleren en terug te sturen voordat deze aan de front-end wordt weergegeven of in de database wordt opgeslagen. Ze geven je de mogelijkheid om WooCommerce-producten direct aan te passen en aan te passen.

Wanneer een filterhaak wordt aangetroffen, geeft deze een waarde door alle functies die erin zijn gehaakt met behulp van de functie add_filter(). Elke functie heeft dan de mogelijkheid om de waarde te wijzigen en terug te geven, die vervolgens wordt doorgegeven aan de volgende functie die in het filter is gehaakt. De uiteindelijke gewijzigde waarde wordt vervolgens gebruikt door WooCommerce.

De basissyntaxis voor het toevoegen van een functie aan een filterhaak is vergelijkbaar met add_action():

add_filter( 'hook_name', 'your_function_name', priority, accepted_args ); 

De parameters werken op dezelfde manier als voor add_action(). Het belangrijkste verschil is dat uw aangepaste functie de waarde die wordt gefilterd als parameter moet accepteren en de gewijzigde waarde moet retourneren.

Hier volgt een eenvoudig voorbeeld van het gebruik van de functie add_filter():

function my_custom_price( $price, $product ) { 
    // Modify the price here 
    return $modified_price; 
} 
add_filter( 'wooCommerce_get_price', 'my_custom_price', 10, 2 );

In dit voorbeeld is de functie my_custom_price() gekoppeld aan de filterhaak ‘wooCommerce_get_price‘. De huidige productprijs en het productobject worden als parameters geaccepteerd, de prijs wordt gewijzigd en de nieuwe waarde wordt geretourneerd. WooCommerce gebruikt dan deze aangepaste prijs in plaats van het origineel.

Enkele veel voorkomende WooCommerce-filterhaken zijn:

• ‘wooCommerce_product_get_price‘: Filtert de productprijs

• ‘wooCommerce_product_title‘: Filtert de producttitel

• ‘wooCommerce_checkout_fields‘: Filtert de afrekenvelden

• ‘wooCommerce_add_to_cart_redirect‘: Filtert de omleidings-URL nadat een product aan de winkelwagen is toegevoegd

Als je begrijpt hoe actie- en filterhooks werken en hoe je je eigen functies erin kunt haken, ontgrendel je een wereld aan aanpassingsmogelijkheden voor je WooCommerce-winkel.

U kunt de kernfunctionaliteit wijzigen, nieuwe functies toevoegen en de gebruikerservaring aanpassen aan uw unieke zakelijke behoeften.

Hoe hooks te vinden en te gebruiken in WooCommerce

WooCommerce heeft meer dan 300 actie- en filterhaken beschikbaar in de kernbestanden. Het vinden van de juiste haak om te gebruiken kan een uitdaging zijn, vooral voor beginners.

Een manier om hooks te vinden is door in de WooCommerce template bestanden te kijken. Veel van de sjabloonbestanden, zoals ‘single-product.php‘ en ‘archive-product.php‘, bevatten actiehaken die u kunt gebruiken om uw eigen inhoud in te voegen.

Je kunt ook hooks vinden door te zoeken in de WooCommerce-documentatie of door een plug-in zoals Simply Show Hooks te gebruiken, die de hooks op je WooCommerce-pagina’s visueel weergeeft.

Zodra je de haak hebt gevonden die je wilt gebruiken, moet je een aangepaste functie maken die aan de haak wordt bevestigd. Deze functie moet de juiste parameters nemen en de gewijzigde waarde retourneren als u een filterhaak gebruikt.

Hier is een voorbeeld van hoe u de wooCommerce_single_product_summary hook kunt gebruiken om een aangepast bericht toe te voegen boven de knop Toevoegen aan winkelwagen op een productpagina:

function custom_single_product_message() { 
    echo '<p class="custom-message">Free shipping on orders over $50!</p>'; 
} 
add_action( 'wooCommerce_single_product_summary', 'custom_single_product_message', 15 );

In dit voorbeeld hebben we een aangepaste functie gemaakt met de naam custom_single_product_message() die een bericht uitvoert.

Vervolgens hebben we de functie add_action() gebruikt om onze aangepaste functie aan de wooCommerce_single_product_summary haak te haken met een prioriteit van 15. Dit betekent dat het wordt uitgevoerd na de titel en prijs, maar vóór de knop Toevoegen aan winkelwagentje.

Tools voor het werken met WooCommerce hooks

Hoewel je je aangepaste functies kunt toevoegen aan het ‘functions.php’-bestand van je child-thema, zijn er andere tools beschikbaar die het werken met hooks gemakkelijker kunnen maken.

Een populaire tool is de Code Snippets-plug-in. Met deze plug-in kunt u uw aangepaste codefragmenten aan uw WordPress-site toevoegen zonder uw themabestanden rechtstreeks te bewerken. Het biedt ook een gebruiksvriendelijke interface voor het beheren van uw fragmenten en heeft een ingebouwde code-editor met syntaxismarkering.

Een andere handige tool is de WooCommerce Code Reference. Deze online referentie geeft een overzicht van alle beschikbare actie- en filterhooks in WooCommerce, samen met een beschrijving van wat ze doen en de parameters die ze accepteren. Je kunt op naam naar haken zoeken of op categorie bladeren om de hak te vinden die je nodig hebt.

Visuele gids voor WooCommerce-haken

Nu je een goed begrip hebt van hoe WooCommerce-hooks werken, laten we een visuele rondleiding maken door enkele veelgebruikte hooks in verschillende delen van een WooCommerce-winkel.

Deze sectie behandelt hooks die te vinden zijn in afzonderlijke productpagina’s, winkelwagen- en afrekenpagina’s en account- en archiefpagina’s.

Haken in WooCommerce enkele productpagina’s

Op afzonderlijke productpagina’s bekijken uw klanten gedetailleerde informatie over een specifiek product. WooCommerce biedt verschillende hooks waarmee je de lay-out en inhoud van deze pagina’s kunt aanpassen.

Enkele populaire haken voor afzonderlijke productpagina’s zijn:

1. ‘wooCommerce_before_single_product‘: Deze haak vuurt voor de afzonderlijke productinhoud. Het is een goede plek om aangepaste inhoud toe te voegen boven de producttitel, zoals een banner of bericht.

2. ‘wooCommerce_single_product_summary‘: Met deze hook kunt u inhoud toevoegen in het productoverzichtsgebied, dat de titel, prijs, beschrijving en de knop Toevoegen aan winkelwagen bevat. U kunt deze haak gebruiken om de volgorde van elementen te wijzigen of om aanvullende informatie in te voegen.

Voorbeeld gebruik:

add_action( 'wooCommerce_single_product_summary', 'custom_product_stock_status', 15 ); 
 
function custom_product_stock_status() { 
    global $product; 
    if ( $product->is_in_stock() ) { 
        echo '<p class="stock-status in-stock">In stock and ready to ship!</p>'; 
    } else { 
        echo '<p class="stock-status out-of-stock">Currently out of stock. Check back soon!</p>'; 
    } 
} 

3. ‘wooCommerce_after_single_product_summary‘: Gebruik deze hook om content toe te voegen onder het productoverzicht, zoals gerelateerde producten, upsells of aangepaste producttabbladen. Dit gebied is perfect voor het weergeven van aanvullende informatie die klanten kan helpen weloverwogen aankoopbeslissingen te nemen.

4. ‘wooCommerce_product_thumbnails‘: Deze haak vuurt af in de galerij met productafbeeldingen. U kunt het gebruiken om het uiterlijk van miniatuurafbeeldingen te wijzigen of aangepaste inhoud toe te voegen.

Haken voor winkelwagen- en afrekenpagina’s

De winkelwagen- en afrekenpagina’s zijn cruciale stappen in de reis van de klant. Ze vertegenwoordigen de laatste fasen van het aankoopproces, waar klanten hun bestellingen bekijken, verzend- en betalingsopties selecteren en hun transacties voltooien. WooCommerce biedt verschillende hooks om u te helpen deze pagina’s te optimaliseren voor een soepelere en gebruiksvriendelijkere ervaring.

Enkele essentiële haken voor winkelwagen- en afrekenpagina’s zijn:

1. ‘wooCommerce_before_cart‘: Deze haak vuurt voor de tafel van de kar. Gebruik het om aangepaste inhoud of promoties boven de winkelwagen toe te voegen.

2. ‘wooCommerce_cart_totals_before_shipping‘: Met deze haak kunt u inhoud toevoegen vóór de verzendopties in het gebied met winkelwagentotalen. Het is een goede plek om verzendgerelateerde berichten of promoties weer te geven.

Voorbeeld gebruik:

add_action( 'wooCommerce_cart_totals_before_shipping', 'custom_shipping_message' ); 
 
function custom_shipping_message() { 
    echo '<p class="shipping-message">Free shipping on orders over $50!</p>'; 
} 

3. ‘wooCommerce_review_order_before_submit‘: Gebruik deze hook om inhoud toe te voegen vóór de knop Bestelling plaatsen op de afrekenpagina, zoals een selectievakje voor een aangepaste overeenkomst of vertrouwensbadges.

4. ‘woocommerce_checkout_after_customer_details‘: Deze haak gaat af na het gedeelte met klantgegevens op de afrekenpagina. U kunt het gebruiken om aangepaste velden toe te voegen of het afrekenen in meerdere stappen op te splitsen.

Haken in WooCommerce-account- en archiefpagina’s

Met WooCommerce-accountpagina’s kunnen klanten hun bestellingen bekijken, hun adressen beheren en andere accountgerelateerde taken uitvoeren. Archiefpagina’s, zoals de winkel- en rubriekspagina’s, tonen lijsten met producten. WooCommerce biedt ook hooks om deze pagina’s aan te passen.

Enkele handige hooks voor account- en archiefpagina’s zijn:

1. ‘woocommerce_before_account_navigation‘: Deze hook wordt geactiveerd voor het navigatiemenu van het account. Gebruik het om aangepaste menu-items of inhoud boven de navigatie toe te voegen.

2. ‘woocommerce_after_account_orders‘: Gebruik deze hook om aangepaste inhoud weer te geven na de tabel Bestellingen op de accountpagina, zoals een bericht dat klanten aanmoedigt om beoordelingen achter te laten.

Voorbeeld gebruik:

add_action( 'woocommerce_after_account_orders', 'custom_account_message' ); 
 
function custom_account_message() { 
    echo '<p class="account-message">Thank you for your orders! Please leave a review for the products you purchased.</p>'; 
} 

3. ‘woocommerce_before_shop_loop‘: Deze haak vuurt voor de productlus op archiefpagina’s. Gebruik het om aangepaste filters, sorteeropties of promotionele inhoud toe te voegen.

4. ‘woocommerce_after_shop_loop_item‘: Gebruik deze hook om inhoud in te voegen na elk product in de lus, zoals een aangepaste ‘Quick View’-knop of een extra productmeta.

Veelvoorkomende WooCommerce-hooks die u moet kennen

WooCommerce biedt een breed scala aan hooks waarmee u bijna elk aspect van uw online winkel kunt aanpassen. Laten we ons nu concentreren op enkele van de meest gebruikte actie- en filterhaken. Deze hooks zijn essentieel voor het wijzigen van de functionaliteit en het uiterlijk van uw WooCommerce-winkel.

Veelgebruikte actiehaken

Action hooks worden gebruikt om functionaliteit toe te voegen of aan te passen op specifieke punten in het WooCommerce proces. Hiermee kunt u aangepaste inhoud invoegen, het gedrag van bepaalde functies wijzigen of aanvullende acties activeren op basis van specifieke gebeurtenissen.

1. ‘woocommerce_before_main_content‘: Deze hook wordt geactiveerd voordat de belangrijkste WooCommerce-inhoud wordt weergegeven. Het is een goede plek om aangepaste inhoud toe te voegen die boven de productlus op winkelpagina’s of boven de productdetails op afzonderlijke productpagina’s verschijnt.

Voorbeeld gebruik:

add_action( 'woocommerce_before_main_content', 'custom_content_before_main' ); 
 
function custom_content_before_main() { 
    echo '<div class="custom-content">Check out our latest products!</div>'; 
}

2. ‘woocommerce_after_shop_loop_item‘: Deze hook wordt geactiveerd na elk product in de winkellus. Gebruik het om aangepaste inhoud of knoppen toe te voegen onder de producttitel of prijs.

Voorbeeld gebruik:

add_action( 'woocommerce_after_shop_loop_item', 'custom_button_after_product' ); 
 
function custom_button_after_product() { 
    echo '<a href="#" class="custom-button">Buy Now</a>'; 
} 

3. ‘woocommerce_before_cart‘: Deze haak vuurt voor de winkelwagentafel op de winkelwagenpagina. Het is een ideale locatie voor het weergeven van aangepaste berichten, promoties of extra winkelwagengerelateerde inhoud.

Voorbeeld gebruik:

add_action( 'woocommerce_before_cart', 'custom_message_before_cart' ); 
 
function custom_message_before_cart() { 
    echo '<div class="custom-message">Spend $50 or more for free shipping!</div>'; 
} 

4. ‘woocommerce_checkout_before_customer_details‘: Gebruik deze hook om aangepaste inhoud toe te voegen vóór het gedeelte met klantgegevens op de afrekenpagina. Dit is een goede plek om een voortgangsbalk, een bericht over verplichte velden of een link naar uw privacybeleid weer te geven.

5. ‘woocommerce_checkout_order_review‘: Deze hook wordt afgevuurd op de afrekenpagina, in het gedeelte voor het beoordelen van bestellingen. Gebruik het om het uiterlijk van het besteloverzicht te wijzigen of om aangepaste inhoud toe te voegen die verband houdt met de bestelling.

Voorbeeld gebruik:

add_action( 'woocommerce_checkout_order_review', 'custom_order_review_content' ); 
 
function custom_order_review_content() { 
    echo '<div class="custom-order-review">Your order will be processed within 1-2 business days.</div>'; 
}

6. ‘woocommerce_email_header‘: Met deze hook kun je de header van WooCommerce e-mailsjablonen wijzigen. Gebruik het om aangepaste inhoud toe te voegen, het logo te wijzigen of de styling van de e-mailheader aan te passen.

7. ‘woocommerce_email_footer‘: Net als bij de e-mailheader hook, kun je met deze hook de voettekst van WooCommerce e-mailsjablonen aanpassen. Voeg aangepaste inhoud toe, links naar sociale media of pas de styling aan zodat deze bij uw merk past.

Populaire filterhaken

Filterhooks worden gebruikt om gegevens aan te passen voordat deze worden weergegeven of verwerkt door WooCommerce. Hiermee kunt u de inhoud van specifieke elementen wijzigen, het gedrag van bepaalde functies wijzigen of gegevens manipuleren voordat deze worden opgeslagen of opgehaald.

1. ‘woocommerce_product_title‘: Met deze hook kun je de producttitel wijzigen voordat deze wordt weergegeven op de enkele productpagina of in de winkellus.

Voorbeeld gebruik:

add_filter( 'woocommerce_product_title', 'custom_product_title' ); 
 
function custom_product_title( $title ) { 
    return 'Best ' . $title . ' Available!'; 
} 

2. ‘woocommerce_product_tabs‘: Gebruik deze hook om de tabbladen op de enkele productpagina toe te voegen, te verwijderen of te herschikken. U kunt aangepaste tabbladen maken of de inhoud van bestaande tabbladen wijzigen.

Voorbeeld gebruik:

add_filter( 'woocommerce_product_tabs', 'custom_product_tab' ); 
 
function custom_product_tab( $tabs ) { 
    $tabs['custom_tab'] = array( 
        'title'    => 'Custom Tab', 
        'priority' => 50, 
        'callback' => 'custom_tab_content' 
    ); 
    return $tabs; 
} 
 
function custom_tab_content() { 
    echo '<h2>Custom Tab Content</h2>'; 
    echo '<p>This is the content of the custom tab.</p>'; 
} 

3. ‘woocommerce_add_to_cart_redirect‘: Met deze hook kun je de omleidings-URL wijzigen nadat een product aan de winkelwagen is toegevoegd. Gebruik het om klanten om te leiden naar een specifieke pagina, zoals een cross-sell- of upsell-pagina.

Voorbeeld gebruik:

add_filter( 'woocommerce_add_to_cart_redirect', 'custom_add_to_cart_redirect' ); 
 
function custom_add_to_cart_redirect( $url ) { 
    return get_permalink( 123 ); // Replace 123 with the ID of the desired redirect page 
}

4. ‘woocommerce_cart_totals‘: Gebruik deze hook om de totalen van de winkelwagen te wijzigen voordat ze worden weergegeven op de winkelwagen- en afrekenpagina’s. U kunt aangepaste totalen toevoegen, bestaande totalen wijzigen of de volgorde wijzigen waarin ze worden weergegeven.

Voorbeeld gebruik:

add_filter( 'woocommerce_cart_totals', 'custom_cart_totals' ); 
 
function custom_cart_totals( $totals ) { 
    $totals['custom_total'] = array( 
        'label' => 'Custom Total', 
        'value' => '10.00' 
    ); 
    return $totals; 
}

5. ‘woocommerce_product_related_posts_query‘: Met deze hook kunt u de zoekopdracht voor gerelateerde producten op de enkele productpagina wijzigen. Gebruik het om het aantal gerelateerde producten te wijzigen, ze te filteren op basis van specifieke criteria of de volgorde waarin ze worden weergegeven aan te passen.

6. ‘woocommerce_checkout_fields‘: Gebruik deze hook om de afrekenvelden toe te voegen, te verwijderen of aan te passen. U kunt aangepaste velden maken, de veldlabels wijzigen of de veldvalidatieregels aanpassen.

Voorbeeld gebruik:

add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' ); 
 
function custom_checkout_fields( $fields ) { 
    $fields['billing']['custom_field'] = array( 
        'label'     => 'Custom Field', 
        'required'  => true, 
        'clear'     => true, 
        'type'      => 'text', 
        'class'     => array( 'form-row-wide' ) 
    ); 
    return $fields; 
}  

7. ‘woocommerce_payment_gateways‘: Met deze hook kunt u de beschikbare betalingsgateways toevoegen, verwijderen of wijzigen. Gebruik het om aangepaste betaalmethoden aan te maken of de volgorde te wijzigen waarin de gateways worden weergegeven.

Praktische voorbeelden van het gebruik van WooCommerce hooks

Nu je bekend bent met enkele van de meest voorkomende WooCommerce-hooks, laten we eens kijken naar praktische voorbeelden van hoe je ze kunt gebruiken om je online winkel aan te passen. We behandelen het toevoegen van aangepaste inhoud met behulp van actiehaken, het wijzigen van de uitvoer met filterhaken en real-world use-cases voor WooCommerce-haken.

Aangepaste inhoud toevoegen met behulp van action hooks

Met actiehaken kunt u aangepaste inhoud invoegen op specifieke punten in uw WooCommerce-winkel. Hier zijn een paar voorbeelden van hoe je action hooks kunt gebruiken om aangepaste content toe te voegen:

Voorbeeld 1: Een aangepast bericht toevoegen aan de winkelwagenpagina

add_action( 'woocommerce_before_cart', 'custom_cart_message' ); 
 
function custom_cart_message() { 
    echo '<div class="custom-message">Thank you for shopping with us! Please review your cart before proceeding to checkout.</div>'; 
} 

In dit voorbeeld gebruiken we de ‘woocommerce_before_cart‘-haak om een aangepast bericht boven de winkelwagentabel toe te voegen. Het bericht bedankt de klant voor het winkelen en herinnert hem eraan om zijn winkelwagentje te bekijken voordat hij afrekent.

Voorbeeld 2: Een banner invoegen op de winkelpagina

add_action( 'woocommerce_before_main_content', 'custom_shop_banner' ); 
 
function custom_shop_banner() { 
    echo '<div class="custom-banner"> 
        <img src="path/to/banner-image.jpg" alt="Shop Banner"> 
        <h2>Welcome to our shop!</h2> 
        <p>Discover our latest products and special offers.</p> 
    </div>'; 
}

Hier gebruiken we de ‘woocommerce_before_main_content‘-haak om een aangepaste banner op de winkelpagina in te voegen. De banner bevat een afbeelding, een welkomstbericht en een call-to-action om klanten aan te moedigen de winkel te verkennen.

Voorbeeld 3: Een aangepast tabblad toevoegen aan de afzonderlijke productpagina

add_action( 'woocommerce_product_tabs', 'custom_product_tab' ); 
 
function custom_product_tab( $tabs ) { 
    $tabs['custom_tab'] = array( 
        'title'    => 'Custom Tab', 
        'priority' => 50, 
        'callback' => 'custom_tab_content' 
    ); 
    return $tabs; 
} 
 
function custom_tab_content() { 
    echo '<h2>Custom Tab Content</h2>'; 
    echo '<p>This is the content of the custom tab.</p>'; 
} 

In dit voorbeeld gebruiken we de ‘woocommerce_product_tabs‘-hook om een aangepast tabblad toe te voegen aan de enkele productpagina. De ‘custom_product_tab‘-functie voegt een nieuw tabblad toe met een titel-, prioriteits- en callback-functie.

De functie ‘custom_tab_content‘ definieert de inhoud die wordt weergegeven wanneer op het aangepaste tabblad wordt geklikt.

Uitvoer wijzigen met filterhaken

Met filterhooks kun je gegevens wijzigen voordat ze worden weergegeven of verwerkt door WooCommerce. Hier zijn een paar voorbeelden van hoe u filterhaken kunt gebruiken om de uitvoer te wijzigen:

Voorbeeld 1: De tekst van de knop “Toevoegen aan winkelwagentje” wijzigen

add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' ); 
 
function custom_add_to_cart_text() { 
    return 'Buy Now'; 
} 

In dit voorbeeld gebruiken we het filter ‘woocommerce_product_single_add_to_cart_text‘ om de tekst van de knop ‘Toevoegen aan winkelwagentje’ op de enkele productpagina te wijzigen. De functie ‘custom_add_to_cart_text‘ retourneert de nieuwe knoptekst, in dit geval ‘Nu kopen’.

Voorbeeld 2: De afrekenvelden wijzigen

add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' ); 
 
function custom_checkout_fields( $fields ) { 
    // Remove the "Company" field 
    unset( $fields['billing']['billing_company'] ); 
     
    // Make the "Phone" field required 
    $fields['billing']['billing_phone']['required'] = true; 
     
    // Add a custom field 
    $fields['billing']['custom_field'] = array( 
        'label'     => 'Custom Field', 
        'required'  => true, 
        'clear'     => true, 
        'type'      => 'text', 
        'class'     => array( 'form-row-wide' ) 
    ); 
     
    return $fields; 
} 

Hier gebruiken we de filter ‘woocommerce_checkout_fields‘ om de afrekenvelden aan te passen. Met de functie ‘custom_checkout_fields‘ wordt het veld ‘Bedrijf’ verwijderd, wordt het veld ‘Telefoon’ verplicht en wordt een aangepast veld toegevoegd aan het factureringsgedeelte.

Voorbeeld 3: Het aantal gerelateerde producten wijzigen

add_filter( 'woocommerce_output_related_products_args', 'custom_related_products_args' ); 
 
function custom_related_products_args( $args ) { 
    $args['posts_per_page'] = 6; 
    $args['columns'] = 3; 
    return $args; 
} 

In dit voorbeeld gebruiken we het filter ‘woocommerce_output_related_products_args‘ om het aantal gerelateerde producten te wijzigen dat op de afzonderlijke productpagina wordt weergegeven. De functie ‘custom_related_products_args‘ wijzigt de argumenten ‘posts_per_page‘ en ‘kolommen‘ om 6 gerelateerde producten in 3 kolommen weer te geven.

Real-world use cases voor WooCommerce hooks

WooCommerce-haken kunnen worden gebruikt om een breed scala aan aanpassingsuitdagingen op te lossen. Hier zijn een paar real-world use cases voor WooCommerce hooks:

1. Een aangepaste verzendmethode toevoegen

U kunt het filter ‘woocommerce_shipping_methods‘ gebruiken om een aangepaste verzendmethode toe te voegen aan uw WooCommerce-winkel. Dit is handig als u een specifieke verzendoptie moet aanbieden die niet standaard beschikbaar is, zoals een lokale bezorgservice of een aangepaste verzendcalculator.

2. De e-mail met de orderbevestiging aanpassen

Met de actiehaak ‘woocommerce_email_order_details‘ kunt u de e-mail met de orderbevestiging die naar klanten wordt gestuurd, aanpassen. Je kunt deze hook gebruiken om aangepaste inhoud toe te voegen, zoals een bedankbericht, productaanbevelingen of een couponcode voor hun volgende aankoop.

3. De zoekresultaten van het product wijzigen

De actiehaak ‘pre_get_posts‘ kan worden gebruikt om de zoekresultaten van het product aan te passen. U kunt deze hook bijvoorbeeld gebruiken om bepaalde productcategorieën op te nemen of uit te sluiten van de zoekresultaten, de volgorde waarin de resultaten worden weergegeven te wijzigen of aangepaste filters toe te voegen aan de zoekpagina.

4. Aangepaste velden toevoegen aan de producteditor

Met de ‘woocommerce_product_options_general_product_data‘-actiehaak kun je aangepaste velden toevoegen aan de producteditor in de WordPress-beheerder. Dit is handig voor het opslaan van aanvullende productinformatie, zoals een aangepaste SKU, een onderdeelnummer van de fabrikant of een productvideo-URL.

5. De winkelwagen en het afrekenproces aanpassen

WooCommerce biedt verschillende hooks waarmee u de winkelwagen en het afrekenproces kunt aanpassen. U kunt bijvoorbeeld de actiehook ‘woocommerce_cart_calculate_fees‘ gebruiken om aangepaste kosten toe te voegen aan het totaal van de winkelwagen, de actiehook ‘woocommerce_checkout_create_order_line_item‘ om de regelitems in de order te wijzigen of de actiehook ‘woocommerce_payment_complete‘ om extra acties uit te voeren nadat een betaling is voltooid.

Dit zijn slechts enkele voorbeelden van hoe WooCommerce-hooks kunnen worden gebruikt om echte aanpassingsuitdagingen op te lossen.

Geavanceerde toepassingen van WooCommerce hooks

Laten we nu enkele geavanceerde toepassingen van WooCommerce-hooks verkennen, waaronder het aanpassen van e-mails, het implementeren van dynamische prijzen en kortingen en het integreren van plug-ins van derden.

E-mails aanpassen met WooCommerce-hooks

WooCommerce stuurt tijdens het aankoopproces verschillende e-mails naar klanten en beheerders. Deze e-mails bevatten orderbevestigingen, verzendmeldingen en accountupdates. Met WooCommerce-hooks kunt u deze e-mails aanpassen zodat ze beter bij uw merk passen en uw klanten aanvullende informatie bieden.

1. E-mailsjablonen wijzigen

Met de ‘woocommerce_email_header‘ en ‘woocommerce_email_footer‘ hooks kun je de kop- en voettekst van WooCommerce e-mailsjablonen wijzigen. U kunt deze haken gebruiken om aangepaste inhoud toe te voegen, het logo te wijzigen of de styling aan te passen aan uw merk.

Voorbeeld:

add_action( 'woocommerce_email_header', 'custom_email_header' ); 
 
function custom_email_header( $email_heading ) { 
    $custom_logo_url = 'https://example.com/path/to/custom-logo.png'; 
    $custom_header = '<div style="text-align: center; margin-bottom: 20px;"><img src="' . $custom_logo_url . '" alt="Custom Logo" /></div>'; 
    echo $custom_header; 
}

In dit voorbeeld gebruiken we de ‘woocommerce_email_header‘-haak om een aangepast logo toe te voegen aan de e-mailheader. De functie ‘custom_email_header‘ voert een afbeeldingstag uit met de aangepaste logo-URL.

2. Aangepaste inhoud toevoegen aan e-mails

U kunt de ‘woocommerce_email_order_details‘-haak gebruiken om aangepaste inhoud toe te voegen aan het gedeelte met bestelgegevens van WooCommerce-e-mails. Dit is handig om aanvullende informatie over de bestelling op te nemen, zoals een bedankbericht of productaanbevelingen.

Voorbeeld:

add_action( 'woocommerce_email_order_details', 'custom_email_order_details', 20, 4 ); 
 
function custom_email_order_details( $order, $sent_to_admin, $plain_text, $email ) { 
    if ( ! $sent_to_admin && ! $plain_text ) { 
        echo '<p>Thank you for your order! We appreciate your business and hope you enjoy your purchase.</p>'; 
    } 
}

In dit voorbeeld gebruiken we de ‘woocommerce_email_order_details‘-haak om een bedankbericht toe te voegen aan de e-mail met de orderbevestiging die naar klanten wordt gestuurd. De ‘custom_email_order_details‘-functie controleert of de e-mail niet naar een beheerder is verzonden en niet in platte tekst is opgesteld voordat het bericht wordt verzonden.

Dynamische prijzen en kortingen met behulp van haken

WooCommerce-hooks kunnen worden gebruikt om dynamische prijzen en kortingen te implementeren op basis van verschillende criteria, zoals de rol van de klant, de hoeveelheid gekochte producten of het totale bestelbedrag.

1. Een aangepaste korting toepassen

Met de ‘woocommerce_cart_calculate_fees‘-haak kunt u aangepaste kortingen toevoegen aan het totaal van de winkelwagen. U kunt deze haak gebruiken om kortingen met een percentage of vast bedrag toe te passen op basis van specifieke voorwaarden.

Voorbeeld:

add_action( 'woocommerce_cart_calculate_fees', 'custom_discount' ); 
 
function custom_discount( $cart ) { 
    if ( is_user_logged_in() ) { 
        $discount_amount = $cart->subtotal * 0.1; // Apply a 10% discount for logged-in users 
        $cart->add_fee( 'Custom Discount', -$discount_amount ); 
    } 
}

In dit voorbeeld gebruiken we de ‘woocommerce_cart_calculate_fees‘-haak om een korting van 10% toe te passen voor ingelogde gebruikers. De functie ‘custom_discount‘ controleert of de gebruiker is ingelogd en berekent het kortingsbedrag op basis van het subtotaal van de winkelwagen. De korting wordt dan als negatieve vergoeding aan de winkelwagen toegevoegd.

2. Dynamische prijzen op basis van hoeveelheid

De ‘woocommerce_before_calculate_totals‘-haak kan worden gebruikt om productprijzen aan te passen op basis van de gekochte hoeveelheid. Dit is handig voor het implementeren van bulkkortingen of gedifferentieerde prijzen.

Voorbeeld:

add_action( 'woocommerce_before_calculate_totals', 'dynamic_pricing_quantity' ); 
 
function dynamic_pricing_quantity( $cart ) { 
    if ( is_admin() && ! defined( 'DOING_AJAX' ) ) { 
        return; 
    } 
 
    foreach ( $cart->get_cart() as $cart_item ) { 
        $product = $cart_item['data']; 
        $quantity = $cart_item['quantity']; 
 
        if ( $quantity >= 10 ) { 
            $price = $product->get_price() * 0.9; // Apply a 10% discount for quantities of 10 or more 
            $product->set_price( $price ); 
        } 
    } 
}

In dit voorbeeld gebruiken we de haak ‘woocommerce_before_calculate_totals‘ om productprijzen aan te passen op basis van de gekochte hoeveelheid. De functie ‘dynamic_pricing_quantity‘ doorzoekt elk winkelwagenitem en controleert of de hoeveelheid 10 of meer is. Als aan de voorwaarde is voldaan, wordt er een korting van 10% toegepast op de productprijs.

Plug-ins van derden integreren met WooCommerce-hooks

WooCommerce-hooks kunnen worden gebruikt om plug-ins van derden te integreren met uw online winkel. Hiermee kunt u de functionaliteit van WooCommerce uitbreiden en aangepaste integraties met andere systemen maken.

1. Integratie met een aangepaste verzendprovider

U kunt het filter ‘woocommerce_shipping_methods‘ gebruiken om een aangepaste verzendmethode toe te voegen die wordt geleverd door een plug-in van derden. Hierdoor kunt u uw klanten extra verzendopties aanbieden.

Voorbeeld:

add_filter( 'woocommerce_shipping_methods', 'add_custom_shipping_method' ); 
 
function add_custom_shipping_method( $methods ) { 
    $methods['custom_shipping'] = 'Custom_Shipping_Method'; 
    return $methods; 
}

In dit voorbeeld gebruiken we het filter ‘woocommerce_shipping_methods‘ om een aangepaste verzendmethode toe te voegen aan de lijst met beschikbare verzendmethoden. De functie ‘add_custom_shipping_method‘ voegt de klasse ‘Custom_Shipping_Method‘ toe aan de ‘$methods’-array.

2. Productgegevens wijzigen met een plug-in van derden

Het filter ‘woocommerce_product_get_price‘ kan worden gebruikt om de productprijs te wijzigen die is opgehaald uit een plug-in van derden of een aangepaste databasetabel.

Voorbeeld:

add_filter( 'woocommerce_product_get_price', 'custom_product_price', 10, 2 ); 
 
function custom_product_price( $price, $product ) { 
    $custom_price = get_post_meta( $product->get_id(), 'custom_price', true ); 
    if ( ! empty( $custom_price ) ) { 
        $price = $custom_price; 
    } 
    return $price; 
} 

In dit voorbeeld gebruiken we het filter ‘woocommerce_product_get_price‘ om de productprijs aan te passen op basis van een aangepaste veldwaarde. De functie ‘custom_product_price‘ haalt de waarde op van het metaveld ‘custom_price‘ voor het product. Als de aangepaste prijs is ingesteld, wordt de oorspronkelijke productprijs overschreven.

Problemen met WooCommerce-hooks oplossen

Terwijl u met WooCommerce-haken werkt om uw online winkel aan te passen, kunt u verschillende problemen en fouten tegenkomen. In dit gedeelte bespreken we veelvoorkomende problemen met betrekking tot WooCommerce-hooks, hoe je problemen kunt oplossen en hoe je ze kunt oplossen en best practices voor het effectief gebruiken van hooks.

1. Haak werkt niet of wijzigingen worden niet van kracht

Als je een hook aan je php-bestand of een aangepaste plugin hebt toegevoegd, maar het lijkt niet te werken, kunnen daar verschillende redenen voor zijn:

• Syntaxisfouten: controleer uw code op typefouten, ontbrekende puntkomma’s of onjuiste functienamen. Een enkele syntaxisfout kan voorkomen dat het hele bestand wordt uitgevoerd.

Oplossing: Gebruik een code-editor met syntaxismarkering en foutdetectie om u te helpen syntaxisfouten snel op te sporen en op te lossen.

Lees ook: Hoe maak je een WordPress-plug-in (beginnershandleiding)

• Onjuiste haaknaam: Zorg ervoor dat je de juiste haaknaam gebruikt. WooCommerce-hooknamen zijn hoofdlettergevoelig en moeten precies zo worden gespeld als gedocumenteerd.

Oplossing: Raadpleeg de WooCommerce hook reference of gebruik een hook debugger plugin om er zeker van te zijn dat je de juiste hook naam gebruikt.

• Hook-prioriteitsconflicten: Als meerdere functies zijn gekoppeld aan dezelfde actie of hetzelfde filter met dezelfde prioriteit, worden ze uitgevoerd in de volgorde waarin ze zijn toegevoegd. Dit kan tot onverwachte resultaten leiden.

Oplossing: Pas de prioriteit van uw hooked-functies aan om de volgorde te bepalen waarin ze worden uitgevoerd. Gebruik een unieke prioriteitswaarde om conflicten met andere functies te voorkomen.

2. Dubbele inhoud of onverwachte output

Als u dubbele inhoud of onverwachte uitvoer op uw WooCommerce-pagina’s ziet, kan dit te wijten zijn aan een hook die meerdere keren wordt afgevuurd of aan een functie die inhoud uitvoert in plaats van deze terug te sturen.

• Aanroepen met meerdere functies: Als je per ongeluk dezelfde functie meerdere keren aan een hook hebt toegevoegd, wordt deze elke keer dat de hook wordt afgevuurd uitgevoerd, wat resulteert in dubbele inhoud.

Oplossing: Controleer je code nogmaals om er zeker van te zijn dat je dezelfde functie niet meer dan één keer aan een hook toevoegt. Als u een functie meerdere keren met verschillende argumenten moet toevoegen, gebruikt u voor elk exemplaar een unieke functienaam.

• Onjuiste functie-uitvoer: Als u een filterhaak gebruikt, moet uw functie de gewijzigde waarde retourneren in plaats van deze rechtstreeks uit te voeren. Het uitvoeren van inhoud in een filterfunctie kan leiden tot onverwachte uitvoer op de pagina.

Oplossing: Zorg ervoor dat uw filterfuncties de gewijzigde waarde retourneren in plaats van deze te echoën of af te drukken. Gebruik het ‘return’-statement om de waarde terug te geven aan WordPress.

3. Prestatieproblemen of traag laden van pagina’s

Als je een groot aantal hooks of complexe functies aan je WooCommerce-site hebt toegevoegd, kan dit de prestaties beïnvloeden en de laadtijden van pagina’s vertragen.

• Te veel hooks: Het toevoegen van te veel hooks, vooral degenen die resource-intensieve taken uitvoeren, kan uw site vertragen en een negatieve invloed hebben op de gebruikerservaring.

Oplossing: Controleer je hooks en verwijder alle hooks die onnodig of overbodig zijn. Optimaliseer uw hooked-functies om het aantal databasequery’s en externe verzoeken te minimaliseren.

• Inefficiënte code: Slecht geschreven of inefficiënte code in uw hooked functions kan leiden tot prestatieproblemen en trage laadtijden van pagina’s.

Oplossing: Optimaliseer uw code voor prestaties door loops te minimaliseren, cachingtechnieken te gebruiken en waar mogelijk resource-intensieve taken te vermijden. Gebruik profileringstools om knelpunten in de prestaties te identificeren en dienovereenkomstig te optimaliseren.

Fouten in hooks debuggen in WooCommerce

Bij het oplossen van problemen met WooCommerce-hooks, is het essentieel om een solide foutopsporingsproces te hebben. Hier zijn enkele tips en technieken voor het debuggen van hook-gerelateerde fouten:

1. Schakel WP_DEBUG in

De WP_DEBUG constante is een ingebouwde WordPress-functie die de debug-modus inschakelt en gedetailleerde foutmeldingen op uw site weergeeft. Als u WP_DEBUG wilt inschakelen, voegt u de volgende regel toe aan uw wp-config.php bestand:

define( 'WP_DEBUG', true ); 

Als WP_DEBUG ingeschakeld, geeft WordPress waarschuwingen, mededelingen en foutmeldingen weer op uw site, waardoor het gemakkelijker wordt om problemen met betrekking tot WooCommerce-hooks te identificeren en op te lossen.

2. Gebruik een hook debugger plugin

Er zijn verschillende WordPress-plug-ins beschikbaar die u kunnen helpen bij het debuggen van WooCommerce-hooks. Dit omvat het weergeven van informatie over de hooks die op elke pagina zijn afgevuurd, de functies die aan elke hook zijn gekoppeld en de volgorde waarin ze worden uitgevoerd.

Enkele populaire plug-ins voor hook-debugger zijn:

• Toon eenvoudig hooks: Deze plug-in geeft een lijst weer van alle hooks die op de huidige pagina zijn afgevuurd, samen met de functies die aan elke hook zijn gekoppeld en hun prioriteiten.

• WP Hooks Viewer: Deze plugin biedt een visuele weergave van de hooks die op elke pagina zijn afgevuurd, zodat je de volgorde kunt zien waarin ze worden uitgevoerd en de relaties tussen hooks en functies.

• Hook Monitor: Deze plug-in registreert alle hooks die op uw site zijn afgevuurd en biedt een doorzoekbare interface voor het analyseren van hookgegevens. Het kan u helpen prestatieproblemen te identificeren en fouten met betrekking tot specifieke hooks op te sporen.

3. Gebruik error_log() voor foutopsporing

De functie error_log() is een ingebouwde PHP-functie die foutmeldingen naar het foutenlogboek van de webserver of een gespecificeerd bestand schrijft. U kunt error_log() gebruiken om foutopsporingsinformatie van uw hooked-functies uit te voeren, wat u kan helpen bij het oplossen van problemen en het opsporen van de bron van fouten.

Voorbeeld:

add_filter( 'woocommerce_product_get_price', 'custom_product_price', 10, 2 ); 
 
function custom_product_price( $price, $product ) { 
    // Output debug information to the error log 
    error_log( 'Processing product ID: ' . $product->get_id() ); 
    error_log( 'Original price: ' . $price ); 
     
    // Your custom pricing logic here 
    // ... 
     
    error_log( 'Modified price: ' . $price ); 
    return $price; 
} 

In dit voorbeeld gebruiken we error_log() om foutopsporingsinformatie uit te voeren over het product dat wordt verwerkt, de oorspronkelijke prijs en de gewijzigde prijs. Deze informatie wordt naar het foutenlogboek van de webserver geschreven, dat u vervolgens kunt gebruiken om problemen op te lossen en fouten op te sporen.

4. Test met een testsite

Wanneer je belangrijke wijzigingen aanbrengt op je WooCommerce-site met behulp van hooks, is het altijd een goed idee om je wijzigingen op een testsite te testen voordat je ze op je live site implementeert. Een testsite is een exacte kopie van uw live site die u kunt gebruiken voor test- en ontwikkelingsdoeleinden zonder dat dit gevolgen heeft voor uw live verkeer.

Door je hooked-functies eerst op een testsite te testen, kun je ervoor zorgen dat ze werken zoals verwacht en geen fouten of prestatieproblemen introduceren.

Nadat u uw wijzigingen grondig hebt getest op de testsite, kunt u ze met vertrouwen implementeren op uw livesite.

Vereenvoudigde WooCommerce-aanpassing met WonderBlocks

Hoewel hooks krachtige aanpassingsmogelijkheden bieden, vereisen ze aanzienlijke technische kennis en codeerexpertise. Niet elke winkeleigenaar heeft de tijd of technische achtergrond om met PHP-code en WordPress-hooks te werken.

Veel aanpassingen omvatten het testen van verschillende hook-combinaties, het debuggen van codeproblemen en het onderhouden van aangepaste functies.

Deze complexiteit vormt een uitdaging voor winkeleigenaren die hun WooCommerce-sites moeten aanpassen, maar willen voorkomen dat ze in code duiken.

Bluehost erkende deze behoefte en ontwikkelde WonderBlocks als onderdeel van zijn WonderSuite-toolkit.

WonderBlocks biedt een eenvoudiger alternatief voor veel voorkomende WooCommerce-aanpassingen. Het transformeert de standaard WordPress-blokeditor in een krachtige WooCommerce-paginabuilder.

Met deze visuele benadering kunt u uw winkel aanpassen zonder ook maar één regel code te schrijven.

Belangrijkste voordelen van het gebruik van WonderBlocks voor je WooCommerce winkel:

Voorbeeld: In plaats van aangepaste hook-functies te schrijven om uw productlay-out aan te passen, kunt u de drag-and-drop-interface van WonderBlocks gebruiken. Dit bespaart tijd en verkleint de kans op coderingsfouten.

Tot slot

In deze uitgebreide gids hebben we de ongelooflijke kracht en flexibiliteit van WooCommerce-haken onderzocht. Je hebt geleerd hoe je actie- en filterhooks kunt gebruiken om elk aspect van je onlinewinkel aan te passen, van het wijzigen van productgegevens tot het toevoegen van aangepaste functionaliteit aan het afrekenproces.

Gewapend met deze kennis ben je nu klaar om je WooCommerce-ontwikkelingsvaardigheden naar een hoger niveau te tillen. We kunnen niet wachten om de geweldige aanpassingen en unieke online winkels te zien die je zult maken met behulp van de kennis en technieken die je met deze gids hebt opgedaan.

Klaar om deze WooCommerce-aanpassingen in actie te brengen? Ga vandaag nog aan de slag met Bluehost WooCommerce hosting en creëer uw aangepaste online winkel.

Veelgestelde vragen