Woo tutorials

Forfatter: Per Jensen

  • Komponenter

    Garagesalg

  • Status på varelagereg

    Status på varelagereg

    Eksporter til CSV (comma separated value).
    Varer kan eksporteres til Excell.

    Det er relativt enkelt at eksportere alle varerne til et regneark. Woo gemmer filen som CSV (comma separated values).

    Desværre er det min erfaring, at Excell har overraskende svært ved at importere en CSV. Formatteringen går som regel i kludder.

    En bedre løsning er at bruge regnearket i Libre Offfice. Åbn filen i Libre Office Calc, og gem den som enten en *.ods eller som et Excell-regneark, hvis nogen er tåbelige nok til at insistere på at bruge produktet fra Microsoft.

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

    Se vores nye hoodie!

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