Vandaag de dag heeft Woocommerce de e-commerce industrie stormenderhand veroverd met zijn baanbrekende flexibiliteit en aanpassingsmogelijkheden. In de e-commerce wereld staat het hoog genoteerd. Op dit moment heeft het 27% van het marktaandeel in e-commerce in handen.
Maar kant-en-klare sjablonen en productpagina's voldoen niet aan de behoeften van elk bedrijf. Er zijn veel aanpassingsmogelijkheden in WooCommerce.
Om goed te presteren, moet je winkel de beste aanpassingspraktijken volgen. Een belangrijk onderdeel van maatwerk ligt in productpagina's en sjablonen. Een goed geïmplementeerde aanpassingsstrategie kan het aantal achtergelaten winkelwagentjes verminderen.
Omdat de meeste klanten je online winkel bezoeken, moet je het navigeren en aanpassen van producten en sjablonen makkelijker maken om succes te garanderen.
Dit artikel laat zien hoe je WooCommerce-sjablonen kunt aanpassen, productsjablonen kunt bewerken en productpagina's kunt aanpassen.
Waarom is het belangrijk voor winkeliers om WooCommerce-sjablonen aan te passen?
WooCommerce heeft enorm veel aanpassingsmogelijkheden. Je kunt alles aanpassen, van kassa's tot winkelpagina's, categoriepagina's, bedankpagina's, enz. Dit helpt je winkel zich te onderscheiden van de massa, maar om echt onderscheidend te zijn, kan het aanpassen van WooCommerce sjablonen helpen.
Het is essentieel om de standaardpagina's van je site aan te passen om er anders uit te zien dan je concurrenten. U kunt ook de standaardsjablonen aanpassen om uw bedrijf een voorsprong te geven.
De sjablonen die je gebruikt, kun je aanpassen om functionaliteit en details aan je online winkel toe te voegen. Met deze functies kun je shoppers een betere klantervaring bieden. Daarom moet je je webwinkel up-to-date houden door je te verdiepen in het bewerken van WooCommerce sjablonen. Lees verder om te ontdekken hoe je WooCommerce sjablonen kunt bewerken.
Lees: Hoe werk ik mijn betaalpas bij in WooCommerce?
WooCommerce-sjablonen aanpassen met PHP
Met plugins en codeknipsels kun je bijna elk aspect van je website bewerken. 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 makkelijkst is. Je moet de principiële verschillen tussen deze methoden begrijpen om te bepalen wanneer je ze allebei moet gebruiken.
Hooks vs. sjablonen overschrijven
Met haken kunnen eenvoudige aanpassingen worden gemaakt met behulp van acties en filters. Door sjabloonbestanden te overschrijven, kun je complexere aanpassingen uitvoeren.
Let er bovendien op dat je een sjabloonbestand niet overschrijft met een haak als deze wordt gebruikt in een specifiek sjabloonbestand. Het overschrijven van het sjabloon zal ertoe leiden dat de haken die in dat bestand worden gebruikt, worden vervangen en niet langer effectief zijn.
Kies de methode die bij je past nadat je je behoeften hebt bepaald.
WooCommerce-sjablonen wijzigen door ze te overschrijven
Bij complexe aanpassingen is het beter om je sjablonen te overschrijven dan om haken te gebruiken.
Het bewerken van functions.php is vergelijkbaar. De hoofdbestanden van het WooCommerce-sjabloon moeten worden bewerkt in plaats van de themabestanden.
Klik op Plugins > Plugin Editor, kies WooCommerce in het uitklapmenu en kies sjablonen om de sjabloonbestanden te bekijken.
Dit gedeelte bevat alle hoofdbestanden 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 de winkelwagen, kassa en e-mail.
De WooCommerce sjabloonbestanden hebben veel dingen die je kunt veranderen. Zo kun je zowel de submappen als de mappen aanpassen.
De volgende stap is het bekijken van aangepaste WooCommerce-sjablonen.
Voeg shortcodes toe aan WooCommerce-sjablonen.
Shortcodes zijn een veelgebruikte manier om de code van WooCommerce aan te passen. WordPress en WooCommerce geven je een heleboel shortcodes om sjablonen te bewerken.
Hieronder staat een script dat het WooCommerce Mijn Account dashboard weergeeft op elke productpagina. Voeg het toe aan het bestand single-product.php en werk het bij.
| <?php if ( ! defined( ‘ABSPATH’ ) ) { exit; // Exit if accessed directly } get_header( ‘shop’ ); while ( have_posts() ) : the_post(); wc_get_template_part( ‘content,’ ‘single-product’ ); endwhile; // end of the loop. do_action( ‘woocommerce_sidebar’ ); $t= ‘<div id=”myacc”><h4>My Account</h4>’; $t.= do_shortcode(“[woocommerce_my_account]”); $t.=”</div>”; echo $t; get_footer( ‘shop’ ); |
Het dashboard verschijnt nadat je een voorbeeld van de productpagina's hebt bekeken.
Zorg ervoor dat de klant weet dat hij dit eerder heeft gekocht
WooCommerce-sjablonen kunnen ook worden aangepast om kortingen aan te bieden aan trouwe klanten. Kopieer en plak ook hier de code op de pagina single-product.php.
| get_header( ‘shop’ ); while ( have_posts() ) : the_post(); wc_get_template_part( ‘content’, ‘single-product’ ); endwhile; // end of the loop. $current_user = wp_get_current_user(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ): echo ‘<div class=”user-bought”>♥ Hey ‘ . $current_user->first_name . ‘, you\’ve purchased this before. Buy again using this coupon: <b>PURCHASE_AGAIN_21</b></div>’; endif; get_footer( ‘shop’ ); |
Klanten zien het afrekenbericht nadat ze een product hebben bekeken dat ze al hebben gekocht.
Verken: Magento vs. WooCommerce: Wat is de betere keuze in 2023?
WooCommerce-sjablonen bewerken met haken
Haken zijn ook handig bij het aanpassen van WooCommerce-sjablonen als het overschrijven van sjabloonbestanden niet jouw ding is. Je kunt hooks als acties of filters aan je website toevoegen om de functionaliteit snel te verhogen en eenvoudige wijzigingen door te voeren.
Daarnaast kun je de sjablonen van je winkel bewerken via WooCommerce hooks. Deze aanpak wordt alleen aanbevolen voor eenvoudige aanpassingen. Het is beter om sjablonen te overschrijven voor complexe aanpassingen.
Open je functions.php-bestand in de Appearance > Theme Editor en kopieer en plak het codefragment met je actie- of filterhaken.
Hier zijn enkele voorbeelden van haken die beschikbaar zijn voor het bewerken van WooCommerce-sjablonen.
Informatie toevoegen aan een enkele productafbeelding
Als u extra informatie over het product wilt weergeven boven de afbeelding, voegt u de volgende code in functions.php in.
| // Add custom function function quadlayers_before_single_product() { echo ‘<h2>Everything is 25% off for this week!</h2>’; } // Add the action add_action( ‘woocommerce_before_single_product’, ‘quadlayers_before_single_product’, 11 ); |
Op afzonderlijke productpagina's wordt dit bericht weergegeven.
WooCommerce-sjabloon aanpassen met plugins
Moeite met coderen? Geen probleem. Je kunt WooCommerce-sjablonen nog steeds aanpassen met plugins. Naarmate de industrie groeit, komen er eindeloos veel plugins om je sjablonen aan te passen.
Hier komt de meest efficiënte plugin: Edit WooCommerce Templates. Het is een eenvoudig te gebruiken gratis plugin waarmee je de sjablonen van je thema kunt aanpassen. Met een paar klikken kun je op elk moment van sjabloon wisselen en de standaardinstellingen herstellen.
Hier zijn enkele van de extra WooCommerce-plugin waarmee je sjablonen kunt aanpassen en de prestaties van je winkel kunt verbeteren.
- WooCommerce aangepaste velden: Met deze plugin kunnen gebruikers unieke velden maken op WooCommerce productpagina's, afrekenpagina's en meer.
- WooCommerce Customizer: Deze plugin is speciaal voor WooCommerce-sjablonen en biedt een groot aantal extra aanpassingsopties voor je winkel.
- WooCommerce enkele productpagina aanpassingsmodule: Met deze plugin kun je het uiterlijk van de enkele productpagina in WooCommerce aanpassen.
Weet: Hoe WooCommerce Boekingen Instellen?
WooCommerce productpagina's aanpassen: Waarom is het essentieel?
Het aanpassen van WooCommerce productpagina's is cruciaal, dus je kunt het niet missen. De voordelen van het aanpassen van WooCommerce productpagina's zijn eindeloos. Hiermee is het mogelijk om zorgen van klanten weg te nemen, een onderscheidende presentatie neer te zetten en de klanttevredenheid te verhogen.
Hier zijn enkele cruciale voordelen van het aanpassen van productpagina's:
Voor conversie geoptimaliseerde pagina's
Een aangepaste productpagina kan de conversie verhogen. Er kunnen veel opties worden geïmplementeerd, waaronder zoek- en filteropties. Klanten zullen dus makkelijker producten vinden en kopen met minder wrijvingspunten.
Maak het aantrekkelijker
Het doel van maatwerk is vaak om productpagina's te ontwerpen en op te maken die klanten boeien en aanspreken. De interesse van klanten kan worden gewekt door aantrekkelijk beeldmateriaal, verleidelijke productbeschrijvingen en esthetisch aantrekkelijke elementen.
UX kan worden verbeterd
Zorg ervoor dat je ontwerpkeuzes duidelijk en intuïtief zijn, dat het snel laadt, dat de navigatie eenvoudig is en dat je klanten een geweldige ervaring hebben. Dit zal conversies stimuleren en ervoor zorgen dat je klanten terugkeren.
Weet: Beste WooCommerce Product Toevoegingen
Manieren om productpagina's aan te passen
Om je winkel visueel aantrekkelijk te houden, moet je je productpagina's aanpassen. Hier volgen drie cruciale methoden om productpagina's met succes aan te passen:
- WooCommerce productpagina's verbeteren met plugins
Met WooCommerce kun je eenvoudig een online winkel maken. Er zijn verschillende plugins beschikbaar om je winkel te verbeteren, waaronder plugins om productpagina's aan te passen.
Productpagina's aanpassen met WooCommerce plugins is eenvoudig:
Plugins
- WooCommerce Product Toevoegingen: Met deze plugin kun je selectievakjes, vervolgkeuzelijsten en tekstvakken toevoegen aan je productpagina's.
- WooCommerce 360º afbeelding: Met deze plugin kun je afbeeldingen naar wens draaien.
- Productvideo voor WooCommerce: Met de plugin kun je productvideo's toevoegen.
- Maattabel voor WooCommerce: Deze plugin maakt het toevoegen van maattabellen aan je producten eenvoudig.
- Productaanbevelingen: Met deze plugin kun je een aanbevelingssectie toevoegen aan je productpagina.
Verwant: 40+ Beste WooCommerce Plugins [Gratis+betaald]
- WooCommerce productpagina's aanpassen met CSS
CSS gebruiken om WooCommerce producten aan te passen kan je online winkel laten opvallen en klanten een unieke ervaring geven. Om je productpagina's aan te passen, schrijf je de CSS-code.
Wanneer je bent ingelogd, ga je naar Uiterlijk → Aanpassen.
CSS-code voor zwarte CTA
Door deze code toe te voegen aan Extra CSS wordt de standaard CTA-kleur veranderd in 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
Gebruik bovendien de volgende CSS-code om zwart in blauw om te zetten.
| 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; } |
- Aangepaste code toevoegen aan WooCommerce productpagina's
Als je technisch goed onderlegd bent, kun je gemakkelijk productpagina-aanpassingen implementeren via aangepaste code.
Leer: Waarom zijn FAQ's essentieel voor je WooCommerce winkel?
Stap 1: Een algemene sjabloon opstellen
Om te beginnen moet er een globale sjabloon worden gemaakt die voor alle productpagina's wordt gebruikt.
Begin met een PHP-commentaar met de naam van de sjabloon bovenaan.
Maak een template-custom-product.php bestand en plaats het in het geactiveerde thema.
| <?php /*Template Name: Customize Product*/ ?> |
Deze sjabloon gebruikt de standaardproductpagina van WooCommerce. Hier is de code.
| <?php $params = array(‘posts_per_page’ => 5, ‘post_type’ => ‘product’); $wc_query = new WP_Query($params); ?> <?php if ($wc_query->have_posts()) : ?> <?php while ($wc_query->have_posts()) : $wc_query->the_post(); ?> <?php the_title(); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php else: ?> <p> <?php _e( ‘No Products’); ?> </p> <?php endif; ?> |
Het is een basissjabloon. Hoewel het voldoet, kun je meer doen met WooCommerce.
WooCommerce biedt verschillende functies om je productweergavepagina's aan te passen met een breed scala aan informatie:
| the_permalink() - Geeft de URL van het product weer. the_content() - Geeft de volledige beschrijving van het product weer. the_excerpt() - Geeft een korte beschrijving van het product weer. the_ID() - Geeft de ID van het product weer. the_title() - Geeft de naam van het product weer. the_post_thumbnail() - Geeft de afbeelding van het product weer. |
Stap 2: Functionaliteiten toevoegen in de functions.php van het geactiveerde thema
Categorieën van WooCommerce producten weergeven
De categorieën zijn waar je je producten indeelt. Activeer het thema en importeer dit fragment in het functions.php-bestand om de categorie van een product aan te geven.
<?php if ( ! defined( ‘ABSPATH’ ) ) { exit; } global $product; ?> <div class=”product_meta”> <?php do_action( ‘woocommerce_product_meta_start’ ); ?> <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( ‘variable’ ) ) ) : ?> <span class=”sku_wrapper”><?php esc_html_e( ‘SKU:’, ‘woocommerce’ ); ?> <span class=”sku”><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( ‘N/A’, ‘woocommerce’ ); ?></span></span> <?php endif; ?> <?php echo wc_get_product_category_list( $product->get_id(), ‘, ‘, ‘<span class=”posted_in”>’ . _n( ‘Category:’, ‘Categories:’, count( $product->get_category_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?> <?php echo wc_get_product_tag_list( $product->get_id(), ‘, ‘, ‘<span class=”tagged_as”>’ . _n( ‘Tag:’, ‘Tags:’, count( $product->get_tag_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?> <?php do_action( ‘woocommerce_product_meta_end’ ); ?> </div> |
Miniaturen van productcategorieën weergeven
Er is een miniatuur beschikbaar voor elke productcategorie. Wanneer je klaar bent om je aangepaste productweergave in te stellen, voeg je deze code toe aan template.php of functions.php van je thema.
| <?php 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 ); ?> <div><a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail(); ?></a></div> <?php endforeach; wp_reset_postdata(); } } add_action(‘wp_footer’, ‘cwresponse_get_thumbnail’); |
Gooi de beschrijvingskop weg.
Als je Woocommerce gebruikt, schakel dan het beschrijvingsveld uit voor elk producttabblad en bewerk het bestand functions.php zodat het de volgende code bevat.
| add_filter( "woocommerce_product_description_heading", "__return_null" ); |
Producttitel verwijderen
Zo elimineer je de titel in woocommerce-tabbladen voor afzonderlijke producten: zet deze code in functions.php.
| remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' ); |
Stap 3: WooCommerce-sjablonen wijzigen
Zet de onderstaande code in het bestand content-single-product.php of in de map single product onder woocommerce/templates. Je kunt beter functions.php 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 ); } else { echo apply_filters( ‘woocommerce_single_product_image_html’, sprintf( ‘<img src=”%s” alt=”%s” />’, wc_placeholder_img_src(), __( ‘Placeholder’, ‘woocommerce’ ) ), $post->ID ); } ?> <?php do_action( ‘woocommerce_product_thumbnails’ ); ?> </div> |
Je kunt ook gewoon CSS-code schrijven.
.images { float: right! important; }
Eindelijk! Je bent klaar.
Meer weten: Hoe voeg je verzending toe aan WooCommerce?
Conclusie
Het maken 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 aanpassen aan de verwachtingen van uw klanten en afstemmen op uw merkidentiteit.
Optimaliseer de mobiele responsiviteit van je WooCommerce online winkel en pas deze aan om de algehele gebruikerservaring te verbeteren. Begin met het implementeren van aanpassingspraktijken en geef je winkel de beste waarde.
Op zoek naar professionele hulp bij het aanpassen van WooCommerce? Neem vandaag nog contact met ons op!
