Eigen producttabbladen maken in WooCommerce

De klanten van je webshop hebben informatie nodig: hoe meer, hoe beter. Dankzij de e-commerceoplossing WooCommerce voor WordPress kun je al extra informatie aan je producten toevoegen. Naast de standaardzaken zoals naam, prijs, afbeelding of korte beschrijving heb je 3 standaard producttabbladen:

1. Tabblad Beschrijving met je uitgebreide productbeschrijving
2. Aanvullende informatie met je productkenmerken
3. Beoordelingen met de reviews van klanten over je product

Maar wat als je meer eigen producttabbladen in WooCommerce nodig hebt? Dan heb je twee mogelijkheden. Of je kunt programmeren in PHP en schrijft code die je in het functions.php-bestand van je childthema zet. Of je gebruikt een plugin voor WooCommerce waarmee je zonder programmeren tabbladen maakt zoals jij wilt. We laten je beide manieren zien om eigen producttabbladen toe te voegen.

Eigen tabbladen toevoegen met PHP

Ken je PHP en WordPress, dan kun je zelf een oplossing bouwen om eigen tabbladen aan je producten toe te voegen. Maak een childthema als je dat nog niet hebt, open het bestand functions.php en ga aan de slag. De WooCommerce-core biedt een filterhook met de naam woocommerce_product_tabs om eigen tabbladen toe te voegen. Daar haak je eenvoudig op in.

Als voorbeeld voegen we een nieuw tabblad ‘Verzending en levertijden’ toe. Daarmee geven we de klant meer informatie over de verzending, zoals wanneer het pakket aankomt of welke vervoerders worden gebruikt.

We beginnen met inhaken op het filter:

add_filter( 'woocommerce_product_tabs', 'my_shipping_tab' );
function my_shipping_tab( $tabs ) {
    // Adds the new tab
    $tabs = array(
        'title'     => __( 'Shipping & Delivery', 'child-theme' ),
        'priority'  => 50,
        'callback'  => 'my_shipping_tab_callback'
    );
    return $tabs;
}

Het belangrijkst zijn de titel, de prioriteit en de callbackfunctie. Wil je de positie van het tabblad wijzigen, bijvoorbeeld zodat het als eerste staat, zet de prioriteit dan op 1. De callback is de functie die we nu definiëren. Die geeft de inhoud van het tabblad terug:

function my_shipping_tab_callback() {
	// The new tab content
	echo '<h2>Shipping & Delivery</h2>';
	echo '<p>We ship for free within USA using UPS.</p>';
}

Dat was het: nu heeft elk product dit tabblad. Je kunt ook tabbladen verwijderen of bestaande tabbladen hernoemen.

Maar wat als je productspecifieke of categoriegebonden tabbladen in WooCommerce nodig hebt? Je wilt bijvoorbeeld een maattabel tonen, maar alleen bij producten in de categorie kleding. Kies dan voor een plugin!

Categorietabbladen maken in WooCommerce

Met de WooCommerce Ultimate Custom Product Tabs-plugin maak je tabbladen zoals jij wilt:

• Eigen specifieke tabbladen maken
• Tabbladen alleen voor bepaalde categorieën toevoegen
• Globale producttabbladen tonen
• Een icoon voor tabbladen plaatsen
• Styling toevoegen en meer

Dit zijn slechts enkele van de belangrijkste functies die deze plugin biedt voor het beheer van producttabbladen. Laten we het voorbeeld van hierboven nemen: een tabblad voor één categorie maken. Ga naar wp-admin > WooCommerce > Ultimate Tabs. Activeer bijvoorbeeld tabblad 1 en voeg een titel, inhoud en prioriteit toe. Daarna volgt het onderdeel ‘Apply to’, waar je instelt waar het tabblad moet verschijnen. En dat was het: het tabblad verschijnt nu alleen bij de hoodies. Wat kan deze plugin nog meer? Hij kan de standaardtabbladen hernoemen, uitschakelen en opnieuw ordenen, of de tabbladfunctie helemaal uitschakelen.

De tabbladfunctie van WooCommerce uitschakelen

Soms is het beter voor SEO of voor je klanten dat ze alle inhoud direct zien. Dan kan het handig zijn de tabbladen weg te halen en beschrijving, technische gegevens en reviews direct te tonen. Wil je de tabbladfunctie helemaal verwijderen, voeg dan dit script toe:

wp_dequeue_script( 'wc-single-product' );

Voeg daarna deze CSS toe om de producttabbladen te verbergen:

.woocommerce-tabs ul.tabs {
display: none !important;
}