Een extra product veld toevoegen aan WooCommerce

Soms heb je bij WooCommerce producten een extra veld nodig, omdat WooCommerce er zelf niet in voorziet.

Nu heeft WooCommerce via de ‘Eigenschappen’ al een heel krachtige manier om informatie aan een product toe te voegen en wanneer het alleen gaat om een specifiek product kenmerk toe te voegen, dan zijn de product eigenschappen eigenlijk de manier om hiervoor te zorgen, maar soms heb je gewoon echt een extra veld nodig, wat niet via de product eigenschappen is op te lossen.

Nu valt gelukkig het toevoegen van zo’n veld best mee. Waar je wel bij stil moet staan, is dat je zoiets in twee stappen moet doen.

Want je moet niet alleen zo’n extra veld toevoegen, je moet het veld ook opslaan in de database, anders heb je er niet veel aan.

De basis opzet ziet er ongeveer zo uit:

<?php 
// Hook om de aangepaste velden toe te voegen aan het product formulier
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_field_to_product' );

// Hook om de aangepaste velden op te slaan
add_action( 'woocommerce_process_product_meta', 'save_custom_field_to_product' );

// Voeg het veld toe aan het product formulier
function add_custom_field_to_product() {
    global $woocommerce, $post;
    
    echo '<div class="product_custom_field">';
    
    // Tekstveld
    woocommerce_wp_text_input(
        array(
            'id' => 'my_custom_field',
            'placeholder' => 'Voer hier de tekst in',
            'label' => 'Aangepast veld', 
            'desc_tip' => 'true',
            'description' => 'Voer hier de omschrijving in van het aangepaste veld.'
        )
    );
    
    echo '</div>';
}

// Sla de aangepaste velden op wanneer het product wordt opgeslagen
function save_custom_field_to_product( $post_id ) {
    $custom_field = $_POST['my_custom_field'];
    if ( ! empty( $custom_field ) ) {
        update_post_meta( $post_id, 'my_custom_field', esc_attr( $custom_field ) );
    }
}

Hier is even één belangrijk ding om rekening mee te houden. De functie ‘add_custom_field_to_product’ heeft betrekking tot alle custom fields die we toe willen voegen.

Dus wil je slechts één veld toevoegen, dan is bovenstaand voorbeeld perfect. Maar stel je nu eens voor, dat je niet alleen een tekstveld, maar ook een checkbox zou willen toevoegen.

Dan gaat de code er al iets anders uitzien

<?php 
// Hook om de aangepaste velden toe te voegen aan het product formulier
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_field_to_product' );

// Hook om de aangepaste velden op te slaan
add_action( 'woocommerce_process_product_meta', 'save_custom_field_to_product' );

// Voeg het veld toe aan het product formulier
function add_custom_field_to_product() {
    global $woocommerce, $post;
    
    echo '<div class="product_custom_field">';
    
    // Tekstveld
    woocommerce_wp_text_input(
        array(
            'id' => 'my_custom_field',
            'placeholder' => 'Voer hier de tekst in',
            'label' => 'Aangepast veld', 
            'desc_tip' => 'true',
            'description' => 'Voer hier de omschrijving in van het aangepaste veld.'
        )
    );
    
    echo '</div>';
    //Checkbox invoegen met omliggende div
    echo '<div class="product_custom_checkbox">';
    woocommerce_wp_checkbox(
        array(
            'id' => 'my_custom_checkbox',
            'label' => 'Aangepaste checkbox', 
            'value' => 'yes',
            'cbvalue' => 'yes',
            'description' => 'Vink dit vakje aan als het product de eigenschap heeft die overeenkomt met deze checkbox.'
        )
    );
    echo '</div>';
    
}

// Sla de aangepaste velden op wanneer het product wordt opgeslagen
function save_custom_field_to_product( $post_id ) {
    $custom_field = $_POST['my_custom_field'];
    if ( ! empty( $custom_field ) ) {
        update_post_meta( $post_id, 'my_custom_field', esc_attr( $custom_field ) );
    }
    $custom_checkbox = isset( $_POST['my_custom_checkbox'] ) ? 'yes' : 'no';
    update_post_meta( $post_id, 'my_custom_checkbox', $custom_checkbox );
    
}

