Woo tutorials

Kategori: Artikler

  • 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.

  • Reversed Engineering

    Reversed Engineering

    Hvordan du kan udvikle en Figma-prototype ved at undersøge mulighederne i WP.

    Blokke i Woocommerce

    Der findes et meget stort antal blocks i Woocommerce. Denne artikel viser de fleste. Der findes desuden mange plugins og patterns, der giver yderligere muligheder.

    Når du skal udvikle et design i WP, så kan “reversed engineering” være en rigtig god ide. Før du designer noget, så må du vide, hvordan de enkelte blocks ser ud og hvilke indstillingsmuligheder der er i dit theme – herunder hvor custom HTML / CSS kan blive nødvendig.

    Øvelse

    Lav en side, der simpelt hen lister de enkelte blocks, sådan som de ser ud i dit theme.

    1. Lav en side med samtlige blocks, som du får brug for i dit design.
    2. Inddel dine designs i groups.
    3. Gem disse groups som genbrugelige patterns.

    Dette er ikke en layout-opgave; men derimod en opgave, der handler om at finde ud, hvordan de enkelte blocks ser ud, således at du kan genskabe dem i Figma.

    Reversed engineering handler om at arbejde ud fra det som er kendt. Det er lidt som at designe med Lego-klodser, der jo har en forud defineret form.

    Eksempel

    Herunder er et eksempel på en liste, der kan bruges til Figma reversed engineering.

    Søgning

    Håndplukkede varer

    Minikurv

    Blokgrupper fra Woocommerce

    Pladsholderbillede der skal repræsentere en vare, der bliver vist i en hero-sektion. 1 ud af 2.

    The Fall Collection

    With high-quality materials and expert craftsmanship, our products are built to last and exceed your expectations.

    Shop now
    Quality Materials

    We use only the highest-quality materials in our products, ensuring that they look great and last for years to come.

    Expert Craftsmanship

    Our products are made with expert craftsmanship and attention to detail, ensuring that every stitch and seam is perfect.

    Unique Design

    From bold prints and colors to intricate details and textures, our products are a perfect combination of style and function.

    Customer Satisfaction

    Our top priority is customer satisfaction, and we stand behind our products 100%.

    Pladsholderbillede der skal repræsentere en vare, der bliver vist i en hero-sektion. 2 ud af 2.

    Dine blokgrupper

    Du kunne måske være interesseret i…

    Din kurv er lige nu tom!

    Gennemse webshop

    Ny i webshop

    Etc. etc.

    Fortsæt ind til du har et passende antal varer. Se evt. hvordan templates, som shop / butik opgygger groups og patterns, når varer præsenteres.