Woo tutorials

Forfatter: Per Jensen

  • 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 -->
  • Menu og html

    Menu og html

  • Mega Menu

    Mega Menu

    By pure HTML, CSS and JavaScript

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