Wanneer je naar deze code kijkt valt een aantal zaken op.

Wanneer we kijken naar de regels 20 en 21, dan zie je dat ik daar twee waarden in het array heb meegegeven aan de functie die het veld creëert, desc_tip en description. In regel 34 heb ik alleen een description meegegeven.

Het verschil hiertussen kan je in de afbeelding hieronder zien:

Wanneer ik de waarde desc_tip ’true’ maak, dan wordt een extra omschrijving getoond, wanneer ik met mijn cursor over een vraagteken ga. Definieer ik het veld niet, of geef ik het een waarde ‘false’, dan krijg ik de omschrijving direct in zijn volledigheid te zien.

Een tweede interessant punt zie je in de regels 32 en 33. Voor de checkbox wordt een tweetal waarden opgegeven, de waarde ‘value’ is de waarde die je ingevuld wilt hebben op het moment dat de checkbox is aangevinkt, de waarde voor ‘cbvalue’ is de waarde die het veld moet hebben, wanneer het voor de eerste keer getoond wordt.

En tenslotte werpen we nog even een blik op regel 47. Dit is misschien een wat merkwaardige constructie, maar wat hier eigenlijk staat is dat wanneer het veld staat aangekruist de waarde ‘yes’, en anders de waarde ‘no’ moet worden opgeslagen.

Wanneer je andere waarden zou willen gebruiken (‘Ja’ / ‘Nee’, ‘Waar’/’Onwaar’, of wat dan ook) dan vervang je natuurlijk die waarden.

Andere veldtypen

We hebben nu twee veld typen de rubriek laten passeren. WooCommerce kent echter nog een aantal andere typen die ik hieronder in een codevoorbeeld de revue zal laten passeren. Vergeet niet om je velden een betekenisvolle omschrijving en veldnaam te geven. Ik zal hierbij geen verdere toelichting geven.

// Hook om de aangepaste velden toe te voegen aan het product formulier
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_radio_buttons_to_product' );

// Hook om de aangepaste velden op te slaan
add_action( 'woocommerce_process_product_meta', 'save_custom_radio_buttons_to_product' );

// Voeg de radiobuttons toe aan het product formulier
function add_custom_radio_buttons_to_product() {
    global $woocommerce, $post;

    echo '<div class="product_custom_field">';
    echo '<h3>' . 'Aangepaste radiobuttons</h3>';

    // Array met opties voor de radiobuttons
    $options = array(
        'option_1' => 'Optie 1',
        'option_2' => 'Optie 2',
        'option_3' => 'Optie 3'
    );

    // Loop door de opties en voeg de radiobuttons toe
    foreach( $options as $key => $label ) {
        woocommerce_form_field(
            'custom_radio_buttons[' . $key . ']',
            array(
                'type' => 'radio',
                'class' => array('form-row-wide'),
                'label' => $label,
                'required' => false
            ),
            get_post_meta( $post->ID, 'custom_radio_buttons[' . $key . ']', true )
        );
    }

    echo '</div>';
}

// Sla de aangepaste velden op wanneer het product wordt opgeslagen
function save_custom_radio_buttons_to_product( $post_id ) {
    $custom_radio_buttons = $_POST['custom_radio_buttons'];

    update_post_meta( $post_id, 'custom_radio_buttons' , esc_attr( $custom_radio_buttons ) );
    }
}

// Hook om de aangepaste velden toe te voegen aan het product formulier
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_select_to_product' );

// Hook om de aangepaste velden op te slaan
add_action( 'woocommerce_process_product_meta', 'save_custom_select_to_product' );

// Voeg de select toe aan het product formulier
function add_custom_select_to_product() {
    global $woocommerce, $post;

    echo '<div class="product_custom_field">';
    
    // Select veld
    woocommerce_wp_select(
        array(
            'id' => 'custom_select',
            'label' => 'Aangepaste select',
            'options' => array(
                'option_1' => 'Optie 1', 
                'option_2' => 'Optie 2', 
                'option_3' => 'Optie 3', 
            )
        )
    );

    echo '</div>';
}

