Hoe worden customizable
producten toegevoegd,
gewijzigd, opgeslagen en
verwerkt in WordPress
WooCommerce.
DOOR MOUNTAIN IT | GRONINGEN | 14-04-2021
Introductie #
Fancy product designer is een WordPress plugin die het mogelijk maakt om producten te personaliseren. Vervolgens kan de plugin in een Woocommerce product worden toegevoegd en dan kunnen klanten er zelf mee aan de slag. In dit document worden alle te maken stappen in woord en beeld behandeld.
Het begin #
Waar staat de plugin #
Je vind de plugin in het link menu op de wordpres admin pagina. Daar staat hij bijna onderaan de lijst en heeft de naam “Fancy Porduct Designer”
Boven aan staat de optie “Products” daar voeg je nieuwe categorieën & producten toe en geef je ze verschillende eigenschappen mee zoals onder welke categorie het product valt.
Daarna volgt de “Product builder” daar wijzig je wat de klant ziet wanneer hij een specifiek product heeft geselecteerd en wil bewerken. De afmeting van een canvas aan de muur wordt hier bijvoorbeeld gewijzigd wanneer er een ander formaat wordt gekozen.
“UI composer” is de plek waar het aanzicht van de editor gewijzigd kan worden. “Designs” is een plek waar globale elementen voor bepaalde categorieën kunnen worden ingesteld. “Shortcode Orders” is de plek waar de orders ingezien kunnen worden (maar niet wanner ze via WooCommerce lopen). “Settings” is de plek voor alle instellingen & “Status & Tools” is de plek waar waar nog meer instellingen veranderd kunnen worden (waaronder teksten).
Nieuwe producten toevoegen #
Alle producten hebben een eigen naam en minstens 1 aanzicht. Daarnaast kunnen producten worden toegevoegd aan een categorie.
Vb: De volgende formaten (40 x 40 & 50 x 50) voor de vorm ‘vierkant’ moeten worden toegevoegd.
Categorie toevoegen #
Ga naar product en klik op het grijze knopje “Manage Categories”
In het venster dat rechts verschijnt klik je op “Add new category”
Voer daarna in het venster dat opent de naam voor de categorie in: Vierkant.
Producten toevoegen #
Voor alle verschillende maten moet een product worden aangemaakt. Omdat het canvas 1 aanzicht heeft, het vooraanzicht, moeten we dit ook aanmaken.
Klik op “New” en geef het product een duidelijke, unieke, naam zoals 40 x 40. Om de naam te wijzigen klik je op het pen icoontje, voeg aan de naam nog cm toe, om het voor de gebruikers zo duidelijk mogelijk te maken.
Aanzicht toevoegen #
Het product heeft alleen een vooraanzicht, om dat toe te voegen klikken we op het plus icoontje achter het product dat eerder is toegevoegd. Na het klikken geef je het aanzicht een naam bijvoorbeeld “voorkant”. Wanneer je op “ok” klikt vraagt hij om een foto te selecteren. Dit is een verplicht onderdeel en kunnen we dus niet overslaan. Daarom gaan we nu verder in op de bestanden die in photoshop gemaakt moeten worden.
Afbeeldingen maken #
Om de gebruiker een beeld te geven van zijn product, een vierkant canvas aan de
muur, moeten we een afbeelding maken waarin de foto die de gebruiker upload een “leeg” vak op de muur vult.
Open de foto die gebruikt moet worden in Photoshop. Maak een nieuwe laag aan in het lagen paneel (rechts onder + icoon). Op deze laag maak je een vierkan die in
verhouding met de meubels ongeveer 40 x 40 cm is. (Vierkant tool linker menu) klik
een keer kort in het scherm zodat dit venster open en voeg de afmeting, bv 400px x 400px in.
Klik op “OK” en het vierkant verschijnt in beeld. Ben je niet blij met de verhouding, druk dan “shirt” in schaal het vierkant groter of kleiner (shift zorgt dat de verhoudingen gelijk blijven).
Van het gemaakte vierkant maken we vervolgens een “smart object” of “slim object”. Klik met de rechtermuisknop op het gebied rond de laag naam. Selecteer vervolgens “Convert to Smart Object”.
Daarna klik je weer met de rechtermuisknop op het gebied rond de laag naam. Selecteer vervolgens “Select Pixels”. Houdt “alt” ingedrukt en klik vervolgens op het knopje om een laag masker aan te maken. Dit zou er als volgt uit moeten zien.
Dit laag masker kan je nu verplaatsen naar de afbeeldingslaag, in dit geval “Interior”. Klik en sleep de witte laag naar de afbeeldingslaag.
Dit maakt een doorzichtig gat in de afbeelding op exact de zelfde grote als het gemaakte vierkant. Klik vervolgens op het oogje voor de laag met het vierkantje, dit maakt het verborgen. Het resultaat zou er alsvolgt uit moeten zien.
Zie je hier geen grijs/wit blokjes dan kan het zijn dat je afbeelding nog als “background” ingesteld staat. Dan zie je achter de laag waarschijnlijk een slotje, klik daar op en de laag zou er daarna zo uit moeten zien.
Sla dit bestand op als .png bestand. Klik op bestand > exporteren > exporteren als (Shift + Alt + CMD(of Ctrl) + W). zorg dat de instellingen ongeveer zo staan, kijk ook even hoe groot je bestand is en hoeveel KB hij wordt na het exporteren. Dit zou ik onder de 500KB proberen te houden voor deze png’s. gebruik bv de optie “scale” om het formaat van de afbeelding proportioneel kleiner te maken.
Nu kunnen we ook heel gemakkelijk de volgende formaten maken. Klik en sleep het laag master van de afbeeldingslaag terug naar de laag van het vierkant. Selecteer de laag van het vierkant en druk op CMD(Ctrl) + T. Schaal het vierkant naar het volgende formaat. Bevestig de wijziging en herhaal de laatste stappen zoals hiervoor beschreven.
Ik zal ook het fotoshop bestand sturen waar het schaduw effect al in zit. Dan kan je deze gewoon gebruiken :).
Vervolg aanmaken aanzicht. #
We klikken dus op het + icoon achter het product om een aanzicht aan te maken. Daarna geven we het aanzicht aan naam, bv voorkant. Daarna moeten we een afbeelding selecteren voor dit aanzicht. De afbeelding die we net hebben gemaakt gaan we hier ook voor gebruiken. Dus in het scherm dat zich heeft geopend upload je die afbeelding. Deze selecteer je vervolgens.
Product builder instellen. #
Vervolgens wijzigen we dit aanzicht in de “product builder”. Hier kom je door op het laagjes icoon te klikken of in het linker menu onder Fancy Product Designer op Product Builder te klikken.
In de product builder voegen we de afbeelding toe die voor dit formaat is gemaakt. Dit geeft de klant een idee van het product aan de muur op het formaat dat ze hebben gekozen. Klik in de “Layers” balk op “Image”. Geef de foto laag een naam, bv: voorgrond, klik op ok, kies vervolgens de afbeelding die we hebben geüpload voor dit formaat.
Nu de laag is toegevoegd moeten er nog wat instellingen goed gezet worden. Deze laag moet altijd op de voorgrond staan en de door de klant geüploade foto dus op de achtergond. Klik op de nu toegevoegde laag in en set de instellingen in het rechter paneel zoals hieronder. Bij “price” vul je
je de prijs in die dit formaat extra kost boven op de standaard of minimum prijs. (Bv: WooCommerce product = 20, en 40 x 40 is ingesteld op 5, dan is het totaal 25)
Daarna klik je op “save view” om de wijzigingen op te slaan.
Product instellen in WooCommerce #
Omdat we willen zien wat de gebruiker straks ziet moeten we een product maken waar we de product builder kunnen tonen. Deze stellen we in, in WooCommerce, dus we maken een nieuw product aan.
Bij het product kunnen we rechts onderaan de fancy product builder vinden. Hier kan je klikken op categorie en vervolgens vierkant aanklikken. Alle producten die we aan deze categorie toevoegen worden dan beschikbaar voor de klant als ze dit product maken in de fancy product builder.
Verder hoeven we hier niets in te stellen, deze instellingen zijn in de algemene instellingen van de plugin al ingesteld.
Producten in categorie #
De categorie die we hebben gemaakt, en in ons WooCommerce product willen laten zien, moet gevuld worden met de verschillende formaten producten die we aanmaken.
Hiervoor moeten we weer terug naar de “Products”. Daar klikken we weer op “Manage Categories”. We klikken vervolgens op een of meer producten die we willen toevoegen aan de categorie “vierkant”. De selectie wordt grijs, vervolgens zet je het vinkje voor “vierkant” aan.
Nu dit product geheel is ingesteld checken we in het product of alles zo werkt als we willen. Als dit het geval is kunnen we de andere vierkante producten toevoegen door dit eerste product te “dupliceren”.
Geef het nieuwe product een naam bv: 50 x 50 cm. Alles staat nu exact gelijk aan het product 40 x 40. Begin met het wijzigen van de afbeelding bij view. Klik op het
plaatje hier.
Vervang deze voor het plaatje dat je gaat gebruiken bij de 50 x 50 producten (een groter vakje voor het plaatje van de klant).
EN de categorie op vierkant zetten.
Vervolgens moet in de product builder het juiste plaatje worden ingevoegd. De juiste laag met de juiste instelling staat er al, hier moet je dus alleen de afbeelding
veranderen. Klik op dit icoon en selecteer de juiste afbeelding. Daarna “save view” en klaar is Kees.
Wanneer je nu het WooCommerce product op de website opnieuw laad zou de optie “Wissel Product” beschikbaar moeten zijn, daar kan je dan alle vierkante
producten zien :)!
Bestelling Ontvangen #
Als een klant de bestelling verstuurd dan komt deze bij de WooCommerce bestellingen te staan. Wanneer je order daar opent komt er in beeld te staan welke vorm (product naam) en welk formaat de klant gekozen heeft.
Vervolgens kan je op “Load order in viewer” klikken om te zien hoe de klant zijn layout had bedacht, nogmaals te zien welk formaat hij heeft gekozen en vervolgens kan je hier ook de originele afbeelding downloaden.
