Woo tutorials

Forfatter: Per Jensen

  • Øvelse: Garagesalg

    Varerne sælges i den tilstand som brugte og i den tilstand, som de nu engang er i. Prisen er kontant og betaling sker ved afhentning.

  • Redigering af fotos

    Redigering af fotos

    Tjekliste:

    • Vælg ensartet bredde eller højde – eller gør alle billeder 800×800 px.
    • Beskær fotografiet med crop-tool.
    • Auto hvidbalance.
    • Auto farveforbedring.
  • Woo: databasen

    Woo: databasen

    Orden i kaos

    Når du skal lave en webshop kan databasen hjælpe dig med at få orden i kaos. Du er nødt til at se på varerne hver for sig, og overveje, hvordan du kan lægge dem ind i Woo-databasen.

    Inden du går i gang kan det være en fordel at lave en brainstorm:

    • Hvilke kategorier har du brug for?
    • Har kategorierne underkategorier?
    • Er der nogen emneord, som du ved går igen?
    • Hvilke brands er der tale om?

    Senere kan du altid redigere eller tilføje yderligere kategorier, brands eller emneord.

    Oplysninger om brands kan genbruges på andre produkter. Så behøver du ikke at indtaste disse oplysninger igen og igen.

    Garagesalg

    Casen er, at jeg rydder op i min garage. I en kasse ligger nogle gamle figurer, som jeg ikke bruger mere – og som jeg derfor vil sælge videre i et privat garagesalg.

    I en rodekasse finder jeg denne skulptur:

    Til højre: Johs. Hedegaard (1915 – 1999) Aurora (1961). Den Kgl. Porcelænsfabrik.
    Til højre: Johs. Hedegaard (1915 – 1999) Aurora (1961). Den Kgl. Porcelænsfabrik.

    Hvad er det for en figur? Hvem har mon lavet den? Skal den smides ud, eller har den en værdi?

    Figurer har ofte en signatur eller et logo nedenunder. Måske står navnet på fabrikken, der har fremstillet figuren? Jeg lægger figuren ned og ser dette:

    • 21818
    • Signatur: Johannes Hedegaard
    • Bølgede linjer

    Ved lidt research finder jeg ud af at der er tale om en nummereret stentøjsbuste fra 1961. Titlen er “Aurora“, der betyder morgenrøde. Kunstneren er Johannes Hedegaard (1915 – 1999).

    Hvad sådan en figur ca. er værd kan man se, ved at browse gennem diverse butikker som sælger brugte ting eller antikviteter. Sådan finder vi inspiration til en passende pris til en privat handel.

    De bølgede linjer genkender jeg. Det er Den Kongelige Porcellainsfabriks kendte brand.

    Produktbilleder

    Begynd med at tage et eller blere fotos af produktet. Når billederne er klar skal du lægge oplysningerne ind i databasen.

    Woo-databasen

    Nu har vi en række oplysninger om produktet, der kan lægges ind i Woo-databasen. Du kan tilføje produkter under Varer / Tilføj ny vare.

    Figuren er her lagt ind i databasen. Bemærk til højre: produktbilledet og kategorierne. Kategorierne bruges ved søgninger og filtrering.

    I databasen skal du udfylde så mange af disse felter som muligt:

    FeltHvad
    VarebilledeWooCommerce anbefaler formatet 800×800 px; men du kan vælge andre formater under indstillinger. Hvis du vælger kvadratiske billeder, så skal dine billeder behandles i GIMP eller Photoshop inden du lægger dem ind. Husk altid at optimere dine billeder og mediefiler.
    Tilføj ny VareSkriv hvad varen hedder. I eksemplet skrev jeg “Aurora”.
    VarebeskrivelseHer kan du fortælle om varen i en brødtekst. Du kan evt. lægge billeder ind, og anvende andre WP blokke.
    Kort VarebeskrivelseKort variant af varebeskrivelsen, fx til oversigter, hvor man typisk kun vil vise et uddrag af teksten.
    VaregalleriHer kan du lægge flere billeder ind.
    VarekategorierTilføj en eller flere kategorier. Senere kan du filtrere efter kategorier. Du kan oprette kategorier og underkategorier på forhånd.
    VarenøgleordHer kan du tilføje nogle nøgleord eller “tags”, som kan bruges ved en mere finkornet filtrering. Du kan oprette disse ord på forhånd.
    BrandsUnder brands kan du tilføje brandets navn. Du kan oprette brands på forhånd.

    Produktet ligger nu i butikken

    Når du har gemt dette, så kan din vare vises på en eller flere sider. Her vises varen via blokken “Fremhævet vare”:

    Aurora

    Køb nu

    Nu er “Aurora” oprettet som produkt i Woo-databasen. Fordi vi har udfyldt oplysninger, som kategorier, emneord og brand kan produktet vises i relevante filtreringer. Mere om dette senere.

    Det kan være en tidskrævende proces at befolke butikkens database. Produktbilleder kræver et fornuftigt lys. De skal beskæres og tilpasses i GIMP eller Photoshop. Beskrivelser af produkterne kræver ofte en del research.

    Det betaler sig at være grundig her. Passende kategorier og nøgleord opstår hend ad vejen; men du kommer hurtigere i gang, hvis du tager udgangspunkt i en struktur, der altid kan udbygges.

    Det er altså Woo-databasen, der i sidste ende giver den grundlæggende struktur til de sider i din e-shop, hvor dit udvalg af produkter vises frem.

  • Sådan bygger du en webshop med Woo

    Sådan bygger du en webshop med Woo

    WooCommerce (Woo) er en populær løsning for dem, der har brug for en webshop. Woo er et plugin til WordPress. Woo installeres lettest fra Kontrolpanelet. Hvis du søger på Woo, så kommer det helt sikkert frem. Så snart Woo er installeres, skal det aktiveres – og så kan du gå i gang med at konfigurere din webshop.

    Planlæg dit site

    1. Planlæg dit site: hvilke faste sider skal der være?
    2. Lav style tile i Figma eller lignende.
    3. Lav wireframes i Figma eller lignende – husk, at lofi er tilstrækkeligt. Du skal vide nogenlunde, hvordan siderne skal struktureres.
    4. Under FSE lægges styles ind: farver, fonte og layout.
    5. I Style editoren tilrettes de forskellige blokke.
    6. Byg designet direkte i WP. Hifi-gymnastik i Figma er direkte spild af tid. Men gode wireframes er nyttige, når skabeloner og sider skal bygges.
    7. Fremstil de faste sider, fx “Om os“, “Kontakt” etc.
    8. Overvej om du brug for en blog til et nyhedsflow? Skal dette indhold vises på forsiden eller på en underside? En blog med fornuftige kategorier og tags kan være rigtig nyttig, når dine projekter løbende skal præsenteres.
    9. Opret produktdatabasen. Husk kategorier og tags.

    Produktdatabasen

    Woo fungerer ved hjælp af en database med dine produkter. Ved hjælp af særlige woo-blokke kan du vise udvalgte produkter, enkelte produkter, produkter på tilbud og lignende. Men du kan ikke vise noget, før produkterne er oprettet i databasen.

    1. Find de produkter, som skal være i shoppen.
    2. Vælg et sted, hvor du kan præsentere produkterne på en neutral baggrund.
    3. Fotografer produkterne.
    4. Lav produktbeskrivelser.
    5. Tilføj valgmuligheder, fx hvis produktet findes i flere farver.
    6. Giv hvert produkt en kategori og et emneord.
    7. Overvej om produktet skal være et særligt tilbud.

    Sørg for at der er minimum 20 produkter i databasen. Når du har gemt et antal produkter i databasen, så er du klar til at præsentere dem på din WordPress side.

    Præsenter produkterne på websitet

    Når du installerer Woo vil der være en side, der hedder shop. Den vil du kunne se i menuen. Men sådan behøver din shop ikke at se ud. Du kan selv vælge, hvor kunderne skal kunne se produkterne.

    Hvis dine produkter skal optræde ensartet og på mange sider, så kan det være en god ide at placere relevante produktblokke rundt omkring på dine skabeloner – fx over eller under indholdet.

    Produkter i indlæg og på sider

    Du kan også flette produkter ind i dine indlæg og sider. Sæt dem ind, der hvor du vil have dem. Produkterne herunder er vist ved hjælp af blokken Fremhævet kategori. Jeg har valgt at vise t-shirts.

    Tshirts

    Tshirts

    Køb nu

    Eksperimenter lidt med, hvad du vil vise.

    Forsiden

    Hvis du tilføjer skabelonen “Forside” til et blokbaseret tema, så vil denne skabelon blive din forside. På forsiden kan du placere et “Forespørgsels-loop”, der viser indlæg eller valgte sider. Du kan også vise blokke, som:

    • Enkel Vare
    • Lister med varekategorier
    • Fremhævet vare
    • Varer på tilbud
    • etc. etc. etc.

    Billedet herunder giver et indtryk af mulighederne:

    Eksempler på blokke, du kan bruge, der hvor varerne skal præsenteres på dit site.

    Husk, at din forside fungerer som en port til dit website. Forsiden er det oplagte sted at fremhæve de vigtigste varer og produkter, f.eks.:

    Den kreative butik

    Du behøver altså ikke at nøjes med siden “shop”, når du designer din webshop. Med Woo kan du placere dine produkter, dér hvor det giver mening på dit website.

  • Kan man lægge en Accordion ind i en varebeskrivelse?

    Kan man lægge en Accordion ind i en varebeskrivelse?

    Indhold vises via skabelon.

  • Vis produkt med shortcode

    Vis produkt med shortcode

    Sådan viser du et produkt med en shortcode.

    Indsæt shortcoden ved hjælp af den særlige shortcode blok, hvor du fx kan skrive:

    [products limit="9" columns="3" orderby="popularity" class="quick-sale"]

    Læg mærke til, at du med parametrene kan definere, hvordan produktet skal vises på din side:

    • Limit: hvor mange produkter vil du vise?
    • Columns: hvor mange kolonner skal vises?
    • Orderby: sorterer ved hjælp af parametre, som popularity, asc, desc etc.
    • Class: har i dette tilfælde ikke noget at gøre med CSS; men derimod en grupering (her: Quicksale)

    Woo skriver i dokumentationen, at du kan filtrere:

    "The [products] shortcode allows you to display products by post ID, SKU, categories, attributes, with support for pagination, random sorting, and product tags, replacing the need for multiples shortcodes such as  [featured_products], [sale_products], [best_selling_products], [recent_products], [product_attribute], and [top_rated_products], which were needed previously."

    Læs mere om Woo shortcodes her:

    WOO Shortcodes
  • Design af produktside

    Design af produktside

    Denne side viser, at du kan specialdesigne enkelte produkter og sætte dem ind på sider og indlæg. Brug blokken “Enkel vare” og tilføj dine egne tekstblokke. Her er et eksempel:

    Leonardo d'Alee: Mona

    Hoodie

    Se vores nye hoodie!

    Hoodie

    This is a variable product.

    Denne vare er p.t. ikke på lager og er derfor ikke tilgængelig.

  • Woo: Sådan tilpasses billedstørrelser

    Woo: Sådan tilpasses billedstørrelser

    Flere har spurgt, hvordan man kan tilpasse billedernes størrelser. WooCommerce har en mulighed, der gemmer sig i administrators menulinje.

    1. Klik på Tilpas i menulinjen.
    2. Åbn WooCommerce fanebladet.
    3. Tilpas billederne – videoen viser de fleste muligheder

    Det er stadig vigtigt, at du og din gruppe overvejer, hvordan billederne skal se ud, således at din netbutik får en ensartet designlinje. Det som defineres er hvordan alle jeres produktbilleder skal se ud i “grids”.

    Men nu kan du vælge andre formater end kvadrater.

  • Hvorfor anbefaler Woo kvadratiske billeder?

    Hvorfor anbefaler Woo kvadratiske billeder?

    Et andet sted har jeg vist, hvordan du kan ændre billedernes proportioner så de ikke behøver at være kvadratiske; men hvorfor anbefaler Woo at du i begyndelsen anvender billeder det kvadratiske format 800×800?

    Det er simpelt hen fordi, at Woo har lavet grids mv. efter at billederne er kvadrater. Men det behøver du ikke at rette dig efter.

    Hvorfor 800x800px
    Verden ville være mere kedelig, hvis alle billeder var kvadratiske. Så hvorfor anbefaler Woo, at billeder på shoppen formatet 800 x 800 px?

    Woo har et grid, der antager, at billederne er kvadratiske. Så når du bruger grid-baserede visninger (“views”) så skal visningen ændres til fx fuld størrelse.

    Quadratisch. Praktisch. Gut.
    (Fra chokoladereklame)

    Man kommer umiddelbart til at tænke på ældgamle reklamer for Ritter Sport chokolade. Men, hvad nu hvis du ønsker et design, hvor billederne enten har portræt- eller landskabs-format?

    Alternative formater
    Du kan sådan set godt lægge produktbilleder ind, der har andre formater.

    Woo cropper tilfældigt
    Det er endnu ikke muligt at styre, hvor billedets skal være i beskæringen. Så de beskæres noget tilfældigt. Billedet bliver ikke forvrænget; men det betyder, at du ikke kan styre produktvisningen 100%.

    Rediger den rigtige skabelon
    I Twenty twenty-four – og sikkert også de foregående blokbaserede temaer – kan du redigere WooCommerce skabeloner, der styrer, hvordan dine varer vises.

    I disse skabeloner kan du sætte billedernes proportioner til fx fuld størrelse.

  • Håndkodet SEO

    Håndkodet SEO

    Du kan tilføje SEO som tilpasset HTML. Fordelen ved denne metode er, at du ikke er afhængig af plugins med gumpetung kode. Håndkodet SEO er både en enkel og meget effektiv metode.

    Sådan kan du tilføje meta-tags til SEO med “Simple Custom CSS and JavaScript” plugin’et.
    • Åbn “Simple Custom …”
    • Lav en ny HTML
    • Marker at koden skal sættes ind i “Header” (hvilket er lidt ulogisk, eftersom koden bliver sat ind i <head>)
    • Opdater
    • Tjek om dine SEO-tags kommer ind i koden.

    Her er en SEO-tag generator:

    SEO Generator

    Denne manuelle metode er ikke nær så grundig som det du ville få ud af at bruge plugins, som Yoast og lignende. Men det er godt nok til at passere en Lighthouse test.

    Hvis du har mulighed for det, så kunne Open Graph Tools tilføje noget ekstra i forhold til SEO og SoMe.

    Open Graph

    Med Open Graph kan du generere links, der ser omtrent sådan ud, når du indsætter linket i en SoMe eller lignende:

    Open Graph Tags
    Open Graph tags – formatterer hvordan links tager sig ud på SoMe. Derfor er dette billede kun en antydning af, hvordan det kan tage sig ud i de sociale medier. I sidste ende bestemmer SoMe udseendet.

    Du kan skabe de nødvendige OG-tags med knappen herunder:

    Open Graph Generator

    Kode fra min header:

    <!-- PETJ manuel SEO -->

<!-- SEO stuff -->
<meta name="title" content="Woo Garagesalg">
<meta name="description" content="Testshop for multimediedesignere. Viser hvordan du kan sætte en eShop op med Woo. ">
<meta name="keywords" content="Multimediedesigner, e-commerce, woo, woocommerce, eShop, ">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="revisit-after" content="7 days">
<meta name="author" content="Per Thykjær Jensen, MA IT, interactionDesign and Multimedia">

<!-- Open Graph Stuff -->
<meta property="og:title" content="Woo Testshop">
<meta property="og:description" content="Testshop for Multimedia Designers. A class about Woo.">
<meta property="og:image" content="https://woo.thoth.dk/wp-content/uploads/2024/09/8c2df8a4-0f76-4a92-94f8-5f26d7591227-e1727429387594.jpeg">
<meta property="og:url" content="https://woo.thoth.dk">
<meta property="og:type" content="website">

<!-- /PETJ -->