WooCommerce product tabs toevoegen

Om elke kans op een verkoop te benutten wil je via de productpagina’s alle belangrijke informatie tonen. Wil je dit doen met enige structuur, dan zijn de product tabs de juiste plek. Hiermee kan je elke soort informatie via een eigen tabje groeperen. In deze handleiding laten we je zien hoe je extra product tabs kan toevoegen. 

De standaard product tabs van WooCommerce

De standaard tabs zijn eenvoudig en behalve voor het tabje “Omschrijving” heb je maar weinig tot geen invloed op inhoud.

  • Omschrijving – Dit tabje is gekoppeld met het editor invoerveld van een product. Naast teksten kan je ook afbeeldingen invoegen. 
  • Extra Informatie – Hier worden afmetingen en de attributen van een product getoond. Worden deze niet ingevoerd, dan blijft dit tabje verborgen.
  • Beoordelingen – Heb je productbeoordelingen ingeschakeld, dan worden deze hier samen met het invoerformulier getoond.

Welke extra product tabs zijn er nog mogelijk?

In principe is alleen het “Omschrijving” tabje geschikt voor je “eigen” productinformatie. De tabs wil je misschien overwegen voor aanvullende informatie. 

  • Verzendinformatie – Dit tabje is handig wanneer je product over specifieke informatie beschikt of wanneer de verzending belangrijk is voor de aankoopbeslissing.
  • Service en garantie – Verkoop je bijvoorbeeld technische producten? Dan wil je de beschikbare servicepunten of garantievoorwaarden bij je product vermelden.
  • Inspiratie of voorbeelden – Naast foto’s waar het gebruik van een product wordt getoond, kan je via dit tabje gebruiken ter inspiratie: Hoe hebben andere klanten het product gebruikt of video’s (van klanten) vinden hier een plek.
  • Contactformulier – Ontvang je regelmatig vragen over producten, dan kan je een extra contactformulier via een product tab tonen. Dit kunnen klanten bijvoorbeeld gebruiken voor vragen over de beschikbaarheid of levering van een product. 
  • Handleidingen – Niet alle antwoorden voor een product hebben plek in de algemene omschrijving. Is het product makkelijk te monteren? Deze vraag kan je perfect beantwoorden met een montagehandleiding.

Extra product tabs toevoegen via je thema

In WooCommerce, kun je extra tabs aan een productpagina toevoegen met behulp van een filter hook of door de installatie van een plugin. Hier zijn de stappen voor het toevoegen een product tab via het filter hook.

Download het functions.php bestand van je child theme via je SFTP programma en open het bestand met een tekst of code editor.

Het toevoegen van extra tabs gebeurd via het filter hook “‘woocommerce_product_tabs'”. Voor elk nu tabje geef je een callback naam op. In ons voorbeeld noemen wij de callback “fw_verzendinfo_tab”. Dat is ook de naam van de custom PHP functie die verantwoordelijk is voor de  inhoud van een tab.

Binnen de filter hook functie kan je meerdere tabs tegelijk toevoegen. Voor elk tabje moet je dan wel aparte callback functies aanmaken.

Het nadeel is dat je met deze code snippet 1 statisch tabje aan alle producten toevoegt. Soms is dat genoeg, maar het kan voordeliger zijn wanneer je dit tabje per product kan aanpassen

Product tabs voor elk product aanpassen met Advanced custom fields (ACF)

Wil je de inhoud van je product tabje per product bepalen? Dan kan je dit eenvoudig regelen met Advanced Custom Fields

Installeer de ACF plugin via de plugin sectie in je WordPress dashboard en maak via de plugin een nieuwe groep aan. 

Binnen de groep maak je dan 3 velden aan:

  1. Het veld om het tabje aan/uit te zetten. Kies als soort “waar / niet waar” en voor de veld naam geef je op “enable_tab”.
  2. De titel voor het tabje. Je kan het standaard soort (Tekst) aanhouden en voor de veld naam voor je “tab_title” in.
  3. Het veld voor de inhoud van een tab. Kies “WYSIWYG-Editor” als soort veld voer “tab_content” in.

