KingSync

Terug naar kennisbank

Meta-waarden weergeven met een shortcode.

In dit artikel leer je hoe je een shortcode toevoegt aan WooCommerce waarmee je eenvoudig een meta-waarde van een product kunt weergeven. Deze shortcode werkt op alle pagina’s, inclusief categoriepagina’s en subpagina’s.

Functionaliteit van de shortcode

Met de shortcode [plus_product_show_meta] kun je een specifieke meta-key van een product ophalen en weergeven in een door jou gekozen HTML-element (bijvoorbeeld div, p of span). Daarnaast kun je een CSS-klasse toevoegen aan het wrapper-element voor extra styling.

Gebruik van de shortcode

				
					[plus_product_show_meta meta_key="jouw_meta_key" wrapper="div" class="mijn-css-klasse"]

Beschikbare parameters

Parameter Beschrijving Standaardwaarde
meta_key De meta-key die je wilt tonen (verplicht)
wrapper HTML-element waarin de waarde wordt weergegeven (p, div, span) span
class CSS-klasse die wordt toegevoegd aan het wrapper-element (leeg)

PHP-code voor de shortcode

Om deze functionaliteit toe te voegen, plaats je de volgende code in het functions.php-bestand van je thema of in een maatwerk plugin:

				
					function plus_product_show_meta_shortcode($atts) {
    // Shortcode attributen met standaardwaarden
    $atts = shortcode_atts([
        'meta_key' => '',
        'wrapper'  => 'span', // Standaard wrapper-element
        'class'    => '' // Optionele CSS-klasse
    ], $atts, 'plus_product_show_meta');

    // Stop als er geen meta_key is opgegeven
    if (empty($atts['meta_key'])) {
        return '';
    }

    global $post;

    // Bepaal het product-ID
    $product_id = false;

    if (function_exists('is_product') && is_product()) {
        // Op een productpagina: gebruik het huidige product
        $product_id = get_the_ID();
    } elseif (!empty($post->ID)) {
        // Op andere pagina's: controleer of het een product is
        if ('product' === get_post_type($post->ID)) {
            $product_id = $post->ID;
        }
    }

    // Stop als er geen product-ID is gevonden
    if (!$product_id) {
        return '';
    }

    // Haal de meta-waarde op
    $meta_value = get_post_meta($product_id, $atts['meta_key'], true);

    // Als er geen waarde is, toon niets
    if (empty($meta_value)) {
        return '';
    }
    
    // Manipuleren van de meta-waarde via een filter mogelijk maken.
    $meta_value = apply_filters('plus_product_show_meta_value', $meta_value, $product_id );


    // Beveilig het wrapper-element: alleen toegestane HTML-tags
    $allowed_wrappers = ['p', 'div', 'span'];
    $wrapper = in_array(strtolower($atts['wrapper']), $allowed_wrappers) ? $atts['wrapper'] : 'span';

    // HTML-output genereren
    return sprintf('<%1$s class="%2$s">%3$s</%1$s>', esc_html($wrapper), esc_attr($atts['class']), esc_html($meta_value));
}

// Shortcode registreren
add_shortcode('plus_product_show_meta', 'plus_product_show_meta_shortcode');

Hoe werkt deze code?

  • De shortcode accepteert drie parameters: meta_key, wrapper en class.

  • De code controleert of het een WooCommerce-productpagina is en haalt het juiste product-ID op.

  • De meta-waarde wordt opgehaald met get_post_meta().

  • De waarde wordt alleen weergegeven als deze bestaat.

  • Het wrapper-element is beperkt tot p, div of span om XSS-risico’s te minimaliseren.

  • esc_html() en esc_attr() worden gebruikt om invoer op te schonen.

Voorbeeldgebruik

Stel dat je een aangepaste meta-key custom_sku hebt opgeslagen bij een product. Je kunt deze tonen in een div met een CSS-klasse sku-display als volgt:

				
					[plus_product_show_meta meta_key="custom_sku" wrapper="div" class="sku-display"]

Dit genereert bijvoorbeeld de volgende HTML-uitvoer:

				
					<div class="sku-display">12345-ABC</div>

Je kunt het filter plus_product_show_meta_value gebruiken om de opgehaalde waarde te manipuleren voordat deze wordt weergegeven. Bijvoorbeeld, als je ‘N/A’ wilt tonen als er geen waarde is ingesteld:

				
					/**
 * Meta-value manipuleren voordat deze wordt weergegeven.
 *
 * @param mixed $value De waarde van de opgegeven meta-key
 * @param int $product_id Het ID van het WooCommerce plus_product_show_meta_value
 * @return mixed De weer te geven waarde
 */
add_filter('plus_product_show_meta_value', function($value, $product_id) {
    return empty($value) ? 'N/A' : $value;
}, 10, 2);

Dit zorgt ervoor dat als de meta-waarde leeg is, er ‘N/A’ wordt weergegeven in plaats van niets.

Terug naar kennisbank