Hoe het tabblad aanpassen op je product pagina?

Als je gebruik maakt van WooCommerce dan heb je op de producten pagina een tabbladen overzicht. Op deze tabbladen vind je informatie over het product, reviews en eventueel extra informatie over het product.

Standaard vind je deze tabbladen op een product pagina:

  • Beschrijving
  • Extra informatie
  • Reviews

Het tablat extra informatie wordt alleen toegevoegd als je het product eigenschappen toekent. Dit kunnen verschillende eigenschappen zijn. Denk hierbij aan afmetingen of type nummer.

Binnen WooCommerce kun je deze tabbladen niet aanpassen. Als je bijvoorbeeld de naam van de tab wilt veranderen dan moet je hiervoor gebruik maken van een code.

Deze code moet je dan plaatsen in het functions.php bestand. Hieronder geven wij je een paar voorbeelden hoe je de verschillende tabs kunt aanpassen.

Tab verwijderen

Met onderstaande code kun je de tabs verwijderen op je producten pagina.

Als je alleen de review tab wilt verwijderen dan voeg je bovenstaande code toe aan je functions.php bestand, maar je verwijderen de twee lijnen met description en additional information.

Tab naam aanpassen

Met onderstaande code kun je de tab naam aanpassen van je tabbladen.

Tab volgorde aanpassen

Met onderstaande code kun je de volgorde van de tabbladen aanpassen. Je kunt er voor kiezen om het review tabblad eerst te tonen en daarna bijvoorbeeld het beschrijving tabblad.

Tab aanpassen

Met onderstaande code kun je een tabblad aanpassen. Je kunt een standaard tekst toevoegen die op alle producten pagina’s worden toegevoegd.

Tab toevoegen

Tot slot een tab toevoegen. Met onderstaande code voeg je eenvoudig een extra tabblad toe aan het product.

Nadeel hiervan is dat je wel direct de tekst mee moet geven aan het tabblad. Je kunt dit tabblad bijvoorbeeld opmaken met informatie over de verzending en betaalmogelijkheden. Deze informatie wordt dan standaard als vierde tabblad toegevoegd aan je overzicht.

Heb je een vraag over de verschillende tabbladen op je producten pagina. Laat dan hieronder een reactie achter.

