WooCommerce Code Reference<\/a>. 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. <\/p>\n\nVisuele gids voor WooCommerce-haken <\/h2>\n\n
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. <\/p>\n\n
Deze sectie behandelt hooks die te vinden zijn in afzonderlijke productpagina’s, winkelwagen- en afrekenpagina’s en account- en archiefpagina’s. <\/p>\n\n
Haken in WooCommerce enkele productpagina’s <\/h3>\n\n
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. <\/p>\n\n
Enkele populaire haken voor afzonderlijke productpagina’s zijn: <\/p>\n\n
1. ‘wooCommerce_before_single_product<\/strong>‘: 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. <\/p>\n\n2. ‘wooCommerce_single_product_summary<\/strong>‘: 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. <\/p>\n\nVoorbeeld gebruik<\/strong>:<\/p>\n\nadd_action( 'wooCommerce_single_product_summary', 'custom_product_stock_status', 15 ); \n \nfunction custom_product_stock_status() { \n global $product; \n if ( $product->is_in_stock() ) { \n echo '<p class=\"stock-status in-stock\">In stock and ready to ship!<\/p>'; \n } else { \n echo '<p class=\"stock-status out-of-stock\">Currently out of stock. Check back soon!<\/p>'; \n } \n} <\/code><\/pre>\n\n3. ‘wooCommerce_after_single_product_summary<\/strong>‘: 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. <\/p>\n\n4. ‘wooCommerce_product_thumbnails<\/strong>‘: 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. <\/p>\n\nHaken voor winkelwagen- en afrekenpagina’s <\/h3>\n\n
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. <\/p>\n\n
Enkele essenti\u00eble haken voor winkelwagen- en afrekenpagina’s zijn: <\/p>\n\n
1. ‘wooCommerce_before_cart<\/strong>‘: Deze haak vuurt voor de tafel van de kar. Gebruik het om aangepaste inhoud of promoties boven de winkelwagen toe te voegen. <\/p>\n\n2. ‘wooCommerce_cart_totals_before_shipping<\/strong>‘: Met deze haak kunt u inhoud toevoegen v\u00f3\u00f3r de verzendopties in het gebied met winkelwagentotalen. Het is een goede plek om verzendgerelateerde berichten of promoties weer te geven. <\/p>\n\nVoorbeeld gebruik<\/strong>: <\/p>\n\nadd_action( 'wooCommerce_cart_totals_before_shipping', 'custom_shipping_message' ); \n \nfunction custom_shipping_message() { \n echo '<p class=\"shipping-message\">Free shipping on orders over $50!<\/p>'; \n} <\/code><\/pre>\n\n3. ‘wooCommerce_review_order_before_submit<\/strong>‘: Gebruik deze hook om inhoud toe te voegen v\u00f3\u00f3r de knop Bestelling plaatsen op de afrekenpagina, zoals een selectievakje voor een aangepaste overeenkomst of vertrouwensbadges. <\/p>\n\n4. ‘woocommerce_checkout_after_customer_details<\/strong>‘: 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. <\/p>\n\nHaken in WooCommerce-account- en archiefpagina’s <\/h3>\n\n
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. <\/p>\n\n
Enkele handige hooks voor account- en archiefpagina’s zijn: <\/p>\n\n
1. ‘woocommerce_before_account_navigation<\/strong>‘: Deze hook wordt geactiveerd voor het navigatiemenu van het account. Gebruik het om aangepaste menu-items of inhoud boven de navigatie toe te voegen. <\/p>\n\n2. ‘woocommerce_after_account_orders<\/strong>‘: 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. <\/p>\n\nVoorbeeld gebruik:<\/strong><\/p>\n\nadd_action( 'woocommerce_after_account_orders', 'custom_account_message' ); \n \nfunction custom_account_message() { \n echo '<p class=\"account-message\">Thank you for your orders! Please leave a review for the products you purchased.<\/p>'; \n} <\/code><\/pre>\n\n3. ‘woocommerce_before_shop_loop<\/strong>‘: Deze haak vuurt voor de productlus op archiefpagina’s. Gebruik het om aangepaste filters, sorteeropties of promotionele inhoud toe te voegen. <\/p>\n\n4. ‘woocommerce_after_shop_loop_item<\/strong>‘: Gebruik deze hook om inhoud in te voegen na elk product in de lus, zoals een aangepaste ‘Quick View’-knop of een extra productmeta. <\/p>\n\nVeelvoorkomende WooCommerce-hooks die u moet kennen <\/h2>\n\n
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. <\/p>\n\n
Veelgebruikte actiehaken <\/h3>\n\n
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. <\/p>\n\n
1. ‘woocommerce_before_main_content<\/strong>‘: 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. <\/p>\n\nVoorbeeld gebruik:<\/strong> <\/p>\n\nadd_action( 'woocommerce_before_main_content', 'custom_content_before_main' ); \n \nfunction custom_content_before_main() { \n echo '<div class=\"custom-content\">Check out our latest products!<\/div>'; \n}<\/code><\/pre>\n\n2. ‘woocommerce_after_shop_loop_item<\/strong>‘: 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. <\/p>\n\nVoorbeeld gebruik<\/strong>:<\/p>\n\nadd_action( 'woocommerce_after_shop_loop_item', 'custom_button_after_product' ); \n \nfunction custom_button_after_product() { \n echo '<a href=\"#\" class=\"custom-button\">Buy Now<\/a>'; \n} <\/code><\/pre>\n\n3. ‘woocommerce_before_cart<\/strong>‘: 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. <\/p>\n\nVoorbeeld gebruik<\/strong>:<\/p>\n\nadd_action( 'woocommerce_before_cart', 'custom_message_before_cart' ); \n \nfunction custom_message_before_cart() { \n echo '<div class=\"custom-message\">Spend $50 or more for free shipping!<\/div>'; \n} <\/code><\/pre>\n\n4. ‘woocommerce_checkout_before_customer_details<\/strong>‘: Gebruik deze hook om aangepaste inhoud toe te voegen v\u00f3\u00f3r 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. <\/p>\n\n5. ‘woocommerce_checkout_order_review<\/strong>‘: 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. <\/p>\n\nVoorbeeld gebruik<\/strong>:<\/p>\n\nadd_action( 'woocommerce_checkout_order_review', 'custom_order_review_content' ); \n \nfunction custom_order_review_content() { \n echo '<div class=\"custom-order-review\">Your order will be processed within 1-2 business days.<\/div>'; \n}<\/code><\/pre>\n\n6. ‘woocommerce_email_header<\/strong>‘: 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. <\/p>\n\n7. ‘woocommerce_email_footer<\/strong>‘: 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. <\/p>\n\nPopulaire filterhaken <\/h3>\n\n
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. <\/p>\n\n
1. ‘woocommerce_product_title<\/strong>‘: Met deze hook kun je de producttitel wijzigen voordat deze wordt weergegeven op de enkele productpagina of in de winkellus. <\/p>\n\nVoorbeeld gebruik<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_product_title', 'custom_product_title' ); \n \nfunction custom_product_title( $title ) { \n return 'Best ' . $title . ' Available!'; \n} <\/code><\/pre>\n\n2. ‘woocommerce_product_tabs<\/strong>‘: 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. <\/p>\n\nVoorbeeld gebruik<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_product_tabs', 'custom_product_tab' ); \n \nfunction custom_product_tab( $tabs ) { \n $tabs['custom_tab'] = array( \n 'title' => 'Custom Tab', \n 'priority' => 50, \n 'callback' => 'custom_tab_content' \n ); \n return $tabs; \n} \n \nfunction custom_tab_content() { \n echo '<h2>Custom Tab Content<\/h2>'; \n echo '<p>This is the content of the custom tab.<\/p>'; \n} <\/code><\/pre>\n\n3. ‘woocommerce_add_to_cart_redirect<\/strong>‘: 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. <\/p>\n\nVoorbeeld gebruik<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_add_to_cart_redirect', 'custom_add_to_cart_redirect' ); \n \nfunction custom_add_to_cart_redirect( $url ) { \n return get_permalink( 123 ); \/\/ Replace 123 with the ID of the desired redirect page \n}<\/code><\/pre>\n\n4. ‘woocommerce_cart_totals<\/strong>‘: 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. <\/p>\n\nVoorbeeld gebruik<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_cart_totals', 'custom_cart_totals' ); \n \nfunction custom_cart_totals( $totals ) { \n $totals['custom_total'] = array( \n 'label' => 'Custom Total', \n 'value' => '10.00' \n ); \n return $totals; \n}<\/code><\/pre>\n\n5. ‘woocommerce_product_related_posts_query<\/strong>‘: 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. <\/p>\n\n6. ‘woocommerce_checkout_fields<\/strong>‘: 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. <\/p>\n\nVoorbeeld gebruik<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' ); \n \nfunction custom_checkout_fields( $fields ) { \n $fields['billing']['custom_field'] = array( \n 'label' => 'Custom Field', \n 'required' => true, \n 'clear' => true, \n 'type' => 'text', \n 'class' => array( 'form-row-wide' ) \n ); \n return $fields; \n} <\/code><\/pre>\n\n7. ‘woocommerce_payment_gateways<\/strong>‘: 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. <\/p>\n\nPraktische voorbeelden van het gebruik van WooCommerce hooks <\/h2>\n\n
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. <\/p>\n\n
Aangepaste inhoud toevoegen met behulp van action hooks <\/h3>\n\n
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: <\/p>\n\n
Voorbeeld 1: Een aangepast bericht toevoegen aan de winkelwagenpagina<\/em><\/strong> <\/h4>\n\nadd_action( 'woocommerce_before_cart', 'custom_cart_message' ); \n \nfunction custom_cart_message() { \n echo '<div class=\"custom-message\">Thank you for shopping with us! Please review your cart before proceeding to checkout.<\/div>'; \n} <\/code><\/pre>\n\nIn dit voorbeeld gebruiken we de ‘woocommerce_before_cart<\/strong>‘-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. <\/p>\n\nVoorbeeld 2: Een banner invoegen op de winkelpagina<\/em><\/strong> <\/h4>\n\nadd_action( 'woocommerce_before_main_content', 'custom_shop_banner' ); \n \nfunction custom_shop_banner() { \n echo '<div class=\"custom-banner\"> \n <img src=\"path\/to\/banner-image.jpg\" alt=\"Shop Banner\"> \n <h2>Welcome to our shop!<\/h2> \n <p>Discover our latest products and special offers.<\/p> \n <\/div>'; \n}<\/code><\/pre>\n\nHier gebruiken we de ‘woocommerce_before_main_content<\/strong>‘-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. <\/p>\n\nVoorbeeld 3: Een aangepast tabblad toevoegen aan de afzonderlijke productpagina<\/em><\/strong> <\/h4>\n\nadd_action( 'woocommerce_product_tabs', 'custom_product_tab' ); \n \nfunction custom_product_tab( $tabs ) { \n $tabs['custom_tab'] = array( \n 'title' => 'Custom Tab', \n 'priority' => 50, \n 'callback' => 'custom_tab_content' \n ); \n return $tabs; \n} \n \nfunction custom_tab_content() { \n echo '<h2>Custom Tab Content<\/h2>'; \n echo '<p>This is the content of the custom tab.<\/p>'; \n} <\/code><\/pre>\n\nIn dit voorbeeld gebruiken we de ‘woocommerce_product_tabs<\/strong>‘-hook om een aangepast tabblad toe te voegen aan de enkele productpagina. De ‘custom_product_tab<\/strong>‘-functie voegt een nieuw tabblad toe met een titel-, prioriteits- en callback-functie. <\/p>\n\nDe functie ‘custom_tab_content<\/strong>‘ definieert de inhoud die wordt weergegeven wanneer op het aangepaste tabblad wordt geklikt. <\/p>\n\nUitvoer wijzigen met filterhaken <\/h3>\n\n
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: <\/p>\n\n
Voorbeeld 1: De tekst van de knop “Toevoegen aan winkelwagentje” wijzigen<\/strong><\/em> <\/h4>\n\nadd_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' ); \n \nfunction custom_add_to_cart_text() { \n return 'Buy Now'; \n} <\/code><\/pre>\n\nIn dit voorbeeld gebruiken we het filter ‘woocommerce_product_single_add_to_cart_text<\/strong>‘ om de tekst van de knop ‘Toevoegen aan winkelwagentje’ op de enkele productpagina te wijzigen. De functie ‘custom_add_to_cart_text<\/strong>‘ retourneert de nieuwe knoptekst, in dit geval ‘Nu kopen’. <\/p>\n\nVoorbeeld 2: De afrekenvelden wijzigen<\/em><\/strong><\/h4>\n\nadd_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' ); \n \nfunction custom_checkout_fields( $fields ) { \n \/\/ Remove the \"Company\" field \n unset( $fields['billing']['billing_company'] ); \n \n \/\/ Make the \"Phone\" field required \n $fields['billing']['billing_phone']['required'] = true; \n \n \/\/ Add a custom field \n $fields['billing']['custom_field'] = array( \n 'label' => 'Custom Field', \n 'required' => true, \n 'clear' => true, \n 'type' => 'text', \n 'class' => array( 'form-row-wide' ) \n ); \n \n return $fields; \n} <\/code><\/pre>\n\nHier gebruiken we de filter ‘woocommerce_checkout_fields<\/strong>‘ om de afrekenvelden aan te passen. Met de functie ‘custom_checkout_fields<\/strong>‘ wordt het veld ‘Bedrijf’ verwijderd, wordt het veld ‘Telefoon’ verplicht en wordt een aangepast veld toegevoegd aan het factureringsgedeelte. <\/p>\n\n