WooCommerce elementen aanpassen

Wil je graag jouw WooCommerce webshop een totaal andere look geven? Of de huidige blokken op een andere positie neerzetten? Dan kun je middels PHP scripting bepaalde WooCommerce elementen positioneren naar de gewenste positie. Om dit te kunnen bewerkstelligen dien je wel enige ervaring te hebben met de programmeertaal PHP. Let wel op! Het kan voorkomen dat bepaalde PHP functies die we hier beschrijven in de toekomst niet meer zullen werken. Merk je dit op? Laat het dan even weten in de comments. Alle onderstaande scripts kunnen worden geplaatst in de functions.php van jouw thema. Maak hiervoor wel een child theme aan, anders zullen je wijzigingen verloren gaan bij een thema update.

Elementen uitschakelen

Wellicht heb je bepaalde elementen die niet relevant zijn, en die je graag wilt uitschakelen. Vaak is het niet nodig om dit via een script wijziging uit te voeren. Kijk daarom eerst in het WordPress dashboard of dit ook via de ‘Customizer’ te wijzigen is. De Customizer is te benaderen via: ‘Weergave’ > ‘Customizer’. In de Customizer kun je tot slot klikken op ‘WooCommerce’. Hier zou je eventuele elementen ook kunnen in of uitschakelen.

Product tabs verplaatsen

Op elke pagina van jouw product worden standaard de product tabs weergeven. Product tabs bevatten bijvoorbeeld de productomschrijving, extra product informatie of product reviews. Het kan dus zijn dat de positie van deze product tabs in jouw geval niet op de gewenste positie staat. Het is daarom mogelijk om de product tabs te verplaatsen van onder de ‘Add to cart’ sectie naar boven ‘Add to cart’. Om dit te bewerkstelligen neem je het onderstaande PHP script over en plaatst dit in de functions.php van jouw thema.

Product tabs verplaatsen van onderop de pagina naar rechtsboven onder de ‘Add to cart’ button.

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 60 );

Product tabs verplaatsen van onderop de pagina naar rechtsboven net boven de ‘Add to cart’ button.

add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 0 );

Product tabs verwijderen

Heb jij bijvoorbeeld bepaalde product tabs niet nodig, dan kan je er voor kiezen om deze te verwijderen. Dit is helaas niet mogelijk vanuit de Customizer. Om een bepaalde tab te verwijderen kun je het onderstaande script gebruiken. Het onderstaande script geeft aan dat je alle drie tabs verwijderd. Wil je bijvoorbeeld alleen maar twee van de drie tabs verwijderen, haal dan het stukje code weg dat je wilt behouden. In dit geval willen wij enkel de tab ‘Omschrijving’ behouden. Dan zorgen we dat we de volgende regel uit het script weg halen unset( $tabs['description'] );

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

unset( $tabs['description'] ); // Verwijder de omschrijving tab
unset( $tabs['reviews'] ); // Verwijder de reviews tab
unset( $tabs['additional_information'] ); // Verwijder de extra informatie tab

return $tabs;

}

Product tabs hernoemen

Het kan ook voorkomen dat je de product tabs wilt hernoemen. Misschien vind je ‘product omschrijving’ wel beter passen dan enkel ‘omschrijving’. Ook hiervoor bestaan standaard scripts die je aan kunt passen. In onderstaand voorbeeld hebben wij de tab ‘description’ gewijzigd naar ‘Product omschrijving’, de tab ‘reviews’ veranderd naar ‘Beoordelingen’ en tot slot de tab ‘additional information’ naar ‘Details’.

add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {

$tabs['description']['title'] = __( 'Product omschrijving' ); // Hernoem de omschrijving tab
$tabs['reviews']['title'] = __( 'Beoordelingen' ); // Hernoem de reviews tab
$tabs['additional_information']['title'] = __( 'Details' ); // Hernoem de extra informatie tab

return $tabs;

}

Extra product tabs toevoegen

