Idag har Woocommerce tagit e-handelsbranschen med storm med sin banbrytande flexibilitet och anpassningsmöjligheter. I e-handelsvärlden rankas det högt. För närvarande har det 27 % av e-handelsmarknaden .
Men färdiga mallar och produktsidor uppfyller inte alla företags behov. Det finns många anpassningsalternativ i WooCommerce.
För att prestera bra måste din butik följa de bästa anpassningsmetoderna. En viktig del av anpassningen ligger i produktsidor och mallar. En väl implementerad anpassningsstrategi kan minska övergivna varukorgar.
Eftersom de flesta kunder besöker din webbutik bör du göra det enklare att navigera och anpassa produkter och mallar för att säkerställa framgång.
Den här artikeln visar hur du anpassar WooCommerce-mallar, redigerar produktmallar och anpassar produktsidor.
Varför är det viktigt för butiksägare att anpassa WooCommerce-mallar?
WooCommerce har massor av anpassningsalternativ. Du kan anpassa allt, från kassa till butikssidor, kategorisidor, tacksidor etc. Detta hjälper din butik att sticka ut från mängden, men för att vara verkligt distinkt kan det vara bra WooCommerce-mallar
Det är viktigt att redigera webbplatsens standardsidor så att de ser annorlunda ut och känns jämfört med konkurrenternas. Du kan också anpassa standardmallarna för att ge ditt företag en fördel.
Mallarna du använder kan anpassas för att lägga till funktionalitet och detaljer i din webbutik. Med dessa funktioner kan du ge kunderna en bättre kundupplevelse. Därför måste du hålla din e-handelsbutik uppdaterad genom att fördjupa dig i redigeringen av WooCommerce-mallar. Läs vidare för att utforska sätt att redigera WooCommerce-mallar.
Läs : Hur uppdaterar jag mitt betalkort på WooCommerce
Anpassa WooCommerce-mallar med PHP
Plugins och kodavsnitt låter dig redigera nästan alla aspekter av din webbplats. Med WooCommerce kan du redigera mallar programmatiskt.
Följande är två sätt att anpassa mallar programmatiskt:
- Överskrivning av mallar
- Med krokar
Båda metoderna fungerar, så välj den som är enklast för dig. Du bör förstå de principiella skillnaderna mellan dessa metoder för att avgöra när du ska använda var och en.
Hooks kontra överskrivningsmallar
Med hjälp av hooks kan enkla modifieringar göras med hjälp av åtgärder och filter. Genom att skriva över mallfiler kan du utföra mer komplexa anpassningar.
Observera dessutom att du inte ska skriva över en mallfil med en hook om den används i en specifik mallfil. Att överskriva mallen kommer att resultera i att hookarna som används i den filen ersätts och inte längre är effektiva.
Välj den metod som passar dina behov efter att du har fastställt dina behov.
Utforska : Bästa WooCommerce-produkttabellplugins
Ändra WooCommerce-mallar genom att skriva över dem
När du gör komplexa anpassningar är det bättre att skriva över dina mallar än att använda hooks.
På liknande sätt är redigering av functions.php väldigt likt. De huvudsakliga WooCommerce-mallfilerna måste redigeras istället för temafilerna.
Klicka på Plugins > Plugin Editor, välj WooCommerce från rullgardinsmenyn och välj mallar för att se mallfilerna.
Det här avsnittet innehåller alla huvudfiler du behöver redigera, nämligen archive-product.php, content-product-cat.php och content-product.php. Det är också möjligt att redigera mallfiler på flera ställen, till exempel i varukorgen, kassan och e-postmeddelandet.
WooCommerce-mallfilerna har många saker du kan ändra. Detta låter dig anpassa både underkataloger och mappar.
Nästa steg är att se anpassade WooCommerce-mallar.
Lägg till kortkoder till WooCommerce-mallar.
Kortkoder är ett vanligt sätt att anpassa WooCommerce-kod. För att redigera mallar ger WordPress och WooCommerce dig en mängd kortkoder.
Nedan finns ett skript som visar WooCommerce My Account-instrumentpanelen på varje produktsida. Lägg till den i single-product.php-filen och uppdatera den.
| if ( ! defined( 'ABSPATH' ) ) { exit; // Avsluta om åtkomst sker direkt } get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content,' 'single-product' ); endwhile; // slutet på loopen. do_action( 'woocommerce_sidebar' ); $t = ' Mitt konto';$t.= do_shortcode("[woocommerce_my_account]"); $t.=” ”; echo $t; get_footer( 'shop' ); |
Instrumentpanelen visas efter att du har förhandsgranskat produktsidorna.
Se till att kunden vet att de köpt detta tidigare
WooCommerce-mallar kan också modifieras för att erbjuda rabatter till lojala kunder. Även här kopierar och klistrar du in koden på single-product.php-sidan.
| get_header('shop'); while (have_posts()): the_post(); wc_get_template_part('content', 'single-product'); endwhile; // slutet på loopen. $current_user = wp_get_current_user(); if (wc_customer_bought_product($current_user->user_email, $current_user->ID, $product->get_id())): echo ' ♥ Hej'. $current_user->first_name.', du har köpt detta förut. Köp igen med den här kupongen: PURCHASE_AGAIN_21 ';endif; get_footer('shop'); |
Kunder kommer att se kassameddelandet efter att ha tittat på en produkt som de redan har köpt.
Utforska : Magento vs. WooCommerce: Vilket är det bästa valet år 2023?
Redigera WooCommerce-mallar med hjälp av hooks
Hooks är också användbara för att anpassa WooCommerce-mallar om det inte är din grej att skriva över mallfiler. Du kan lägga till hooks som åtgärder eller filter på din webbplats för att snabbt öka dess funktionalitet och göra enkla ändringar.
Dessutom kan du redigera din butiks mallar via WooCommerce-hooks. Denna metod rekommenderas endast för enkla anpassningar. Det är bättre att skriva över mallar för komplexa ändringar.
Öppna din functions.php-fil i Utseende > Temaredigerare och kopiera och klistra in kodavsnittet med dina action- eller filterhooks.
Här är några exempel på hooks som finns tillgängliga för att redigera WooCommerce-mallar.
Lägga till information till en enskild produktbild
Om du vill visa ytterligare information om produkten ovanför bilden, infoga följande kod i functions.php.
| // Lägg till anpassad funktion function quadlayers_before_single_product() { echo ' Allt är 25 % rabatterat den här veckan!';} // Lägg till åtgärden add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 ); |
På enskilda produktsidor kommer detta meddelande att visas.
Anpassa WooCommerce-mall med plugins
Kämpar du med kodningsaspekter? Inga problem. Du kan fortfarande anpassa WooCommerce-mallar med plugins. I takt med att branschen växer kommer det oändligt med plugins för att anpassa dina mallar.
Här kommer det mest effektiva pluginet: Edit WooCommerce Templates . Det är ett lättanvänt gratis plugin som låter dig anpassa ditt temas mallar. Med några få klick kan du byta mallar och återställa standardinställningarna när som helst.
Här är några av de ytterligare WooCommerce-plugins som låter dig anpassa mallar och förbättra prestandan för din butik.
- WooCommerce Anpassade Fält : Med detta plugin kan användare skapa unika fält på WooCommerce produktsidor, kassasidor och mer.
- WooCommerce-anpassare : Detta plugin är dedikerat till WooCommerce-mallar och erbjuder en mängd ytterligare anpassningsalternativ för din butik.
- WooCommerce Single Product Page Customizer : Med det här pluginet kan du ändra utseendet på en produktsida i WooCommerce.
Vet du : Hur man konfigurerar WooCommerce-bokningar?
Anpassa WooCommerce-produktsidor: Varför är det viktigt?
Att anpassa WooCommerce-produktsidor är avgörande, så du får inte missa det. Fördelarna och fördelarna med att anpassa WooCommerce-produktsidor är oändliga. Med detta är det möjligt att eliminera kundernas oro, skapa en distinkt presentation och öka kundnöjdheten.
Här är några viktiga fördelar med att använda anpassningsmöjligheter på produktsidor:
Konverteringsoptimerade sidor
En anpassad produktsida kan öka konverteringsfrekvensen. Många alternativ kan implementeras, inklusive sök- och filtreringsalternativ. Därför kommer kunder att hitta och köpa produkter enklare med färre friktionspunkter.
Gör det mer tilltalande
Målet med anpassning är ofta att designa och utforma produktsidor som engagerar och tilltalar kunder. Kundintresse kan väckas genom tilltalande bilder, lockande produktbeskrivningar och estetiskt tilltalande element.
Användarupplevelsen kan förbättras
Se till att dina designval är tydliga och intuitiva, att laddningshastigheterna är snabba, att navigeringen är enkel och att dina kunder får en bra upplevelse. Detta kommer att öka konverteringarna och få dig att återkomma till kunder.
Vet : Bästa WooCommerce-produkttillägg
Sätt att anpassa produktsidor
För att hålla din butiks visuella attraktionskraft uppdaterad behöver du anpassa dina produktsidor. Här är tre viktiga metoder för att framgångsrikt anpassa produktsidor:
- Förbättra WooCommerce-produktsidor med plugins
Med WooCommerce kan du enkelt skapa en webbutik. Olika plugins finns tillgängliga för att förbättra din butik, inklusive de som anpassar produktsidor.
Att anpassa produktsidor med WooCommerce-plugins är enkelt:
Plugins
- WooCommerce-produkttillägg : Med hjälp av detta plugin kan du lägga till kryssrutor, rullgardinsmenyer och textrutor på dina produktsidor.
- WooCommerce 360º Image : Med hjälp av detta plugin kan du rotera bilder efter eget tycke.
- Produktvideo för WooCommerce : Pluginet tillåter att lägga till produktvideor.
- Storlekstabell för WooCommerce : Detta plugin gör det enkelt att lägga till storlekstabeller till dina produkter.
- Produktrekommendationer : Med det här pluginet kan du lägga till ett rekommendationsavsnitt på din produktsida.
Relaterat : 40+ bästa WooCommerce-plugins [Gratis+Betalt]
- Anpassa WooCommerce-produktsidor med CSS
Att använda CSS för att anpassa WooCommerce-produkter kan få din webbutik att sticka ut och ge kunderna en unik upplevelse. För att ändra dina produktsidor, skriv CSS-koden.
När du är inloggad, gå till Utseende → Anpassa.
CSS-kod för svart CTA
Om du lägger till den här koden i Ytterligare CSS ändras standardfärgen för uppmaningen till svart.
| knapp.alt, input[typ="knapp"].alt, input[typ="återställ"].alt, input[typ="skicka"].alt, .knapp.alt, .widget-area .widget a.knapp.alt { bakgrundsfärg: #1d1a1a; kantfärg : #333333; färg: #ffffff; } |
CSS-kod för blå CTA
För att konvertera svart till blått, använd dessutom följande CSS-kod.
| knapp.alt, input[typ=”knapp”].alt, input[typ=”återställ”].alt, input[typ=”skicka”].alt, .knapp.alt, .widget-area .widget a.knapp.alt { bakgrundsfärg: #4f5dd5; kantfärg : #333333; färg: #ffffff; } |
- Lägg till anpassad kod på WooCommerce-produktsidor
Om du har god teknisk förståelse kan du enkelt implementera anpassning av produktsidor via anpassad kod.
Läs mer : Varför vanliga frågor är viktiga för din WooCommerce-butik?
Steg 1: Skapa en global mall
Till att börja med är det nödvändigt att skapa en global mall som ska användas för alla produktsidor.
Börja med en PHP-kommentar som anger mallens namn högst upp.
Skapa en template-custom-product.php-fil och lägg den i det aktiverade temat.
| <?php /*Template Name: Customize Product*/ ?> |
Den här mallen använder WooCommerces standardproduktsida. Här är koden.
| $params = array('posts_per_page' => 5, 'post_type' => 'produkt'); $wc_query = new WP_Query($params); ?> har_inlägg()) : ?> have_inlägg()): $wc_query->the_inlägg(); ?> |
Det är en grundläggande mall. Även om den fungerar bra kan du göra mer med WooCommerce.
WooCommerce erbjuder flera funktioner för att anpassa dina produktvisningssidor som inkluderar ett brett utbud av information:
| the_permalink() – Visar produktens URL. the_content() – Visar en fullständig beskrivning av produkten. the_excerpt() – Visar en kort beskrivning av produkten. the_ID() – Visar produktens ID. the_title() – Visar produktens namn. the_post_thumbnail() – Visar produktbilden. |
Steg 2: Lägg till funktioner i functions.php för det aktiverade temat
Visa kategorier av WooCommerce-produkter
Kategorierna är där du kategoriserar dina produkter. Aktivera temat och importera detta kodavsnitt till functions.php-filen för att ange en produkts kategori.
om (!defined('ABSPATH')) { exit; } global $produkt; ?> get_sku() || $product->is_type( 'variabel' ) ) ) : ?> get_sku() ) ? $sku : esc_html__( 'Inte tillämpligt', 'woocommerce' ); ?> get_id(), ', ', ' ' . _n( 'Kategori:', 'Kategorier:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> Behöver du en specifik produkt? get_id(), ', ', ' ' . _n( 'Tagg:', 'Taggar:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> |
Visa miniatyrbilder av produktkategorier
En miniatyrbild finns tillgänglig för varje produktkategori. När du är redo att konfigurera din anpassade produktvisning lägger du till den här koden i template.php eller functions.php i ditt tema.
| funktion cwresponse_get_thumbnail() { if(is_page(205)) { $args = array( 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'slug' ) ) ) ; $random_products = get_posts( $args ); för varje ($random_products som $post ) : setup_postdata( $post ); ?> endforeach; wp_reset_postdata(); } } add_action('wp_footer', 'cwresponse_get_thumbnail'); |
Kassera beskrivningsrubriken.
När du använder Woocommerce avmarkerar du helt enkelt beskrivningsfältet för varje produktflik och redigerar functions.php-filen så att den inkluderar följande kod.
| add_filter( 'woocommerce_product_description_heading', '__return_null'); |
Ta bort produkttitel
Så här tar du bort titeln i WooCommerces flikar för enskilda produkter: placera den här koden i functions.php.
| remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title'); |
Steg 3: Ändra WooCommerce-mallar
Lägg koden nedan i filen content-single-product.php eller i single product-katalogen under woocommerce/templates. Du använder hellre functions.php.
<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 = '[produktgalleri]'; } 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); } annars { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '}]}<img src="%s" alt="%s" /> ', wc_placeholder_img_src(), __( 'Platshållare', 'woocommerce') ), $post->ID ); } ?><?php do_action( 'woocommerce_product_thumbnails' ); ?></div>Alternativt kan du helt enkelt skriva CSS-kod.
.bilder { float: rätt! viktigt; }
Äntligen! Du är klar.
Läs mer: Hur lägger man till frakt i WooCommerce?
Slutsats
Att skapa unika och visuellt tilltalande WooCommerce-produktsidor och mallar förbättrar kundernas shoppingupplevelse.
Genom att använda overrides, hooks, filter och CSS-anpassningar kan du anpassa dina produktsidor för att möta dina kunders förväntningar och anpassa dem till din varumärkesidentitet.
Optimera din WooCommerce-drivna webbutiks mobilresponsivitet och anpassa den för att förbättra den övergripande användarupplevelsen. Börja implementera anpassningsmetoder och se till att din butik får bästa möjliga värde.
Letar du efter professionell hjälp med att anpassa WooCommerce? Kontakta oss idag!
