Sådan opretter du et variabelt produkt i Woocommerce

Vi vil i dette indlæg guide dig igennem oprettelsen af et variabelt produkt i Woocommerce. Variable produkter anvendes, hvis man vil have et produkter, hvor kunden skal foretage et valg inden køb – det kan f.eks. være valg af størrelse, farve eller lignende.

Har du brug for hjælp til opsætningen af et variabelt produkt? Skriv til mig på soren@sbmedia.dk

Hos SBMEDIA bygger vi primært webshops i WordPress med tilføjelsen Woocommerce, som gør WordPress til et velfungerende og overskueligt webshop system. Woocommerce byder på mange forskellige features, hvoraf én af dem er variable produkter. Et variabelt produkt er som nævnt et produkt, hvor kunden foretager et valg. Det kan f.eks. være at man på sin webshop har et produkt, der findes i flere forskellige farver og man vil derfor gerne nøjes med at oprette et produkt og lade kunden vælge farven inde på produktet – her kan man så anvende det variable produkt. Det samme gælder hvis man sælger tøj og vil lade kunden vælge størrelse. I den situation bruger man også et variabelt produkt til at oprette ét produkt med flere størrelser (S, M, L, XL etc.).

Variable produkter er som sådan ikke voldsomt komplicerede at sætte op, men det kan kræve at man lige har en guide ved hånden første gang man gør det. Vi har desuden en anbefaling til et gratis plugin, som kan “pifte” de variable produkter lidt op rent designmæssigt – uden det kræver de store tekniske evner. Har du spørgsmål til dele i guiden eller brug for hjælp, så er du naturligvis meget velkommen til at kontakte os 🙂

Plugin anbefaling (Gratis plugin): Variation swatches for Woocommerce (Se del 3 af guiden)

Tip: Hvis du ønsker at præsentere sådan noget som valg af farve visuelt fremfor via en dropdown, så tjek del 3 af guiden og installér det anbefalede plugin før du starter.

Guidens indhold:

• Del 1 – Oprettelse af egenskaber i Woocommerce
• Del 2 – Oprettelse og opsætning af variabelt produkt i Woocommerce
• Del 3 – Trick til at gøre dine variable produkter endnu bedre
• Del 4 – Vis “Fra” priser i stedet for prisintervaller

Vi har valgt at dele denne guide op i to dele. Vi har forsøgt, at gøre den så fyldestgørende som muligt, dog holder vi os til de gængse variable produkter og ikke de mere avancerede i denne guide. Den første del handler om hvordan du opretter egenskaber i Woocommerce. Disse egenskaber er dem kunden vælger imellem og kan f.eks. være farve eller størrelse.

Ovenstående screenshot er fra en af vores egne demo WordPress sider med Woocommerce. For at oprette nye produktegenskaber skal du gå ned til “Produkter” og derefter vælger “Egenskaber” som vist ovenover. Når du er inde under egenskaber kan du tilføje en ny egenskab. Her skriver du egenskabens overordnede navn i “Navn” (størrelse, farve eller lignende). Under “Type” er det nemmeste at lade den stå til “Vælg” og derefter ruller du lidt længere ned og trykker på knappen “Tilføj egenskab”. Du har nu oprettet en egenskab.

Herefter vil du se at din nye egenskab bliver tilføjet i tabellen til højre. Yderst til højre vil der være en mulighed for at klikke “Konfigurer udtryk”. Denne klikker du på, hvorefter du bliver sendt videre til siden hvor du kan tilføje de enkelte farver, størrelser eller den attribut du ønsker.

I dette eksempel viser vi hvordan man kan tilføje forskellige farvevarianter til et produkt. For at tilføje en ny farve skal du blot udfylde “Navn” og rulle ned i bunden og klikke på knappen “Tilføj”. Vi har valgt at oprette farverne grøn, blå og rød. Det er disse farver vores variable produkt kan købes i. Du kan tilføje alle de farver du vil. Det er ikke påkrævet at anvende alle farver på et produkt – du vælger selv hvilke farver, der skal tilføjes til hvert enkelt produkt. Dette kigger vi på i de kommende steps, som omhandler oprettelsen og opsætningen af det variable produkt i Woocommerce.