22 reacties op “Hoe het tabblad aanpassen op je product pagina?

  1. Ilona zegt:

    Goedendag,

    als de tab wordt geopend staat er standaard boven de eigen tekst een titel. Bv. Productbeschrijving. Dus niet in de tab zelf maar boven de tekst wanneer je de tab opent. Is er een mogelijkheid om deze te verwijderen?

    Alvast bedankt!

    • Maarten Hendrix zegt:

      Goedemiddag Ilona, hartelijk bedankt voor je reactie! Het is zeker mogelijk om deze tekst te laten verdwijnen door middel van een display none command in de CSS. Zou je de link van jou webshop kunnen doormailen of hieronder bij de reacties zetten zodat we de code gratis voor je kunnen aanmaken?

        • Maarten Hendrix zegt:

          Hi Tim,

          De twee code’s hieronder kun je daarvoor gebruiken:

          .woocommerce #content div.product .woocommerce-tabs ul.tabs li, .woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li, .woocommerce-page div.product .woocommerce-tabs ul.tabs li { display: none; }

          Eventueel met een extra display none:

          .woocommerce #content div.product .woocommerce-tabs ul.tabs li, .woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li, .woocommerce-page div.product .woocommerce-tabs ul.tabs li { /* display: inline-block; */ display: none; }

          ​Mocht je verder nog vragen hebben, mail gerust!
          Succes met je business!​

  2. lilian zegt:

    Dag Maarten,

    Na lang zoeken kwam ik op dit topic. Dank daarvoor!! Ik heb de code om de volgorde aan te passen in functions.php geplakt, maar dat werkt niet. Bij mijn product omschrijving staat nu

    Product Information
    Categorie: Dienbladen & Etageres.

    €37.50

    Oude brocante mangelbak.

    Tag: mangelbak oud hout.

    Ik wil de tag niet zichtbaar en ook product omschrijving wil ik niet op deze plek. Ik heb letterkleur aangepast zodat je het niet ziet, maar dat is niet een echte oplossing. Heb jij tips? Hartelijk dank als je wilt antwoorden

    • Maarten Hendrix zegt:

      Beste Lilian,

      Bedankt voor je reactie. Zou je een link naar de pagina kunnen sturen waar je bovenstaande gegevens terug vindt?
      Het moet zeker mogelijk zijn om het goed te kunnen oplossen 🙂

      Stuur gerust een e-mail naar ons via het contactformulier.

      • lilian zegt:

        Beste Maarten,

        Dank voor je reactie! Zag het net toevallig toen ik het probleem weer googde:)) De website is nog niet online. dienblad
        Product Information

        €27.50

        Dienbladtafel in de kleur donker grijs/taupe. Super leuk om te decoreren met windlichten of in de badkamer met bad spulletjes. Genoeg mogelijkheden te bedenken.

        Product Information
        €27.50
        Op voorraad
        AANTAL
        Add to Wishlist
        loading
        Tags: dienblad oud hout, etagere

        Ik heb SKU inmiddels kunnen verwijderen door display none toe te voegen, maar voor product informatie, Tags en voorraad krijg ik het niet voor elkaar. Dank nogmaals https://nieuwesite.cedante.nl/wp-admin grt, Lilian

  3. lilian zegt:

    Beste Maarten,

    Inmiddels heb ik product vooraad uit de product page content kunnen halen
    .quick-view-popup .product-info .product_meta .stock,
    .single-product-page .product-info .product_meta .stock {
    float: left;
    clear: both;
    width: 100%;
    display: none;
    Door weer display none in de css te zetten. Ik weet niet of dit de manier is, maar is wel weg nu. Nu idd die tags en product omschrijving. Hartelijke groet, Lilian

  4. Debbie zegt:

    Waar kan ik de content voor deze tab nu toevoegen ?
    Ik wil graag een extra tab gebruiken voor maattabel en het is mij gelukt deze toe te voegen maar ik weet nu niet waar ik de tekst kan plaatsen, deze verschilt namelijk per product

    • Maarten Hendrix zegt:

      Hi Debbie, bedankt voor je reactie! Wat ik zo snel op je website kan zien is het inmiddels gelukt met het plaatsen van de maattabel?
      Ik hoor graag.
      Fijne dag vandaag!

    • Maarten Hendrix zegt:

      Hi Marjolein, bedankt voor je reactie. Het is wel mogelijk, maar niet bij elk thema.
      Het beste kun je kiezen voor het Flatsome Thema dan kun je in het thema gewoon heel gemakkelijk het design van je tabbladen aanpassen.
      Heb je geen flatsome thema dan moet het een css aanpassing. Dat hangt van het thema af “hoe ingewikkeld” het wordt.
      Succes!

  5. Meg zegt:

    Kan je door middel van codering ook 2 tabbladen toevoegen? een over levertijd en een over verzending?

    En kan je ook bij deze constructie gebruik maken van een wp form erin?

    • Maarten Hendrix zegt:

      Hi Annemieke, bedankt voor je mail. Je bedoelt waarschijnlijk dat het bij extra informatie een eigenschap wel of niet naar een “archief” pagina gaat. Dit kun je instellen per eigenschap. Ga naar: producten > eigenschappen > pak de eigenschap met link, klik op bewerken. De hoofdeigenschap, niet de termen. Check of het vinkje Archieven activeren aan staat. Deze staat bij de producten waarop je kunt klikken bij extra informatie aan, doe dit ook voor de producten waar dit niet het geval is 🙂 Succes!

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.