// Sla de aangepaste velden op wanneer het product wordt opgeslagen
function save_custom_select_to_product( $post_id ) {
    $custom_select = isset( $_POST['custom_select'] ) ? $_POST['custom_select'] : '';
    update_post_meta( $post_id, 'custom_select', $custom_select );
}

// Hook om de aangepaste velden toe te voegen aan het product formulier
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_textbox_to_product' );

// Hook om de aangepaste velden op te slaan
add_action( 'woocommerce_process_product_meta', 'save_custom_textbox_to_product' );

// Voeg de tekstvak toe aan het product formulier
function add_custom_textbox_to_product() {
    global $woocommerce, $post;

    echo '<div class="product_custom_field">';
    
    // Textbox veld
    woocommerce_wp_text_input(
        array(
            'id' => 'custom_textbox',
            'label' => 'Aangepaste tekstbox'
            'placeholder' => '',
            'description' => 'Voer hier de waarde in voor het aangepaste tekstveld'
        )
    );

    echo '</div>';
}

// Sla de aangepaste velden op wanneer het product wordt opgeslagen
function save_custom_textbox_to_product( $post_id ) {
    $custom_textbox = isset( $_POST['custom_textbox'] ) ? $_POST['custom_textbox'] : '';
    update_post_meta( $post_id, 'custom_textbox', $custom_textbox );
}

En zo hebben we de belangrijkste velden wel gehad.

Toevoegen aan een ander tabblad

Tot nu toe hebben we alles toegevoegd aan het tabblad ‘algemeen’. Maar wat nu, wanneer we het aan een ander tabblad toe willen voegen? Ook dat is gelukkig heel goed mogelijk. Het is je misschien opgevallen dat we tot nu toe iedere keer de hook ‘woocommerce_product_options_general_product_data‘ hebben gebruikt. En het keyword is hier toch inderdaad wel ‘general’. Wanneer we informatie aan één van de andere tabbladen toe willen voegen, dan doen we dat door de desbetreffende hook aan te roepen.

Er is echter nog een groot aantal andere hooks die je op dit gebied aan kan roepen om op een bepaalde tab/sectie jouw extra informatie op te nemen:

• woocommerce_product_options_related
• woocommerce_product_options_reviews
• woocommerce_product_options_advanced
• woocommerce_product_options_sku
• woocommerce_product_options_stock
• woocommerce_product_options_stock_fields
• woocommerce_product_options_stock_status
• woocommerce_product_options_sold_individually
• woocommerce_product_options_inventory_product_data
• woocommerce_product_options_attributes
• woocommerce_product_options_dimensions
• woocommerce_product_options_shipping
• woocommerce_product_options_shipping_product_data
• woocommerce_product_options_external
• woocommerce_product_options_pricing
• woocommerce_product_options_downloads
• woocommerce_product_options_tax
• woocommerce_product_options_general_product_data

(de reden dat deze lijst niet in volgorde staat is omdat ik dit in de orde dat dit in de broncode voorkomt heb ‘opgevist’)

Maar wat nu wanneer je een eigen tabblad wil maken?

Dat kan ook, maar dat is een compleet nieuwe snippet, die je binnenkort mag verwachten.

De uitdaging: Combineer code snippets!

Nu is de werkelijke uitdaging natuurlijk om de code snippets die ik tot nu toe heb geplaatst met elkaar te combineren. Durf jij dat aan? Een tijdje terug heb ik bijvoorbeeld geschreven over redirects per product. Hier werden product ID’s hard gecodeerd, maar wat natuurlijk ook een mogelijkheid zou zijn, is bij een product een veld op te nemen met ‘redirect URL’ en indien het veld ‘redirect URL met een URL zou zijn gevuld de redirect na de check out uit te voeren.

Want code snippets zijn natuurlijk puzzelstukjes om een puzzel compleet te maken.

Durf jij die uitdaging aan?

Dan ben je al aardig op weg om een echte WordPress / WooCommerce developer te worden. Maar wel een weg die veel tijd en inspanning kost. Wil je een makkelijkere weg volgen, dan kan dat ook via WordXPression’s Cursus WordPress Developer.