Vi har nu fået oprettet vores egenskaber og er klar til at oprette det variable produkt. Du skal i første omgang gøre det du altid gør når du vil oprette et nyt produkt i Woocommerce. Vælg “Tilføj ny” under produkter i venstremenuen eller “Tilføj produkt” gennem “Tilføj” menuen i toppen af WordPress kontrolpanelet.

Når du har oprettet dit nye produkt, ruller du ned på siden til du når boksen “Produktdata”. Det er her du normalt sætter produktets pris, fragtklasse, varenummer osv. Men i stedet for at vælge, at det er et enkelt produkt, så vælger du i stedet “Variabelt produkt” i dropdown menuen i toppen af “Produktdata” boksen. Når du vælger variabelt produkt i dropdown menuen skal du være opmærksom på, at det du vil se ikke vil være helt som normalt. Du kan f.eks. ikke sætte én enkelt pris for produktet, men fortvivl ej – de kommende steps i guiden hjælper dig igennem den resterende del af opsætningen. Du vil desuden opdage at du i venstremenuen i “Produktdata” vil få et nyt menupunkt, der hedder “Variationer”. Det er her vi primært arbejder, når vi opretter variable produkter og definerer de forskellige variationer af dit produkt, f.eks. grøn, blå og rød.

Nu går vi til næste step, som går ud på at tilføje de egenskaber vi oprettede tidligere til det variable produkt. Dette gøres ved at gå ind under menupunktet “Egenskaber” i menuen til venstre. Her vælges den egenskab man vil tilføje til produktet i dropdown menuen “Tilpasset produkt egenskab” og derefter skal man trykke “Tilføj”. Vi har her valgt den “Farve” som vi oprettede tidligere. I boksen “Værdi(er)” vælges de enkelte værdier fra egenskaben som skal tilføjes til produktet. Vi har her et produkt som kan fås i alle vores farver (blå, grøn og rød) og derfor trykker vi blot på “Vælg alle”. Hvis du kun vil have nogle af farverne kan du enten vælge dem en efter en ved at klikke på feltet og vælge i den dropdown menu, der kommer frem, eller trykke “Vælg alle” og fjerne de værdier (farver) du ikke vil have med, ved at klikke på det lille kryds ved hver værdi. Når du har valgt værdier er det vigtigt, at du sætter flueben i feltet “Brugt til varianter”. Herefter skal du trykke på “Gem egenskaber” og så er vi klar til at gå i gang med oprettelsen af hver variation.

På ovenstående billede ser du mulighederne for én variant (her er det farven blå). Vi kan sætte et billede for denne variant – dette billede vil skifte når kunden vælger mellem de enkelte farver. Du kan desuden sætte en pris, varenummer og lignende nødvendig info om produktet. Det er derfor muligt at sætte forskellige priser, hvis varianterne ikke skal koste det samme.

Du kan desuden anvende dropdown menuen hvor du tilføjer en ny variant til, at sætte basis priser for samtlige variationer på én gang og meget mere. Vælg f.eks. “Angiv normal” priser i menuen og klik derefter fortsæt. Herefter vil du se en dialogboks, hvor du kan indtaste en pris, som så vil blive basisprisen på samtlige af dine variationer. Dette kan gøres tilsvarende med udsalgsprisen og du kan også vælge, at hæve eller sænke prisen på samtlige variationer på én gang, med et fast beløb eller en procentsats.

Når du har indtastet de nødvendige informationer på alle varianter skal du klikke på knappen “Gem ændringer”. Herefter er det en god idé at sætte et produktbillede, som du vil gøre normalt ved et enkelt produkt – dette gøres ude i højre side under “Produktbillede”. Dette billede vil blive vist på din shop side, hvor alle produkterne listes.

Her ses vores variable produkt ude på vores frontend. Der vil være en dropdown menu, hvor kunden kan vælge mellem de forskellige farver vi har oprettet. Bemærk at prisen vil stå som et interval, hvis varianterne har forskellige priser, f.eks. 199-299, hvis produkterne varierer mellem 199,- og 299,- i pris. Du har nu oprettet dit variable produkt. På samme måde som vi har gjort med farver kan du f.eks. gøre med størrelser eller hvilken som helst anden egenskab, som kunden kan vælge i mellem på dit produkt.

Når du sidder og designer din webshop og opretter dine variable produkter, tænker du måske at du godt kunne tænke dig at give dine noget lidt “federe” end en dropdown menu til at vælge mellem farver, størrelser eller lignende. Vi vil i denne del vise dig hvordan du kan bruge et helt gratis plugin til at give dine variable produkter en lille opgradering rent visuelt.

