I dag har Woocommerce taget e-handelsbranchen med storm med sin banebrydende fleksibilitet og tilpasningsmuligheder. I e-handelsverdenen rangerer det højt. I øjeblikket har det 27% af e-handelsmarkedet .
Men præbyggede skabeloner og produktsider opfylder ikke alle virksomheders behov. Der er mange tilpasningsmuligheder i WooCommerce.
For at din butik kan præstere godt, skal den følge de bedste tilpasningspraksisser. En nøglekomponent i tilpasningen ligger i produktsider og skabeloner. En velimplementeret tilpasningsstrategi kan reducere antallet af forladte indkøbskurve.
Da de fleste kunder besøger din onlinebutik, bør du gøre det nemmere at navigere og tilpasse produkter og skabeloner for at sikre succes.
Denne artikel viser dig, hvordan du tilpasser WooCommerce-skabeloner, redigerer produktskabeloner og tilpasser produktsider.
Hvorfor er det vigtigt for butiksejere at tilpasse WooCommerce-skabeloner?
WooCommerce har masser af tilpasningsmuligheder. Du kan tilpasse alt, fra kassesider til butikssider, kategorisider, takkesider osv. Dette hjælper din butik med at skille sig ud fra mængden, men for at være virkelig unik kan tilpasning af WooCommerce-skabeloner hjælpe.
Det er vigtigt at redigere standardsider på dit websted, så de ser anderledes ud og føles end konkurrenternes. Du kan også tilpasse standardskabelonerne for at give din virksomhed en fordel.
De skabeloner, du bruger, kan tilpasses for at tilføje funktionalitet og detaljer til din onlinebutik. Med disse funktioner kan du give kunderne en bedre kundeoplevelse. Derfor skal du holde din e-handelsbutik opdateret ved at fordybe dig i redigering af WooCommerce-skabeloner. Læs videre for at udforske måder at redigere WooCommerce-skabeloner på.
Læs : Hvordan opdaterer jeg mit betalingskort på WooCommerce
Tilpasning af WooCommerce-skabeloner med PHP
Plugins og kodestykker gør det muligt for dig at redigere næsten alle aspekter af dit websted. Med WooCommerce kan du redigere skabeloner programmatisk.
Følgende er to måder at tilpasse skabeloner programmatisk:
- Overskrivning af skabeloner
- Med kroge
Begge metoder vil virke, så vælg den, der er nemmest for dig. Du bør forstå de principielle forskelle mellem disse metoder for at bestemme, hvornår du skal bruge hver enkelt.
Hooks vs. Overskrivningsskabeloner
Med hooks kan simple ændringer foretages ved hjælp af handlinger og filtre. Ved at overskrive skabelonfiler kan du udføre mere komplekse tilpasninger.
Bemærk desuden, at du ikke må overskrive en skabelonfil med en hook, hvis den bruges i en specifik skabelonfil. Overskrivning af skabelonen vil resultere i, at de hooks, der bruges i den fil, erstattes og ikke længere er effektive.
Vælg den metode, der passer til dine behov, efter at du har fundet ud af dine behov.
Udforsk : Bedste WooCommerce Produkttabel Plugins
Ændring af WooCommerce-skabeloner ved at overskrive dem
Når du foretager komplekse tilpasninger, er det bedre at overskrive dine skabeloner end at bruge hooks.
På samme måde er redigering af functions.php meget ens. De primære WooCommerce-skabelonfiler skal redigeres i stedet for temafilerne.
Klik på Plugins > Plugin Editor, vælg WooCommerce i rullemenuen, og vælg skabeloner for at se skabelonfilerne.
Dette afsnit indeholder alle de vigtigste filer, du skal redigere, nemlig archive-product.php, content-product-cat.php og content-product.php. Det er også muligt at redigere skabelonfiler flere steder, f.eks. i indkøbskurven, ved kassen og i e-mailen.
WooCommerce-skabelonfilerne har mange ting, du kan ændre. Dette giver dig mulighed for at tilpasse både undermapper og mapper.
Det næste trin er at se tilpassede WooCommerce-skabeloner.
Tilføj shortcodes til WooCommerce-skabeloner.
Shortcodes er en almindelig måde at tilpasse WooCommerce-kode på. Til redigering af skabeloner tilbyder WordPress og WooCommerce en række shortcodes.
Nedenfor er et script, der viser WooCommerce My Account-dashboardet på hver produktside. Tilføj det til single-product.php-filen, og opdater det.
| hvis ( ! defined( 'ABSPATH' ) ) { exit; // Afslut hvis der tilgås direkte } get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content,' 'single-product' ); endwhile; // slutningen af løkken. do_action( 'woocommerce_sidebar' ); $t= ' Min konto';$t.= do_shortcode("[woocommerce_my_account]"); $t.=” "; echo $t; get_footer( 'shop' ); |
Dashboardet vises, når du har forhåndsvist produktsiderne.
Sørg for at kunden ved, at de har købt dette før
WooCommerce-skabeloner kan også ændres for at tilbyde rabatter til loyale kunder. Her skal du igen kopiere og indsætte koden på single-product.php-siden.
| get_header('shop'); while (have_posts()): the_post(); wc_get_template_part('content', 'single-product'); endwhile; // slutningen af løkken. $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øbt dette før. Køb igen med denne kupon: PURCHASE_AGAIN_21 ';endif; get_footer('shop'); |
Kunder vil se betalingsbeskeden efter at have set et produkt, de allerede har købt.
Udforsk : Magento vs. WooCommerce: Hvad er det bedste valg i 2023?
Redigering af WooCommerce-skabeloner ved hjælp af hooks
Hooks er også nyttige til at tilpasse WooCommerce-skabeloner, hvis det ikke er din stil at overskrive skabelonfiler. Du kan tilføje hooks som handlinger eller filtre til dit websted for hurtigt at øge dets funktionalitet og foretage enkle ændringer.
Derudover kan du redigere din butiks skabeloner via WooCommerce-hooks. Denne fremgangsmåde anbefales kun til simple tilpasninger. Det er bedre at overskrive skabeloner ved komplekse ændringer.
Åbn din functions.php-fil i Udseende > Temaeditor, og kopier og indsæt kodestykket med dine action- eller filterhooks.
Her er nogle eksempler på hooks, der er tilgængelige til redigering af WooCommerce-skabeloner.
Tilføjelse af oplysninger til et enkelt produktbillede
Hvis du ønsker at vise yderligere oplysninger om produktet over billedet, skal du indsætte følgende kode i functions.php.
| // Tilføj brugerdefineret funktion function quadlayers_before_single_product() { echo ' Alt er 25% rabat i denne uge!';} // Tilføj handlingen add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 ); |
På individuelle produktsider vil denne meddelelse vises.
Tilpasning af WooCommerce-skabelon med plugins
Har du problemer med kodningsaspekter? Ikke et problem. Du kan stadig tilpasse WooCommerce-skabeloner med plugins. Efterhånden som branchen vokser, kommer der et uendeligt antal plugins til at tilpasse dine skabeloner.
Her kommer det mest effektive plugin: Rediger WooCommerce-skabeloner . Det er et brugervenligt gratis plugin, der giver dig mulighed for at tilpasse dit temas skabeloner. Med et par klik kan du når som helst udskifte skabeloner og gendanne standardindstillinger.
Her er nogle af de ekstra WooCommerce-plugins, der giver dig mulighed for at tilpasse skabeloner og forbedre din butiks ydeevne.
- WooCommerce brugerdefinerede felter : Med dette plugin kan brugerne oprette unikke felter på WooCommerce produktsider, betalingssider og mere.
- WooCommerce Customizer : Dette plugin er dedikeret til WooCommerce-skabeloner og tilbyder en række yderligere tilpasningsmuligheder til din butik.
- WooCommerce Single Product Page Customizer : Dette plugin giver dig mulighed for at ændre udseendet af den enkelte produktside i WooCommerce.
Vid : Hvordan opsætter man WooCommerce-bookinger?
Tilpasning af WooCommerce-produktsider: Hvorfor er det vigtigt?
Tilpasning af WooCommerce-produktsider er afgørende, så du må ikke gå glip af det. Fordelene ved at tilpasse WooCommerce-produktsider er uendelige. Med dette er det muligt at eliminere kundernes bekymringer, etablere en unik præsentation og forbedre kundetilfredsheden.
Her er nogle afgørende fordele ved at anvende tilpasning på produktsider:
Konverteringsoptimerede sider
En tilpasset produktside kan øge konverteringsraterne. Mange muligheder kan implementeres, herunder søge- og filtreringsmuligheder. Derfor vil kunderne lettere finde og købe produkter med færre friktionspunkter.
Gør det mere tiltalende
Målet med tilpasning er ofte at designe og layoute produktsider, der engagerer og appellerer til kunderne. Kundernes interesse kan vækkes af tiltalende billeder, fristende produktbeskrivelser og æstetisk tiltalende elementer.
UX kunne forbedres
Sørg for, at dine designvalg er klare og intuitive, at indlæsningshastighederne er hurtige, at navigationen er nem, og at dine kunder får en god oplevelse. Dette vil øge antallet af konverteringer og give dig tilbagevendende kunder.
Kendskab til : De bedste WooCommerce-produkttilføjelser
Måder at tilpasse produktsider på
For at holde din butiks visuelle appel opdateret, skal du tilpasse dine produktsider. Her er tre vigtige metoder til at tilpasse produktsider succesfuldt:
- Forbedr WooCommerce-produktsider med plugins
Med WooCommerce kan du nemt oprette en onlinebutik. Der findes forskellige plugins, der kan forbedre din butik, herunder dem, der tilpasser produktsider.
Det er nemt at tilpasse produktsider med WooCommerce-plugins:
Plugins
- WooCommerce-produkttilføjelser : Med dette plugin kan du tilføje afkrydsningsfelter, rullemenuer og tekstbokse til dine produktsider.
- WooCommerce 360º Image : Med dette plugin kan du rotere billeder efter din smag.
- Produktvideo til WooCommerce : Plugin'et giver mulighed for at tilføje produktvideoer.
- Størrelsesguide til WooCommerce : Dette plugin gør det nemt at tilføje størrelsesguider til dine produkter.
- Produktanbefalinger : Dette plugin giver dig mulighed for at tilføje en anbefalingssektion til din produktside.
Relateret : 40+ bedste WooCommerce-plugins [Gratis+Betalt]
- Tilpasning af WooCommerce-produktsider med CSS
Brug af CSS til at tilpasse WooCommerce-produkter kan få din onlinebutik til at skille sig ud og give kunderne en unik oplevelse. For at ændre dine produktsider skal du skrive CSS-koden.
Når du er logget ind, skal du gå til Udseende → Tilpas.
CSS-kode til sort CTA
Tilføjelse af denne kode til Yderligere CSS vil ændre standardfarven for handlingsfremmende opfordringer til sort.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt { baggrundsfarve: #1d1a1a; kantfarve : #333333; farve: #ffffff; } |
CSS-kode til blå CTA
For at konvertere sort til blå skal du desuden bruge følgende CSS-kode.
| button.alt, input[type=”knap”].alt, input[type=”nulstil”].alt, input[type=”send”].alt, .button.alt, .widget-area .widget a.button.alt { baggrundsfarve: #4f5dd5; kantfarve : #333333; farve: #ffffff; } |
- Tilføj brugerdefineret kode til WooCommerce-produktsider
Hvis du har masser af teknisk forståelse, kan du nemt implementere tilpasning af produktsider via brugerdefineret kode.
Lær : Hvorfor er ofte stillede spørgsmål vigtige for din WooCommerce-butik?
Trin 1: Opret en global skabelon
Til at begynde med er det nødvendigt at etablere en global skabelon, der skal bruges til alle produktsider.
Start med en PHP-kommentar, der angiver skabelonens navn øverst.
Lav en template-custom-product.php-fil, og placer den i det aktiverede tema.
| <?php /*Template Name: Customize Product*/ ?> |
Denne skabelon bruger WooCommerces standardproduktside. Her er koden.
| $params = array('posts_per_page' => 5, 'post_type' => 'produkt'); $wc_query = new WP_Query($params); ?> have_indlæg()): ?> have_posts()): $wc_query->the_post(); ?> |
Det er en grundlæggende skabelon. Selvom den fungerer, kan du gøre mere med WooCommerce.
WooCommerce tilbyder adskillige funktioner til at tilpasse dine produktvisningssider, der inkluderer en bred vifte af oplysninger:
| the_permalink() – Viser produktets URL. the_content() – Viser den fulde beskrivelse af produktet. the_excerpt() – Viser en kort beskrivelse af produktet. the_ID() – Viser produktets ID. the_title() – Viser produktets navn. the_post_thumbnail() – Viser produktbilledet. |
Trin 2: Tilføj funktionaliteter i functions.php i det aktiverede tema
Vis kategorier af WooCommerce-produkter
Kategorierne er der, hvor du kategoriserer dine produkter. Aktiver temaet, og importer dette kodestykke til functions.php-filen for at angive et produkts kategori.
hvis (!defined('ABSPATH')) { exit; } global $produkt; ?> get_sku() || $product->is_type( 'variabel' ) ) ) : ?> get_sku() ) ? $sku : esc_html__( 'Ikke tilgængelig', 'woocommerce' ); ?> get_id(), ', ', ' ' . _n( 'Kategori:', 'Kategorier:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> Note: "_n('Kategori:', 'Kategorier:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> Note: "}, _n('Kategorie:', 'Kategorier:', count( $product->get_category_ids() ), 'woocommerce' ) . Note: "}, _n('Kategorie:' ... get_id(), ', ', ' ' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> Bemærk: __n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> Bemærk: __n('Tag:', 'Tags ... |
Vis miniaturebilleder af produktkategorier
Der findes et miniaturebillede for hver produktkategori. Når du er klar til at konfigurere din brugerdefinerede produktvisning, skal du tilføje denne kode til template.php eller functions.php i dit tema.
| funktion cwresponse_get_thumbnail() { hvis (is_page(205)) { $args = array( 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'slug' ) ) ); $random_products = get_posts( $args ); foreach ($random_products som $post ) : setup_postdata( $post ); ?> "> Tilfældige_produkter som $post : setup_postdata( $post ); "> endforeach; wp_reset_postdata(); } } add_action('wp_footer', 'cwresponse_get_thumbnail'); |
Smid beskrivelsesoverskriften væk.
Når du bruger Woocommerce, skal du blot fjerne markeringen i beskrivelsesfeltet for hver produktfane og redigere functions.php-filen, så den inkluderer følgende kode.
| add_filter( 'woocommerce_product_description_heading', '__return_null'); |
Fjern produkttitel
Sådan fjerner du titlen i WooCommerces produktfaner: Indsæt denne kode i functions.php.
| fjern_handling( 'woocommerce_single_produkt_resumé', 'woocommerce_skabelon_single_titel' ); |
Trin 3: Ændring af WooCommerce-skabeloner
Indsæt koden nedenfor i filen content-single-product.php eller single product-mappen under woocommerce/templates. Du er bedre tjent med at bruge 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); } ellers { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '}}<img src="%s" alt="%s" /> ', wc_placeholder_img_src(), __( 'Pladsholder', 'woocommerce') ), $post->ID ); } ?><?php do_action( 'woocommerce_product_thumbnails' ); ?></div>Alternativt kan du blot skrive CSS-kode.
.billeder { float: rigtigt! vigtigt; }
Endelig! Du er færdig.
Læs mere: Sådan tilføjer du forsendelse til WooCommerce?
Konklusion
At skabe unikke og visuelt tiltalende WooCommerce-produktsider og -skabeloner forbedrer kundernes shoppingoplevelse.
Ved at bruge overrides, hooks, filtre og CSS-tilpasning kan du tilpasse dine produktsider, så de imødekommer dine kunders forventninger og stemmer overens med din brandidentitet.
Optimer din WooCommerce-drevne onlinebutiks mobilresponsivitet og tilpas den for at forbedre den samlede brugeroplevelse. Begynd at implementere tilpasningspraksisser, og sørg for at din butik får mest muligt ud af det.
Leder du efter professionel hjælp til at tilpasse WooCommerce? Kontakt os i dag!