Ook is het mogelijk om extra product tabs toe te voegen. Echter is dit niet net zo eenvoudig als het wijzigen van de huidige tabs. Voor het toevoegen van extra product tabs raden wij de plugin WooCommerce tab manager aan van de uitgever Yith. Dit betreft een betaalde plugin en is al beschikbaar vanaf 79,99 per jaar. Hierbij ontvang je ook degelijke support en updates. Tevens kan je deze plugin kosteloos 30 dagen uitproberen.

Product reviews uitschakelen

Product reviews kunnen vaak handig zijn. Vaak geven goede reviews potentiele klanten net dat ene setje om tot een aankoop over te gaan. Helaas kunnen negatieve reviews het tegenovergestelde effect bereiken, waardoor jouw conversie zal verminderen. In dit geval kan het handig zijn om de reviews juist uit te schakelen. Gelukkig kunnen we de reviews via het WordPress dashboard eenvoudig uitschakelen.

Om de product reviews uit te schakelen log je allereerst in op je WordPress dashboard en ga je vervolgens naar ‘WooCommerce’ > ‘Instellingen’. Op de instellingen pagina navigeer je vervolgens naar het tabblad ‘Producten’ en kom je als het goed is, uit op ‘Producten’ > ‘Algemeen’. Op deze pagina kun je de product reviews aan of uitzetten. Om de reviews uit te schakelen, kun je alles uitvinken. In totaal heb je drie verschillende opties wat betreft product reviews. Deze opties gaan we nu bespreken.

Waarderingen vereist stellen
Wanneer een klant een review achter laat in de vorm van een tekstbericht, is het bij deze optie ook verplicht om een review in sterren aan te geven. Een klant kan dan een beoordeling geven van een tot maximaal vijf sterren.

“Geverifieerde eigenaar”-label tonen voor klantbeoordelingen
Hiermee geeft u website bezoekers de mogelijkheid altijd een review achter te kunnen laten. Ook al heeft men geen product uit jouw webshop besteld. Heeft men het product wel op jouw webshop besteld en schrijft deze persoon een review, dan zal je achter de naam van dit persoon

“Geverifeerde eigenaar” zien staan
Alleen beoordelingen van geverifieerde eigenaar toestaan
Met deze optie worden enkel de klanten die jouw product hebben aangeschaft op jouw webshop in de gelegenheid gesteld om een review achter te laten.

Button ‘In winkelmand’ aanpassen

Het is ook mogelijk de ‘In winkelmand’ button aan te passen. Hiervan kun je de tekst wijzigen. Helaas is het niet mogelijk om dit vanuit het WordPress dashboard te doen. Met een paar regeltjes code PHP zal je in staat moeten zijn dit aan te passen. In het onderstaande script hebben wij de button tekst ‘In winkeldmand’ aangepast naar ‘Toevoegen aan winkelmand’. Wil je hier iets anders van maken dan kun je deze tekst aanpassen naar jouw wensen.

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' );    // 2.1 +

function woo_custom_cart_button_text() {

return __( 'Toevoegen aan winkelmand', 'woocommerce' );

}

Winkelmand button wijzigen voor archiefpagina’s?
Het wijzigen van de winkelmand button op de archiefpagina’s gaat op een iets andere manier. Hiervoor kun je het onderstaande script overnemen en plaatsen in je functions.php. Het script lijkt erg op dat van de normale ‘In winkelmand’ button. Ook in het onderstaande script hebben we weer de tekst ‘In winkelmand’ aangepast naar ‘Toevoegen aan winkelmand’.

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );    // 2.1 +

function woo_archive_custom_cart_button_text() {

return __( 'Toevoegen aan winkelmand', 'woocommerce' );

}

Hulp nodig bij het aanpassen van elementen in WooCommerce?

Vind je het erg ingewikkeld om met PHP om te gaan? Of kom je ergens niet uit? Laat het ons dan even weten! Wij helpen je graag bij het aanpassen van jouw WooCommerce webshop.

Contact