Plugin anbefaling (Gratis plugin): Variation swatches for Woocommerce

Det første du skal gøre er at installere det anbefalede plugin og aktivere det, som du gør med alle dine plugins. Det er et relativt simpelt plugin, som er nemt at anvende og som virkelig kan gøre en visuel forskel på din webshop. Det skal dog nævnes at dette plugin ikke er et krav for at du kan opsætte variable produkter i Woocommerce, blot en tilføjelse/visuel opgradering.

Proceduren er fuldstændig den samme som før, dog med én undtagelse. Vi har nu nogle ekstra muligheder under “Type” når vi tilføjer egenskaber. Vi arbejder ligesom før med farver som egenskab og derfor vælger vi “Color” under type, hvor vi før have den sat til “Vælg”. Hvis vi arbejdede med størrelser ville vi vælge “Label”, fordi det giver en mulighed for at sætte et bogstav ind som label når kunden skal vælge variabel – altså f.eks. kunne vi bruge “L” for størrelse large.

Vi har nu muligheden for at tildele en farve til vores værdier inden for vores egenskab. Så vi sætter altså en blå farve, en grøn farve og en rød farve. Dette anvendes til den visuelle præsentation af egenskaben ude på webshoppen. Det plugin vi har installeret skal basalt set kun anvendes i processen omkring oprettelse af egenskaber. Efterfølgende er processen omkring oprettelse af det variable produkt fuldstændig den samme som vi gennemgik i del 2 af denne guide – så det er faktisk super nemt og hurtigt at anvende. Vi slutter af med at vise den nye visuelle præsentation af farvevalget på produktet, på frontend.

Som man kan se, så har vi nu et lidt mere visuel præsentation af de mulige farvevalg. Kunden kan se hvilke farver, der er at vælge i mellem og den valgte vises tydeligt med flueben, mens de andre farver dæmpes en smule. Vi har desuden også lavet et eksempel, hvor dette plugin er anvendt til at præsentere forskellige størrelser. Her har vi i stedet for “Color” brugt “Label” som type ved oprettelse af vores egenskab, igen er processen fuldstændig den samme.

Vi har nu gennemgået oprettelse af produkt egenskaber og værdier, samt opsætning af et variabelt produkt i Woocommerce. Variable produkter er for mange meget relevante, da de giver mange muligheder og er langt mere brugervenlige end hvis man havde 7 helt ens produkter, hvor den eneste forskel f.eks. var farven. Desuden kan egenskaberne (de forskellige variable) også kombineres, dog bliver det lidt mere teknisk.

Her til sidst runder vi af med en lille ‘code-snippet’, der kan hjælpe dig med at vise priser som “fra” priser, fremfor prisintervaller, som ellers er standard i Woocommerce. Selvom du ikke er specielt teknisk og ikke er en haj til at kode, så kan dette løses via en meget simpel tilføjelse til dit temas functions.php fil. Der findes plugins, der kan gøre det samme, men denne løsning er noget hurtigere og nemmere, og så mener vi ikke at der er nogen grund til, at have et plugin til at lave denne lille ændring.

OBS: Den tidligere kode virker ikke længere efter seneste Woocommerce opdatering!

Alternativ kode kan findes her: WeDevs kode

Business Bloomer har også lavet et alternativ til koden, som du kan afprøve – det er det du finder herunder.

/**
* @snippet Variable Product Price Range: "From: $min_price"
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=275
* @author Rodolfo Melogli
* @compatible WooCommerce 3.5.4
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/

add_filter( 'woocommerce_variable_price_html', 'bbloomer_variation_price_format_min', 9999, 2 );

function bbloomer_variation_price_format_min( $price, $product ) {
$prices = $product->get_variation_prices( true );
$min_price = current( $prices['price'] );
$price = sprintf( __( 'Fra: %1$s', 'woocommerce' ), wc_price( $min_price ) );
return $price;
}

Vi håber denne guide vil hjælpe dig til at få opsat de variable produkter i Woocommerce – Det er i hvert fald bare med at kaste sig ud i det. Skulle du have brug for hjælp eller have nogle spørgsmål, så er du velkommen til at skrive til os via vores kontaktformular eller på mail kontakt@sbmedia.dk.