Tegenwoordig heeft Woocommerce de e-commerce-industrie stormenderhand veroverd met zijn baanbrekende flexibiliteit en aanpassingsmogelijkheden. In de e-commercewereld scoort het hoog. Momenteel heeft het 27% van het e-commerce marktaandeel .
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 uw winkel de beste maatwerkpraktijken volgen. Een belangrijk onderdeel van maatwerk ligt in productpagina's en sjablonen. Een goed geïmplementeerde aanpassingsstrategie kan het aantal verlaten karren verminderen.
Aangezien de meeste klanten uw online winkel bezoeken, moet u het navigeren en aanpassen van producten en sjablonen eenvoudiger maken om succes te garanderen.
Dit artikel laat zien hoe u WooCommerce-sjablonen kunt aanpassen, productsjablonen kunt bewerken en productpagina's kunt aanpassen.
Waarom is het belangrijk voor winkeleigenaren om WooCommerce-sjablonen aan te passen?
WooCommerce heeft talloze aanpassingsmogelijkheden. U kunt alles aanpassen, van afrekenpagina's tot winkelpagina's, categoriepagina's, bedankpagina's, enz. Dit helpt uw 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 uw site te bewerken, zodat deze er anders uitzien dan die van de concurrentie. U kunt ook de standaardsjablonen aanpassen om uw bedrijf een voorsprong te geven.
De sjablonen die u gebruikt, kunnen worden aangepast om functionaliteit en details aan uw online winkel toe te voegen. Met deze functies kunt u shoppers een betere klantervaring bieden. Daarom moet u uw e-commerce winkel up-to-date houden door dieper in te gaan op het bewerken van WooCommerce-sjablonen. Lees verder om manieren te ontdekken om WooCommerce-sjablonen te bewerken.
Lezen : Hoe update ik mijn bankpas op WooCommerce
WooCommerce-sjablonen aanpassen met PHP
Met plug-ins en codefragmenten kunt u vrijwel elk aspect van uw website bewerken. Met WooCommerce kunt u sjablonen programmatisch bewerken.
Hier volgen twee manieren om sjablonen programmatisch aan te passen:
- Sjablonen overschrijven
- Met Haken
Beide methoden werken, dus kies welke het gemakkelijkst voor u is. U moet de belangrijkste verschillen tussen deze methoden begrijpen om te bepalen wanneer u ze moet gebruiken.
Hooks versus overschrijvende sjablonen
Met hooks kunnen eenvoudige wijzigingen worden aangebracht met behulp van acties en filters . Door sjabloonbestanden te overschrijven, kunt u complexere aanpassingen uitvoeren.
Houd er bovendien rekening mee dat u een sjabloonbestand niet met een hook mag overschrijven als deze in een specifiek sjabloonbestand wordt gebruikt. Het overschrijven van de sjabloon zal ertoe leiden dat de hooks die in dat bestand worden gebruikt, worden vervangen en niet langer effectief zijn.
Selecteer de methode die bij uw behoeften past nadat u uw behoeften heeft vastgesteld.
Ontdek : de beste plug-ins voor WooCommerce-producttabellen
WooCommerce-sjablonen aanpassen door ze te overschrijven
Bij het maken van complexe aanpassingen is het overschrijven van uw sjablonen beter dan het gebruik van hooks.
Op dezelfde manier lijkt het bewerken van functies.php erg op elkaar. De belangrijkste WooCommerce-sjabloonbestanden moeten worden bewerkt in plaats van de themabestanden.
Klik op Plug-ins > Plug-in-editor, kies WooCommerce in het vervolgkeuzemenu en kies sjablonen om de sjabloonbestanden 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 de winkelwagen, bij het afrekenen en in de e-mail.
De WooCommerce-sjabloonbestanden bevatten veel dingen die u kunt wijzigen. Hiermee kunt u 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 gebruikelijke manier om WooCommerce-code aan te passen. Voor het bewerken van sjablonen bieden WordPress en WooCommerce u een aantal shortcodes .
Hieronder staat een script dat het WooCommerce Mijn Account-dashboard op elke productpagina weergeeft. Voeg het toe aan het single-product.php-bestand en update het.
| if (! gedefinieerd ('ABSPATH')) { exit; // Sluit af als u rechtstreeks toegang krijgt } get_header('shop'); while (have_posts()): de_post(); wc_get_template_part('inhoud,' 'enkel product'); eindtijd; // einde van de lus. do_action('woocommerce_sidebar'); $t= ' Mijn account';$t.= do_shortcode(“[woocommerce_my_account]”); $t.=” ”; echo $t; get_footer('winkel'); |
Het dashboard verschijnt nadat u 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 te bieden aan trouwe klanten. Kopieer en plak ook hier de code op de single-product.php-pagina.
| get_header('winkel'); while (have_posts()): de_post(); wc_get_template_part('inhoud', 'enkel product'); eindtijd; // 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 ' ♥ Hallo '. $current_user->voornaam . ', je hebt dit eerder gekocht. Koop opnieuw met deze kortingsbon: PURCHASE_AGAIN_21 ';eindif; get_footer('winkel'); |
Klanten krijgen het afrekenbericht te zien nadat ze een product hebben bekeken dat ze al hebben gekocht.
Ontdek : Magento versus. WooCommerce: wat is de betere keuze in 2023?
WooCommerce-sjablonen bewerken met behulp van hooks
Hooks zijn ook nuttig bij het aanpassen van WooCommerce-sjablonen als het overschrijven van sjabloonbestanden niet jouw ding is. U kunt hooks als acties of filters aan uw website toevoegen om de functionaliteit ervan snel te vergroten en eenvoudige wijzigingen aan te brengen.
Bovendien kunt u de sjablonen van uw winkel bewerken via WooCommerce-hooks. Deze aanpak wordt alleen aanbevolen voor eenvoudige aanpassingen. Het is beter om sjablonen te overschrijven voor complexe wijzigingen.
Open uw function.php-bestand in Uiterlijk > Thema-editor en kopieer en plak het codefragment met uw actie- of filterhooks.
Hier zijn enkele voorbeelden van hooks die beschikbaar zijn voor het bewerken van WooCommerce-sjablonen.
Informatie toevoegen aan één productafbeelding
Als u aanvullende informatie over het product boven de afbeelding wilt weergeven, plaatst u de volgende code in function.php.
| // Voeg een aangepaste functiefunctie toe quadlayers_before_single_product() { echo ' Deze week is alles 25% korting!';} // Voeg de actie add_action toe('woocommerce_before_single_product', 'quadlayers_before_single_product', 11); |
Op afzonderlijke productpagina's verschijnt dit bericht.
WooCommerce-sjabloon aanpassen met plug-ins
Worstel je met codeeraspecten? Geen probleem. Je kunt WooCommerce-sjablonen nog steeds aanpassen met plug-ins. Naarmate de industrie groeit, komen er eindeloze plug-ins om uw sjablonen aan te passen.
Hier komt de meest efficiënte plug-in: WooCommerce-sjablonen bewerken . Het is een eenvoudig te gebruiken gratis plug-in waarmee u de sjablonen van uw thema kunt aanpassen. Met een paar klikken kunt u op elk gewenst moment sjablonen verwisselen en de standaardinstellingen herstellen.
Hier zijn enkele van de extra WooCommerce- plug-ins waarmee u sjablonen kunt aanpassen en de prestaties van uw winkel kunt verbeteren.
- WooCommerce Custom Fields : Met deze plug-in kunnen gebruikers unieke velden maken binnen WooCommerce-productpagina's, afrekenpagina's en meer.
- WooCommerce-aanpasser : Deze plug-in is speciaal bedoeld voor WooCommerce-sjablonen en biedt een verscheidenheid aan extra aanpassingsopties voor uw winkel.
- WooCommerce Single Product Page Customiser : Met deze plug-in kunt u het uiterlijk van de enkele productpagina binnen WooCommerce wijzigen.
Weet : Hoe WooCommerce-boekingen instellen?
WooCommerce-productpagina's aanpassen: waarom is het essentieel?
Het aanpassen van WooCommerce-productpagina's is cruciaal, dus u kunt dit niet missen. De voordelen en voordelen van het aanpassen van WooCommerce-productpagina's zijn eindeloos. Hiermee is het mogelijk om de zorgen van klanten weg te nemen, een onderscheidende presentatie neer te zetten en de klanttevredenheid te vergroten.
Hier zijn enkele cruciale voordelen van het toepassen van maatwerk op productpagina's:
Voor conversie geoptimaliseerde pagina's
Een aangepaste productpagina kan de conversiepercentages verhogen. Er kunnen veel opties worden geïmplementeerd, inclusief zoek- en filteropties. Daarom zullen klanten producten gemakkelijker vinden en kopen met minder wrijvingspunten.
Maak het aantrekkelijker
Het doel van maatwerk is vaak het ontwerpen en opmaken van productpagina's die klanten aanspreken 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 uw ontwerpkeuzes duidelijk en intuïtief zijn, dat de laadsnelheden snel zijn, dat de navigatie eenvoudig is en dat uw klanten een geweldige ervaring zullen hebben. Dit zal de conversies verhogen en ervoor zorgen dat u terugkerende klanten krijgt.
Weet : de beste WooCommerce-productadd-ons
Manieren om productpagina's aan te passen
Om op de hoogte te blijven van de visuele aantrekkingskracht van uw winkel, moet u uw productpagina's aanpassen. Hier zijn drie cruciale methoden om productpagina's succesvol aan te passen:
- Verbeter WooCommerce-productpagina's met plug-ins
Met WooCommerce kun je eenvoudig een online winkel opzetten. Er zijn verschillende plug-ins beschikbaar om uw winkel te verbeteren, inclusief plug-ins die productpagina's aanpassen.
Het aanpassen van productpagina’s met WooCommerce-plug-ins is eenvoudig:
Plug-ins
- WooCommerce-productadd-ons : Met deze plug-in kunt u selectievakjes, vervolgkeuzelijsten en tekstvakken aan uw productpagina's toevoegen.
- WooCommerce 360º Afbeelding : Met deze plug-in kunt u afbeeldingen naar wens roteren.
- Productvideo voor WooCommerce : met de plug-in kunnen productvideo's worden toegevoegd.
- Maattabel voor WooCommerce : Met deze plug-in kunt u eenvoudig maattabellen aan uw producten toevoegen.
- Productaanbevelingen : met deze plug-in kunt u een aanbevelingsgedeelte aan uw productpagina toevoegen.
Gerelateerd : 40+ beste WooCommerce-plug-ins [gratis + betaald]
- WooCommerce-productpagina's aanpassen met CSS
Door CSS te gebruiken om WooCommerce-producten aan te passen, kan uw online winkel opvallen en klanten een unieke ervaring bieden. Om uw productpagina's te wijzigen, schrijft u de CSS-code.
Wanneer u bent ingelogd, gaat u naar Uiterlijk → Aanpassen.
CSS-code voor zwarte CTA
Als u deze code aan aanvullende CSS toevoegt, wordt de standaard CTA-kleur gewijzigd in zwart.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget button.alt { achtergrondkleur: #1d1a1a; randkleur: #333333; kleur: #ffffff; } |
CSS-code voor blauwe CTA
Gebruik bovendien de volgende CSS-code om zwart naar blauw te converteren.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget button.alt { achtergrondkleur: #4f5dd5; randkleur: #333333; kleur: #ffffff; } |
- Voeg aangepaste code toe aan WooCommerce-productpagina's
Als u over veel technisch inzicht beschikt, kunt u eenvoudig productpagina-aanpassingen implementeren via aangepaste code.
Leer : Waarom veelgestelde vragen essentieel zijn voor uw WooCommerce-winkel?
Stap 1: Stel een globale sjabloon op
Om te beginnen is het noodzakelijk om een globale sjabloon op te stellen die voor alle productpagina's zal worden gebruikt.
Begin met een PHP-opmerking met bovenaan de naam van de sjabloon.
Maak een template-custom-product.php-bestand en plaats dit in het geactiveerde thema.
| <?php /*Template Name: Customize Product*/ ?> |
Deze sjabloon gebruikt de standaardproductpagina van WooCommerce. Hier is de code.
| $params = array('posts_per_page' => 5, 'post_type' => 'product'); $wc_query = nieuwe WP_Query($params); ?> have_posts()): ?> have_posts()): $wc_query->de_post(); ?> |
Het is een basissjabloon. Hoewel het voldoende is, kun je meer doen met WooCommerce.
WooCommerce biedt verschillende functies om uw productweergavepagina's aan te passen die een breed scala aan informatie bevatten:
| the_permalink() – Geeft de product-URL 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 productafbeelding weer. |
Stap 2: Voeg functionaliteiten toe in function.php van het geactiveerde thema
Geef categorieën van WooCommerce-producten weer
In de categorieën categoriseert u uw producten. Activeer het thema en importeer dit fragment in het function.php-bestand om de categorie van een product aan te geven.
if (! gedefinieerd ('ABSPATH')) { exit; } globaal $product; ?> get_sku() || $product->is_type('variabele' ) ) ) : ?> get_sku() ) ? $sku: esc_html__('N.v.t.', 'woocommerce'); ?> get_id(), ', ', ' ' . _n('Categorie:', 'Categorieën:', count( $product->get_category_ids() ), 'woocommerce' ) . '', ' '); ?> get_id(), ', ', ' ' . _n('Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . '', ' '); ?> |
Geef miniaturen van productcategorieën weer
Voor elke productcategorie is een thumbnail beschikbaar. Wanneer u klaar bent om uw aangepaste productweergave in te stellen, voegt u deze code toe aan template.php of function.php van uw thema.
| function cwresponse_get_thumbnail(){ if(is_page(205)){ $args = array( 'tax_query' => array( array( 'taxonomie' => 'product_cat', 'field' => 'slug' ) ) ); $random_products = get_posts($args); foreach ($random_products as $post): setup_postdata( $post); ?> eindigen; wp_reset_postdata(); } } add_action('wp_footer', 'cwresponse_get_thumbnail'); |
Gooi de kop Beschrijving weg.
Wanneer u Woocommerce gebruikt, schakelt u eenvoudigweg het beschrijvingsveld voor elk producttabblad uit en bewerkt u het function.php-bestand om de volgende code op te nemen.
| add_filter('woocommerce_product_description_heading', '__return_null'); |
Producttitel verwijderen
Zo kun je de titel verwijderen in de woocommerce-tabbladen voor afzonderlijke producten: plaats deze code in functies.php.
| remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title'); |
Stap 3: WooCommerce-sjablonen wijzigen
Plaats de onderstaande code in het content-single-product.php bestand of de single product directory onder woocommerce/templates. Je kunt beter functies.php gebruiken.
$image_caption = get_post( get_post_thumbnail_id() )->post_uittreksel; $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 = '[productgalerij]'; } anders { $gallery = ”; } echo apply_filters('woocommerce_single_product_image_html', sprintf(' } else { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( ' } ?> |
Als alternatief kunt u eenvoudig CSS-code schrijven.
.images { float: goed! belangrijk; }
Eindelijk! Je bent klaar.
Meer weten: Hoe voeg je 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 overschrijvingen, hooks, filters en CSS-aanpassingen kunt u uw productpagina's aanpassen aan de verwachtingen van uw klanten en aansluiten bij uw merkidentiteit.
Optimaliseer de mobiele responsiviteit van uw WooCommerce-aangedreven online winkel en pas deze aan om de algehele gebruikerservaring te verbeteren. Begin met het implementeren van maatwerkpraktijken en zorg ervoor dat uw winkel de beste waarde krijgt.
Op zoek naar professionele hulp bij het aanpassen van WooCommerce? nog contact met ons op !
