WooCommerce heeft de e-commerce-industrie vandaag de dag stormenderhand veroverd met zijn baanbrekende flexibiliteit en aanpassingsmogelijkheden. Het staat hoog aangeschreven in de e-commercewereld en heeft momenteel een marktaandeel van 27% .
Voorgebouwde sjablonen en productpagina's voldoen echter niet aan de behoeften van elk bedrijf. WooCommerce biedt veel aanpassingsmogelijkheden.
Om goed te presteren, moet uw webwinkel de beste personalisatiepraktijken volgen. Een belangrijk onderdeel van personalisatie vindt u in productpagina's en sjablonen. Een goed geïmplementeerde personalisatiestrategie kan het aantal afgebroken bestellingen verminderen.
Aangezien de meeste klanten uw webwinkel bezoeken, moet u het navigeren en aanpassen van producten en sjablonen zo eenvoudig mogelijk maken om succes te garanderen.
In dit artikel lees je hoe je WooCommerce-templates kunt aanpassen, producttemplates kunt bewerken en productpagina's kunt personaliseren.
Waarom is het belangrijk voor winkeleigenaren om WooCommerce-templates aan te passen?
WooCommerce biedt enorm veel aanpassingsmogelijkheden. Je kunt alles aanpassen, van de afrekenpagina tot winkelpagina's, categoriepagina's, bedankpagina's, enzovoort. Dit helpt je webwinkel zich te onderscheiden van de concurrentie, maar om echt uniek te zijn, kan het aanpassen van WooCommerce-templates uitkomst bieden.
Het is essentieel om de standaardpagina's van uw website aan te passen om een andere uitstraling te creëren dan uw concurrenten. U kunt de standaardtemplates ook personaliseren om uw bedrijf een voorsprong te geven.
De sjablonen die u gebruikt, kunnen worden aangepast om functionaliteit en details aan uw webwinkel toe te voegen. Met deze functies kunt u klanten een betere ervaring bieden. Daarom is het belangrijk om uw e-commercewinkel up-to-date te houden door u te verdiepen in het bewerken van WooCommerce-sjablonen. Lees verder om te ontdekken hoe u WooCommerce-sjablonen kunt bewerken.
Lees : Hoe update ik mijn betaalpasgegevens in WooCommerce?
WooCommerce-templates aanpassen met PHP
Plugins en codefragmenten stellen je in staat om vrijwel elk aspect van je website aan te passen. Met WooCommerce kun je sjablonen programmatisch bewerken.
Hieronder volgen twee manieren om sjablonen programmatisch aan te passen:
- Sjablonen overschrijven
- Met haken
Beide methoden werken, dus kies de methode die voor jou het gemakkelijkst is. Je moet de belangrijkste verschillen tussen deze methoden begrijpen om te bepalen wanneer je welke moet gebruiken.
Hooks versus sjablonen overschrijven
Met hooks kunnen eenvoudige aanpassingen worden gedaan met behulp van acties en filters. Door sjabloonbestanden te overschrijven, kunt u complexere aanpassingen uitvoeren.
Let er bovendien op dat u een sjabloonbestand met een hook niet overschrijft als deze in een specifiek sjabloonbestand wordt gebruikt. Het overschrijven van het sjabloonbestand zal ertoe leiden dat de hooks in dat bestand worden vervangen en niet langer effectief zijn.
Kies de methode die het beste bij je past nadat je je behoeften in kaart hebt gebracht.
Ontdek : Beste WooCommerce producttabel-plugins
WooCommerce-templates aanpassen door ze te overschrijven
Bij complexe aanpassingen is het beter om je sjablonen te overschrijven dan om hooks te gebruiken.
Het bewerken van functions.php is vergelijkbaar. In plaats van de themabestanden moeten de belangrijkste WooCommerce-sjabloonbestanden worden bewerkt.
Klik op Plugins > Plugin-editor, kies WooCommerce uit het下拉菜单 en selecteer templates om de templatebestanden te bekijken.
Deze sectie bevat alle belangrijke bestanden die u moet bewerken, namelijk archive-product.php, content-product-cat.php en content-product.php. Het is ook mogelijk om sjabloonbestanden op meerdere plaatsen te bewerken, zoals in het winkelmandje, bij het afrekenen en in de e-mail.
De sjabloonbestanden van WooCommerce bieden veel mogelijkheden om dingen aan te passen. Zo kun je zowel de submappen als de hoofdmappen personaliseren.
De volgende stap is het bekijken van aangepaste WooCommerce-templates.
Voeg shortcodes toe aan WooCommerce-templates.
Shortcodes zijn een veelgebruikte manier om WooCommerce-code aan te passen. WordPress en WooCommerce bieden een groot aantal shortcodes voor het bewerken van sjablonen.
Hieronder staat een script dat het WooCommerce Mijn Account-dashboard op elke productpagina weergeeft. Voeg het toe aan het bestand single-product.php en werk het bij.
| if ( ! defined( 'ABSPATH' ) ) { exit; // Afsluiten als er direct toegang toe is } get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content,' 'single-product' ); endwhile; // einde van de lus. do_action( 'woocommerce_sidebar' ); $t= ' Mijn account';$t.= do_shortcode(“[woocommerce_my_account]”); $t.=” ”; echo $t; get_footer( 'shop' ); |
Het dashboard verschijnt nadat u de productpagina's hebt bekeken.
Zorg ervoor dat de klant weet dat hij/zij dit eerder heeft gekocht
WooCommerce-templates kunnen ook worden aangepast om kortingen aan trouwe klanten te bieden. Kopieer en plak de code hiervoor in het bestand single-product.php.
| get_header('shop'); while (have_posts() ) : the_post(); wc_get_template_part('content', 'single-product'); endwhile; // einde van de lus. $current_user = wp_get_current_user(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ): echo ' ♥ Hey ' . $current_user->first_name . ', je hebt dit al eerder gekocht. Koop opnieuw met deze coupon: PURCHASE_AGAIN_21 ';endif; get_footer('shop'); |
Klanten zien het afrekenbericht nadat ze een product hebben bekeken dat ze al hebben gekocht.
Ontdek : Magento versus WooCommerce: Wat is de betere keuze in 2023?
WooCommerce-templates bewerken met behulp van hooks
Hooks zijn ook handig voor het aanpassen van WooCommerce-templates als je liever geen templatebestanden overschrijft. Je kunt hooks als acties of filters aan je website toevoegen om de functionaliteit snel uit te breiden en eenvoudige wijzigingen aan te brengen.
Daarnaast kun je de sjablonen van je webwinkel bewerken via WooCommerce-hooks. Deze aanpak wordt echter alleen aanbevolen voor eenvoudige aanpassingen. Voor complexere wijzigingen is het beter om de sjablonen te overschrijven.
Open het bestand functions.php in de menu's Weergave > Thema-editor en kopieer en plak het codefragment met je actie- of filterhooks.
Hieronder volgen enkele voorbeelden van hooks die beschikbaar zijn voor het bewerken van WooCommerce-templates.
Informatie toevoegen aan een enkele productafbeelding
Als u aanvullende productinformatie boven de afbeelding wilt weergeven, voeg dan de volgende code toe aan functions.php.
| // Voeg een aangepaste functie toe function quadlayers_before_single_product() { echo ' Alles is deze week 25% korting!';} // Voeg de actie toe add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 ); |
Op productpagina's wordt dit bericht weergegeven.
WooCommerce-template aanpassen met plugins
Heb je moeite met de programmeeraspecten? Geen probleem. Je kunt WooCommerce-templates nog steeds aanpassen met plugins. Naarmate de branche groeit, komen er talloze plugins bij waarmee je je templates kunt personaliseren.
Hier is de meest efficiënte plugin: Edit WooCommerce Templates . Het is een gebruiksvriendelijke, gratis plugin waarmee je de sjablonen van je thema kunt aanpassen. Met een paar klikken kun je sjablonen wisselen en de standaardinstellingen herstellen wanneer je maar wilt.
Hieronder vind je een aantal extra WooCommerce-plugins waarmee je sjablonen kunt aanpassen en de prestaties van je webwinkel kunt verbeteren.
- WooCommerce Custom Fields : Met deze plugin kunnen gebruikers unieke velden aanmaken op WooCommerce-productpagina's, afrekenpagina's en meer.
- WooCommerce Customizer : Deze plugin is speciaal ontwikkeld voor WooCommerce-templates en biedt diverse extra aanpassingsmogelijkheden voor uw webwinkel.
- WooCommerce Productpagina-aanpasser : Met deze plugin kunt u het uiterlijk van de productpagina in WooCommerce aanpassen.
Weten hoe je WooCommerce-boekingen instelt?
Het aanpassen van WooCommerce-productpagina's: waarom is dat essentieel?
Het personaliseren van WooCommerce-productpagina's is cruciaal, dus je mag het niet missen. De voordelen van het aanpassen van WooCommerce-productpagina's zijn eindeloos. Hiermee kun je klantproblemen oplossen, een onderscheidende presentatie creëren en de klanttevredenheid verhogen.
Hieronder volgen enkele belangrijke voordelen van het toepassen van personalisatie op productpagina's:
Conversie-geoptimaliseerde pagina's
Een gepersonaliseerde productpagina kan de conversieratio verhogen. Er zijn veel opties mogelijk, waaronder zoek- en filtermogelijkheden. Hierdoor kunnen klanten producten gemakkelijker vinden en kopen, met minder obstakels.
Maak het aantrekkelijker
Het doel van personalisatie is vaak het ontwerpen en vormgeven van productpagina's die klanten aanspreken en boeien. De interesse van klanten kan worden gewekt door aantrekkelijke afbeeldingen, verleidelijke productbeschrijvingen en esthetisch aantrekkelijke elementen.
De gebruikerservaring kan verbeterd worden
Zorg ervoor dat uw ontwerpkeuzes duidelijk en intuïtief zijn, dat de laadtijden snel zijn, dat de navigatie eenvoudig is en dat uw klanten een geweldige ervaring hebben. Dit verhoogt de conversies en zorgt voor terugkerende klanten.
Wist je dat : De beste WooCommerce product-add-ons
Mogelijkheden om productpagina's aan te passen
Om de visuele aantrekkingskracht van uw webwinkel actueel te houden, moet u uw productpagina's aanpassen. Hier zijn drie essentiële methoden om productpagina's succesvol aan te passen:
- Verbeter WooCommerce-productpagina's met plugins
Met WooCommerce kun je eenvoudig een webwinkel opzetten. Er zijn diverse plugins beschikbaar om je winkel te verbeteren, waaronder plugins waarmee je productpagina's kunt aanpassen.
Het aanpassen van productpagina's met WooCommerce-plugins is eenvoudig:
Plugins
- WooCommerce Product Add-ons : Met deze plugin kunt u selectievakjes, keuzelijsten en tekstvakken toevoegen aan uw productpagina's.
- WooCommerce 360º Image : Met deze plugin kunt u afbeeldingen naar wens roteren.
- Productvideo voor WooCommerce : Met deze plugin kunt u productvideo's toevoegen.
- Maattabel voor WooCommerce : Met deze plugin voeg je eenvoudig maattabellen toe aan je producten.
- Productaanbevelingen : Met deze plugin kunt u een sectie met aanbevelingen toevoegen aan uw productpagina.
Gerelateerd : 40+ beste WooCommerce-plugins [gratis + betaald]
- WooCommerce-productpagina's aanpassen met CSS
Door CSS te gebruiken om WooCommerce-producten aan te passen, kunt u uw webwinkel laten opvallen en klanten een unieke ervaring bieden. Om uw productpagina's te wijzigen, schrijft u de CSS-code.
Als je bent ingelogd, ga je naar Uiterlijk → Aanpassen.
CSS-code voor zwarte CTA
Door deze code toe te voegen aan 'Extra CSS' wordt de standaardkleur van de CTA (call-to-action) gewijzigd naar zwart.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #1d1a1a; border-color: #333333; color: #ffffff; } |
CSS-code voor blauwe CTA
Om zwart in blauw om te zetten, kunt u bovendien de volgende CSS-code gebruiken.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #4f5dd5; border-color: #333333; color: #ffffff; } |
- Voeg aangepaste code toe aan WooCommerce-productpagina's
Als je over voldoende technische kennis beschikt, kun je productpagina-aanpassingen eenvoudig implementeren via eigen code.
Leer waarom veelgestelde vragen (FAQ's) essentieel zijn voor je WooCommerce-winkel.
Stap 1: Stel een algemeen sjabloon op
Om te beginnen is het nodig een algemeen sjabloon vast te stellen dat voor alle productpagina's gebruikt zal worden.
Begin met een PHP-commentaar waarin de naam van de template bovenaan staat.
Maak een template-custom-product.php-bestand aan en plaats dit in het geactiveerde thema.
| <?php /*Template Name: Customize Product*/ ?> |
Deze template maakt gebruik van de standaard productpagina van WooCommerce. Hier is de code.
| $params = array('posts_per_page' => 5, 'post_type' => 'product'); $wc_query = new WP_Query($params); ?> have_posts()) : ?> have_posts()) : $wc_query->the_post(); ?> |
Het is een basissjabloon. Hoewel het voldoet, kun je met WooCommerce meer doen.
WooCommerce biedt diverse functies om uw productpagina's aan te passen, inclusief een breed scala aan informatie:
| the_permalink() – Toont de URL van het product. the_content() – Toont de volledige beschrijving van het product. the_excerpt() – Toont een korte beschrijving van het product. the_ID() – Toont de ID van het product. the_title() – Toont de naam van het product. the_post_thumbnail() – Toont de productafbeelding. |
Stap 2: Voeg functionaliteiten toe in het functions.php-bestand van het geactiveerde thema
Toon productcategorieën van WooCommerce
De categorieën zijn de plek waar je je producten indeelt. Activeer het thema en importeer dit codefragment in het functions.php-bestand om de categorie van een product aan te geven.
if ( ! defined( 'ABSPATH' ) ) { exit; } global $product; ?> get_sku() || $product->is_type( 'variabel' ) ) ) : ?> get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?> get_id(), ', ', ' ' . _n( 'Categorie:', 'Categorieën:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> get_id(), ', ', ' ' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> |
Miniatuurafbeeldingen van productcategorieën weergeven
Voor elke productcategorie is een miniatuurafbeelding beschikbaar. Wanneer u klaar bent om uw eigen productweergave in te stellen, voegt u deze code toe aan het template.php- of functions.php-bestand van uw thema.
| function cwresponse_get_thumbnail(){ if(is_page(205)){ $args = array( 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'slug' ) ) ) ; $random_products = get_posts( $args ); foreach ( $random_products as $post ) : setup_postdata( $post ); ?> endforeach; wp_reset_postdata(); } } add_action('wp_footer', 'cwresponse_get_thumbnail'); |
Verwijder de beschrijvingskop.
Bij gebruik van WooCommerce hoeft u alleen maar het beschrijvingsveld voor elk producttabblad uit te vinken en het bestand functions.php te bewerken en de volgende code toe te voegen.
| add_filter( 'woocommerce_product_description_heading', '__return_null' ); |
Producttitel verwijderen
Zo verwijder je de titel in de producttabbladen van WooCommerce: voeg deze code toe aan functions.php.
| remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' ); |
Stap 3: WooCommerce-sjablonen wijzigen
Plaats de onderstaande code in het bestand content-single-product.php of in de map voor individuele producten onder woocommerce/templates. Het is echter beter om functions.php te gebruiken.
<div class="images"><?php if ( has_post_thumbnail() ) { $image_caption = get_post( get_post_thumbnail_id() )-> post_excerpt; $image_link = wp_get_attachment_url( get_post_thumbnail_id() ); $image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array( 'title' => get_the_title( get_post_thumbnail_id() ) ) ); $attachment_count = count( $product->get_gallery_attachment_ids() ); if ( $attachment_count > 0 ) { $gallery = '[product-gallery]'; } else { $gallery = ''; } echo apply_filters( 'woocommerce_single_product_image_html', sprintf( ' <a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%S" data-rel="prettyPhoto' . $gallery . '">%s</a> ', $image_link, $image_caption, $image ), $post->ID ); } anders { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%S" /> ', wc_placeholder_img_src(), __( 'Plaatsaanduiding', 'woocommerce' ) ), $post->ID ); } ?><?php do_action( 'woocommerce_product_thumbnails' ); ?></div>Als alternatief kunt u ook gewoon CSS-code schrijven.
.images { float: right! important; }
Eindelijk! Je bent klaar.
Meer weten: Hoe voeg ik verzending toe aan WooCommerce?
Conclusie
Het creëren van unieke en visueel aantrekkelijke WooCommerce-productpagina's en -sjablonen verbetert de winkelervaring voor klanten.
Door gebruik te maken van overrides, hooks, filters en CSS-aanpassingen kunt u uw productpagina's afstemmen op de verwachtingen van uw klanten en uw merkidentiteit.
Optimaliseer de mobiele responsiviteit van uw WooCommerce-webshop en pas deze aan om de algehele gebruikerservaring te verbeteren. Begin met het implementeren van aanpassingen en zorg ervoor dat uw winkel de beste waarde oplevert.
Zoekt u professionele hulp bij het aanpassen van WooCommerce? contact met ons op !