De groep moet nog worden “gekoppeld” aan het product post type. Dit kan je opgeven via “Locatie”.

Sla de groep op en plaats dan de volgende code in het functions.php bestand van je child theme. Verwijder eventueel de code die wij eerder hebben genoemd.

Welke plugins zijn er voor het aanmaken van product tabs?

Er zijn verschillende plugins beschikbaar waarmee je eenvoudig extra tabs aan productpagina’s in WooCommerce kunt toevoegen. Hier zijn een paar populaire opties:

WooCommerce Extended Coupon Features

Custom Product Tabs for WooCommerce

Plugin developer: Code Parrots
Licentie: Freemium
Prijs: vanaf $29,99 / jaar

Deze plugin breidt WooCommerce uit, zodat jij als winkelier extra tabbladen aan je producten kan toevoegen. De tabbladen worden netjes weergegeven op de afzonderlijke productpagina’s, aan de rechterkant van het “Omschrijving”-tabblad.

Je kunt eenvoudig individuele product tabbladen beheren via het product scherm en deze per product toevoegen. Bovendien kan je “standaard” tabbladen aanmaken en deze moeiteloos aan meerdere producten toevoegen.

Met de betaalde versie heb je o.a. nog meer functies om te bepalen bij welke pagina’s de “standaard” tabbladen wel of niet wil tonen.

WooCommerce Product Tabs

WooCommerce Product Tabs

Plugin developer: Barn2 Plugins
Licentie: Freemium
Prijs: € 59,00 / jaar

Met de plugin kan je zoveel extra tabbladen toevoegen als je maar wilt aan je WooCommerce-product. Het voegt de standaard WordPress WYSIWYG-editor toe voor elk nieuw tabblad dat je maakt. Bovendien ondersteunt het ook shortcodes, afbeeldingen en HTML code als tabblad inhoud.

Je kunt een nieuw toegevoegd tabblad instellen als het standaard tabblad voor alle producten of het gebruiken voor een specifiek product. De WooCommerce Product Tabs-plugin stelt je ook in staat om de volgorde van alle toegevoegde tabbladen aan te passen.

Met de betaalde versie kan je onder andere de tabs anders  vormgeven en heb je extra’s opties waarmee je kan bepalen voor welke productcategorieën welke tabs worden getoond.

WooCommerce Tab Manager

WooCommerce Tab Manager

Plugin developer: SkyVerge
Licentie: Premium
Prijs: $99,00 / jaar

Tab Manager geeft je volledige controle over de tabbladen op je productpagina, waardoor je onder andere:

  • Eenvoudig nieuwe tabbladen voor producten kan maken
  • Tabbladen kunt delen tussen meerdere producten
  • Tabbladen kunt herschikken met een visuele sleep-en-neerzet-interface

De plugin herkent zelfs de meeste door andere plugins toegevoegde tabbladen worden, zodat je deze kan verbergen of opnieuw herschikken  naast je eigen tabbladen.

Beheer de standaard tabbladen voor alle producten in je winkel (die op een per-productbasis kunnen worden overschreven). Je kunt tabbladen herschikken, ze een andere naam geven, kern-tabbladen verwijderen en je eigen algemene tabbladen toevoegen.

Elementor + Ocean eComm Treasure Box

Met Elementor kan je de bestaande  tabs opmaken, maar geen eigen tabs toevoegen. Dat kan je wel met de plugin Ocean eComm Treasure Box. Deze schatkist met e-commerce functies is een uitbreiding voor het WordPress thema OceanWP en de gratis versie van Elementor. Wil je een webshop met Elementor bouwen, dan kan je dat met deze plugin zonder dat je de Elementor Pro versie moet aanschaffen.

Welke optie is voor mijn webshop het beste?

Kies je voor een plugin of werk je liever met je eigen code en de ACF plugin? Op basis van de functies voor je eigen tabbladen en je kennis (over het schrijven van eigen PHP code) kan je het beste bepalen welke optie het beste is. Gebruik bijvoorbeeld geen uitgebreide plugin wanneer je maar voor een klein aantal producten een extra tabje wil toevoegen.