Customizing je WooCommerce Productpagina’s met Hooks en Filters

WooCommerce biedt een solide basis voor het opzetten van een online winkel, maar je wilt vaak meer controle over hoe je productpagina’s eruitzien en functioneren. Met hooks en filters kun je de WooCommerce-productpagina’s naar eigen wens aanpassen, zonder dat je de kernbestanden van WooCommerce hoeft te wijzigen. In deze blog duiken we in de technische details van hoe je hooks en filters kunt gebruiken om je productpagina’s aan te passen.

Wat zijn Hooks en Filters in WooCommerce?

• Hooks: Dit zijn punten in de WooCommerce-code waarin je je eigen functies kunt ‘haken’ (toevoegen), zoals het toevoegen van extra content of het aanpassen van bestaande elementen. Hooks zijn onderverdeeld in:
  • Action hooks: Hiermee kun je nieuwe functionaliteiten toevoegen.
  • Filter hooks: Hiermee kun je bestaande functionaliteiten wijzigen.
• Filters: Met filters kun je data manipuleren voordat deze wordt weergegeven, zoals het aanpassen van prijzen, beschrijvingen of producttitels.

Laten we nu bekijken hoe je dit in de praktijk kunt toepassen met behulp van code.

1. Een element toevoegen aan de productpagina

Stel dat je een speciale boodschap wilt toevoegen op de productpagina, bijvoorbeeld onder de producttitel. We gebruiken hiervoor de woocommerce_single_product_summary action hook.

Codevoorbeeld:

phpCode kopiëren// Voeg een speciale melding toe onder de producttitel
add_action( 'woocommerce_single_product_summary', 'speciale_product_melding', 6 );

function speciale_product_melding() {
    echo '<p class="custom-message">Gratis verzending bij bestellingen boven €50!</p>';
}

In dit voorbeeld voegen we een boodschap toe vlak onder de producttitel. De 6 in de hook bepaalt de volgorde van uitvoer (waarbij een lager nummer hoger op de pagina verschijnt).

Uitleg:

• Hook: woocommerce_single_product_summary is een veelgebruikte hook voor productpagina’s.
• Functie: speciale_product_melding() voegt een nieuwe paragraaf met een boodschap toe.

2. Productprijs aanpassen met een filter

Met een filter kun je de weergegeven prijs van een product dynamisch aanpassen. Bijvoorbeeld, als je een korting wilt toepassen op basis van het product-ID.

Codevoorbeeld:

add_filter( 'woocommerce_get_price_html', 'pas_product_prijs_aan', 10, 2 );

function pas_product_prijs_aan( $price, $product ) {
    if ( $product->get_id() == 123 ) { // Vervang 123 met je product-ID
        $price = '<span class="custom-price">€19,99</span>';
    }
    return $price;
}

Uitleg:

• Filter: woocommerce_get_price_html wordt gebruikt om de HTML van de prijs aan te passen.
• Functie: pas_product_prijs_aan() controleert het product-ID en verandert de prijs alleen voor dat specifieke product.

3. Een veld toevoegen aan het productformulier (bijvoorbeeld voor personalisatie)

Als je bijvoorbeeld gepersonaliseerde producten verkoopt, kun je een veld toevoegen aan het productformulier zodat klanten hun naam of een opmerking kunnen invoeren.

Codevoorbeeld:

add_action( 'woocommerce_before_add_to_cart_button', 'custom_product_text_field' );

function custom_product_text_field() {
    echo '<div class="custom-product-field">';
    echo '<label for="custom_name">Voer je naam in:</label>';
    echo '<input type="text" id="custom_name" name="custom_name" />';
    echo '</div>';
}

// Sla de waarde van het tekstveld op in de winkelwagen
add_filter( 'woocommerce_add_cart_item_data', 'custom_field_save_to_cart', 10, 2 );

function custom_field_save_to_cart( $cart_item_data, $product_id ) {
    if( isset( $_POST['custom_name'] ) ) {
        $cart_item_data['custom_name'] = sanitize_text_field( $_POST['custom_name'] );
    }
    return $cart_item_data;
}

// Toon de aangepaste veldwaarde in de winkelwagen
add_filter( 'woocommerce_get_item_data', 'display_custom_field_cart', 10, 2 );

function display_custom_field_cart( $item_data, $cart_item ) {
    if( isset( $cart_item['custom_name'] ) ) {
        $item_data[] = array(
            'key'   => 'Naam',
            'value' => $cart_item['custom_name']
        );
    }
    return $item_data;
}

Uitleg:

• Hook: woocommerce_before_add_to_cart_button voegt een tekstveld toe aan het productformulier.
• Opslag: woocommerce_add_cart_item_data slaat de waarde van het tekstveld op in de winkelwagen.
• Weergave: woocommerce_get_item_data toont de ingevoerde waarde in de winkelwagen.

4. Producttabs aanpassen of verwijderen

WooCommerce-productpagina’s bevatten standaard tabs zoals “Beschrijving” en “Beoordelingen”. Met hooks kun je deze tabs aanpassen of verwijderen.

Codevoorbeeld:

add_filter( 'woocommerce_product_tabs', 'verwijder_beoordelingen_tab', 98 );

function verwijder_beoordelingen_tab( $tabs ) {
    unset( $tabs['reviews'] );  // Verwijdert de beoordelingen-tab
    return $tabs;
}

// Voeg een nieuwe tab toe
add_filter( 'woocommerce_product_tabs', 'voeg_custom_tab_toe' );

function voeg_custom_tab_toe( $tabs ) {
    $tabs['custom_tab'] = array(
        'title'    => 'Meer informatie',
        'priority' => 50,
        'callback' => 'toon_custom_tab_content'
    );
    return $tabs;
}

function toon_custom_tab_content() {
    echo '<h2>Extra Informatie</h2><p>Hier kun je aanvullende productdetails tonen.</p>';
}

Uitleg:

• Filter: woocommerce_product_tabs wordt gebruikt om tabs aan te passen.
• Functie: voeg_custom_tab_toe() voegt een nieuwe tab toe met aangepaste inhoud.

5. Productafbeeldingen aanpassen

Stel dat je de productafbeelding wilt vervangen door een aangepaste afbeelding onder bepaalde voorwaarden (zoals tijdens een uitverkoop).

Codevoorbeeld:

add_filter( 'woocommerce_single_product_image_html', 'vervang_product_afbeelding', 10, 2 );

function vervang_product_afbeelding( $html, $post_id ) {
    $product = wc_get_product( $post_id );
    if ( $product->is_on_sale() ) {
        $html = '<img src="' . get_stylesheet_directory_uri() . '/images/special-offer.jpg" alt="Speciale Aanbieding" />';
    }
    return $html;
}

Uitleg:

• Filter: woocommerce_single_product_image_html wordt gebruikt om de productafbeelding aan te passen.
• Functie: vervang_product_afbeelding() vervangt de productafbeelding wanneer het product in de uitverkoop is.

Conclusie

WooCommerce biedt een breed scala aan hooks en filters waarmee je de productpagina’s volledig kunt aanpassen. Of je nu nieuwe elementen wilt toevoegen, bestaande elementen wilt wijzigen, of zelfs de functionaliteit van je pagina wilt uitbreiden met dynamische velden, hooks en filters bieden je de flexibiliteit om dit te doen zonder de kernbestanden te wijzigen. Dit zorgt ervoor dat je toekomstige WooCommerce-updates zonder problemen kunt uitvoeren, terwijl je toch een unieke gebruikerservaring biedt.

Wil je hulp bij het aanpassen van je WooCommerce-webshop? Neem dan contact met ons op voor maatwerkoplossingen!