Indhold vises via skabelon.
Category: Woocommerce
-
Vis produkt med shortcode
Sådan viser du et produkt med en shortcode.
[products limit=”9″ columns=”3″ orderby=”popularity” class=”quick-sale”]
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:
-
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:
Design af produktside
Se vores nye hoodie!
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:
-
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.
- Klik på Tilpas i menulinjen.
- Åbn WooCommerce fanebladet.
- 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?
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.
-
Woo: Produktfotografi
Her er nogle øvelser, som kan hjælpe en klasse med at lære at fotografere produkter til WooCommerce:
Øvelse 1: Grundlæggende produktfotograferingsteknikker
Mål: Forstå de grundlæggende principper for lys, vinkler og baggrund.
- Materialer: Enkle produkter (som kopper, bøger, tøj), smartphone eller kamera.
- Øvelse:
- Placer produktet på en ren, neutral baggrund (f.eks. et hvidt bord eller en hvid væg).
- Prøv at tage billeder fra forskellige vinkler: forfra, fra siden, ovenfra.
- Eksperimenter med naturligt lys og brug evt. lamper for at eliminere skygger.
- Diskuter i gruppen, hvilke vinkler der fremhæver produktet bedst.
Øvelse 2: Opsætning af et lysboks-studio
Mål: Lær at opsætte et mini-studio for professionelle billeder.
- Materialer: Lysboks (kan være DIY med hvidt papir), lamper, små produkter.
- Øvelse:
- Opsæt en lysboks med en ensartet baggrund og belysning fra flere sider for at reducere skygger.
- Tag billeder af små produkter (som smykker eller elektronik) fra forskellige vinkler i lysboksen.
- Rediger billederne let for at justere lysstyrke og kontrast.
Øvelse 3: Styling af produktet
Mål: Forstå hvordan styling påvirker præsentationen af produktet.
- Materialer: Tøj, sko, eller andre større produkter; rekvisitter til styling (som stof, blade, magasiner).
- Øvelse:
- Vælg et produkt og find matchende rekvisitter, der supplerer produktet uden at tage opmærksomheden fra det.
- Eksperimenter med at arrangere rekvisitterne omkring produktet og tag billeder fra forskellige vinkler.
- Diskuter, hvordan styling ændrer opfattelsen af produktet.
Øvelse 4: Skabelse af konsistente billeder til WooCommerce
Mål: Opret ensartede billeder til webshoppen.
- Materialer: Forskellige produkter fra samme kategori (f.eks. sko eller tasker), lysopsætning.
- Øvelse:
- Tag billeder af produkterne fra samme vinkel og under samme lysforhold, så de ser ens ud på WooCommerce-siden.
- Lær at beskære billederne til samme størrelse og format (fx kvadratiske billeder).
- Diskuter vigtigheden af konsistens på en webshop for at skabe en professionel følelse.
Øvelse 5: Redigering af produktbilleder
Mål: Lær grundlæggende redigering for webshops.
- Materialer: Billedredigeringsprogram (som GIMP, Photoshop eller online værktøjer).
- Øvelse:
- Importer billeder fra tidligere øvelser og lær at justere lysstyrke, kontrast, og beskæring.
- Brug værktøjer til at fjerne baggrunde, så billeder kan have en ren, hvid baggrund.
- Eksportér billeder i de korrekte formater og størrelser til WooCommerce.
Øvelse 6: Mobilfotografering og optimering til web
Mål: Tag billeder med en smartphone og optimer dem til web.
- Materialer: Smartphone, produkter, billedoptimeringsværktøjer (som TinyPNG eller ImageOptim).
- Øvelse:
- Brug en smartphone til at tage billeder af produkterne.
- Diskuter, hvordan man optimerer billeder til web uden at miste kvalitet.
- Lær at komprimere billeder for hurtigere indlæsning på WooCommerce.
Disse øvelser kan give eleverne praktiske færdigheder i produktfotografering, som er afgørende for at skabe professionelle billeder til en WooCommerce-butik.
-
Block Based WooCommerce
These are my research notes about the new Woo blocks.
By now WooCommerce has changed totally. Now everything is block based, and this will make all editing much more easy – since all is done by drag and drop. Exactly as we know it from the Gutenberg editor.
Jamie Marshland: 10 minutes Woo Introduction
Woo Blocks – in ten minutes In Jamie’s video you’ll hear that it’s possible to work with categories, keywords and tags in the page templates. Here are a few tips on how to do this.
Woo Blocks
Click the button and read more about the new blocks aka “Set up products”:
Categories, Keywords, Tags
You can filter by taxonomies. Obbiously we’ll need blocks from a premade template as our model. Here you can eiter use or copy the blocks from one of the filtering templates:
Click the button and follow the instructions by Woo.
Woo: Top Ten Blocks
Top ten Woo Blocks by Jamie Marsland Tutorial
The following tutorial is made in a Kadence Theme. That’s why the Dashboard looks a bit different.
Jack – Woo shop no plugins -
Crash Introduction: Woocommerce REST API
Tutorial: Woocommerce REST API. Woocommerce REST API
Here is a short introduction to the Woocommerce REST API. In the tutorial you will learn how to present a product list from the REST API on any HTML page. If you want to create your own markup that does not depend on the limited Woocommerce blocks in the editor the REST API will open endless possibilities.
Sample Code on Github
The code from the tutorial is available on Github:
Questions and Comments
If you have comments or suggestions for new videos about the subject please let me know in the comments below.
