Een product archive template maken<\/h2>\n\n- Log in op het WP dashboard<\/li>\n
- Klik links in het menu op Templates<\/em> en vervolgens op Nieuwe toevoegen<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-26-at-12.01.05.png\" "\\"Nieuwe")
<\/span><\/p>\n\n- Kies bij Type<\/em> in de popup Products Archive<\/em><\/li>\n
- Vul een logische naam in voor je template, bv. “Productoverzicht”<\/li>\n
- Klik vervolgens op Template aanmaken<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-15.42.49.png\" "\\"Screenshot")
<\/span><\/p>\nEen vooraf opgemaakte template invoegen<\/h2>\n
De template bibliotheek opent automatisch nadat de template werd aangemaakt. Als je hier iets naar je zin vindt, kan je een vooraf opgemaakte template kiezen en invoegen<\/em>. Er komen doorheen de jaren telkens meer en meer templates bij.<\/p>\n\n- Klik bij de template of wireframe naar keuze op Invoegen<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-15.46.10.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Doe aanpassingen aan tekst, lay-out, kleuren en inhoud in het algemeen zodat alles klopt<\/li>\n<\/ul>\n
Van nul een productoverzicht pagina opbouwen<\/h2>\nDe banner<\/span><\/h3>\nMaak een leuke banner voor je shop pagina. Ga hiervoor naar de les over Een homepage maken<\/a>, daar komt alles aan bod om een mooie banner te maken. Voorzie z\u00e9ker een duidelijke call to action, bv. “shop nu” of “koop nu” of …<\/p>\nVoeg eventueel nog extra tekst toe onder de banner. Eigenlijk mag je deze pagina helemaal inrichten zoals je zelf wil. Een voorbeeld hieronder.<\/p>\n
Voorbeeld van een shop banner:<\/strong><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-15.53.16.png\" "\\"Screenshot")
<\/span><\/p>\nHet Products element invoegen<\/span><\/h3>\n\n- Voeg een nieuwe container<\/li>\n
- Klik links bovenaan in de zwarte balk op het raster sleep het Products<\/em> element in de container<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.22.47.png\" "\\"Screenshot")
<\/span>![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-16.14.45.png\" "\\"Screenshot")
<\/span><\/p>\nHet Products element opmaken<\/span><\/h3>\n\n- Maak indien gewenst de container hoger<\/a> en pas de uitlijning<\/a> aan<\/li>\n
- Selecteer het Products element door er in te klikken<\/li>\n
- De instellingen gaan open aan de linker kant van het scherm<\/li>\n<\/ul>\n
Inhoud > Content:<\/span><\/p>\n\n- Colums & rows:<\/span> kies het aantal kolommen en rijen<\/li>\n
- Pagination:<\/span> als je dit aanvinkt kan je Allow Order<\/span> aanvinken, daarmee kunnen mensen een sortering kiezen (op populariteit, nieuwste of prijs)<\/li>\n
- Show Result Count:<\/span> het totaal aantal producten wordt weergegeven<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-16.31.12.png\" "\\"Screenshot")
<\/span><\/p>\nInhoud > Query:<\/span><\/p>\nBij de query kan je instellen welke producten er weergegeven moeten worden. Standaard staat dit op “Latest products”.<\/p>\n
\n- Source: <\/span>zet dit op Manual Selection als je manueel producten wil selecteren (kies ze dan bij include of exclude bij Search & Select) of als je alle producten wil weergeven. Als je alle producten wil weergeven, dan laat je alles bij Search & Select onder include of exclude leeg<\/li>\n
- Order by:<\/span> kies hier op welke manier je de producten wil sorteren: op datum, titel, prijs, populariteit,…<\/li>\n
- Order:<\/span> kies hier of je de producten oplopend of aflopend wil sorteren<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-16.37.55-1.png\" "\\"Screenshot")
<\/span><\/p>\nStijl:<\/span><\/p>\nMaak het Products element helemaal op naar keuze. Doe inspiratie op van andere webshops als je wat vast zit.<\/p>\n
\n- Colums gap:<\/span> de plaats tussen de producten op kolomniveau<\/li>\n
- Rows gap:<\/span> de plaats tussen de producten op rijniveau<\/li>\n
- Alignment:<\/span> de uitlijning van de tekst ten opzichte van de afbeelding<\/li>\n
- Image:<\/span> hier kan je een rand instellen rond de afbeelding, alsook de randkleur en afgeronde hoeken. Bij Spacing kan je de plaats tussen de afbeelding en de titel instellen<\/li>\n
- Title:<\/span> maak hier de product titels op -> tekstkleur, typografie, spacing<\/li>\n
- Hetzelfde geldt voor: rating (aantal sterren, als je dat hebt aangezet in de instellingen), price, regular price<\/li>\n
- Button:<\/span> kies de opmaak van de knoppen -> tekstkleur, achtergrondkleur, randkleur, typgorafie, rand,…<\/li>\n
- View cart:<\/span> pas hier de opmaak van de knop “bekijk winkelwagen” aan. Die wordt pas zichtbaar nadat iemand op de knop “toevoegen aan winkelwagen” heeft geklikt en is enkel van toepassing bij producten die niet variabel zijn<\/li>\n
- Box:<\/span> je kan nog kiezen om heel de box waar het product in zit – zowel de afbeelding als de tekst eronder – op te maken. Je kan bv een rand er rond zetten of de achtergrondkleur aanpassen,…<\/li>\n
- Sale Flash:<\/span> als je actieprijzen hebt toegevoegd aan producten, dan zal bij die producten een sale flash verschijnen die je hier kan opmaken<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-16.48.13.png\" "\\"Screenshot")
<\/span>![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-16.48.27.png\" "\\"Screenshot")
<\/span>![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-16.48.37.png\" "\\"Screenshot")
<\/span><\/p>\nEen voorbeeld:<\/strong><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/screencapture-shop-fixityourself-be-2023-05-21-17_05_29.png\" "\\"screencapture-shop-fixityourself-be-2023-05-21-17_05_29\\"")
<\/span><\/p>\nProductcategorie\u00ebn weergeven in de zijbalk<\/span><\/h3>\nAls je productcategorie\u00ebn wil weergeven in de zijbalk, dan ga je eerst een thumbnail afbeelding moeten toevoegen aan elke categorie – moest dit nog niet gebeurd zijn. Bekijk de les van de categorie\u00ebn<\/a> opnieuw indien nodig.<\/p>\n\n- Selecteer de container <\/strong>waar het Products element in zit en zorg ervoor dat die in de rijrichting<\/strong> staat<\/li>\n
- Is het Products element kleiner geworden? Doe dan het volgende: selecteer het Products element > Ga naar Geavanceerd > Breedte > Aangepast > 100%<\/li>\n
- Klik bovenaan in de zwarte balk op het rastertje en sleep het Product Categories<\/em> element naast het Products element<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-17.12.52.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Zet bij Inhoud > Layout het aantal kolommen op 1<\/li>\n
- Als het Product Categories element te groot is, pas de breedte dan aan: selecteer het Product Categories element > Ga naar Geavanceerd > Breedte > Aangepast > 20%<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-17.14.44.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Maak in het tabblad Stijl het element verder op zodat het er exact uitziet hoe je wil<\/li>\n<\/ul>\n
Product filters<\/span><\/h3>\nWat als je nu ook nog productfilters wil toevoegen? Je wil bv. dat je klanten kunnen filteren op kleur, maat, soort,… <\/p>\n
Helaas is er geen standaard filter optie beschikbaar in WooCommerce, daarvoor moet je werken met een externe plugin. Er is eentje dat ik heel erg aanraad en dat is de filter plugin van Crocoblock<\/strong> (JetSmartFilters). De plugins van Crocoblock zijn betalend maar heel goedkoop, deze plugin kost maar \u20ac15 bv.<\/p>\nAlle plugins van Crocoblock zijn echt zalig trouwens en allemaal zeer betaalbaar.<\/p>\n
Zoekfunctie<\/span><\/h3>\nVoor de zoekfunctie kan je de standaard zoekfunctie van WordPress gebruiken of de JetSearch plugin van Crocoblock (betalend). Met de WP zoekfunctie geraak je wel al ergens maar je hebt niet zoveel vrijheid om die in te stellen en te stylen. Met de WP zoekfunctie zal er op heel de website gezocht worden.<\/p>\n
Hieronder instructies voor het invoegen van de WP zoekfunctie.<\/p>\n
\n- Klik links bovenaan in de zwarte balk op het rastertje<\/li>\n<\/ul>\n
<\/span><\/p>\n\n- Typ in het zoekvak “search” en sleep het Search Form element boven of naast het productoverzicht<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-17.31.02.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Stel alles in naar keuze bij Inhoud en maak op naar keuze bij Stijl<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-17.33.24.png\" "\\"Screenshot")
<\/span>![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-17.33.32.png\" "\\"Screenshot")
<\/span><\/p>\nJe template publiceren<\/h2>\n\n- Klik links onderaan op de roze knop Publiceren<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.21.41-e1682251299564.png\" "\\"Publiceren\\"")
<\/span><\/p>\nEr zal een pop-up openen waarin je de condities (voorwaarden) moet instellen.<\/p>\n
\n- Klik op Add condition<\/em><\/li>\n
- Include > All product archives<\/em> staat automatisch al klaar<\/li>\n
- Als je wil kan je filteren op categorie en per categorie een andere template maken bijvoorbeeld<\/li>\n
- Klik rechts onderaan op de groene knop Save & close<\/em> <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-17.39.47.png\" "\\"Screenshot")
<\/span><\/p>\nJe template op een pagina invoegen<\/h2>\n\n- Klik links bovenaan in de zwarte balk op de 3 streepjes en vervolgens op Afsluiten<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-12.51.33.png\" "\\"Afsluiten")
<\/span><\/p>\n\n- Klik links in het WP dashboard in het menu op Pagina’s<\/em><\/li>\n<\/ul>\n
De standaard shop pagina verwijderen<\/span><\/h3>\nEr zijn een hele reeks nieuwe pagina’s toegevoegd nadat WooCommerce werd ge\u00efnstalleerd, ook een shop of winkel pagina. De bestaande mag verwijderd worden want die is niet in Elementor gemaakt en we gaan een nieuwe toevoegen.<\/p>\n
\n- Klik bij de winkel pagina (waar “shop page” achter staat) op Prullenbak<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-17.49.00.png\" "\\"Screenshot")
<\/span><\/p>\nEen nieuwe pagina maken & de template invoegen<\/h3>\n\n- Klik bij Pagina’s<\/em> op Nieuwe pagina<\/em><\/li>\n
- Geef de pagina een logische naam (bv. Shop of Winkel)<\/li>\n
- Klik rechts bovenaan 2x op de blauwe knop Publiceren<\/em><\/li>\n
- Klik vervolgens op Bewerk met Elementor<\/li>\n
- Klik op het mapje in het midden van de pagina om de template bibliotheek te openen<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.43.58.png\" "\\"Template\\"")
<\/span><\/p>\n\n- Klik op Mijn templates<\/em> en vervolgens op Invoegen<\/em> bij de template van het productoverzicht<\/li>\n
- Klik in de popup op Toepassen<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-17.58.36.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Klik links onderaan op de roze knop Updaten<\/em><\/li>\n
- Ga terug naar het WP dashboard door links bovenaan in de zwarte balk op de 3 streepjes te klikken en vervolgens op Afsluiten<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.36.04.png\" "\\"Updaten\\"")
<\/span><\/span><\/p>\nDe shop pagina als shop pagina instellen<\/h2>\n\n- Klik in het WP dashboard links in het menu op WooCommerce > Instellingen<\/em><\/li>\n
- Klik vervolgens in de tab Producten<\/em><\/li>\n
- Selecteer bij Winkelpagina <\/em>de shop pagina die je net hebt gemaakt<\/li>\n
- Klik onderaan op Wijzigingen opslaan<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-18.03.58.png\" "\\"Screenshot")
<\/span><\/p>\nDe shop pagina in het menu toevoegen en\/of als homepage instellen<\/h2>\n\n- Klik hier<\/a> om de instructies te bekijken over hoe je een pagina aan het menu toevoegt<\/li>\n
- Klik hier<\/a> om instructies te bekijken over hoe je een pagina als homepage instelt<\/li>\n<\/ul>\n
Denk eraan om je pagina responsief te maken!<\/p>\n","protected":false},"template":"","class_list":["post-1085","tva_lesson","type-tva_lesson","status-publish","hentry","tva_courses-module-9-een-webshop-maken","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson\/1085"}],"collection":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson"}],"about":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/types\/tva_lesson"}],"wp:attachment":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
De template bibliotheek opent automatisch nadat de template werd aangemaakt. Als je hier iets naar je zin vindt, kan je een vooraf opgemaakte template kiezen en invoegen<\/em>. Er komen doorheen de jaren telkens meer en meer templates bij.<\/p>\n Maak een leuke banner voor je shop pagina. Ga hiervoor naar de les over Een homepage maken<\/a>, daar komt alles aan bod om een mooie banner te maken. Voorzie z\u00e9ker een duidelijke call to action, bv. “shop nu” of “koop nu” of …<\/p>\n Voeg eventueel nog extra tekst toe onder de banner. Eigenlijk mag je deze pagina helemaal inrichten zoals je zelf wil. Een voorbeeld hieronder.<\/p>\n Voorbeeld van een shop banner:<\/strong><\/p>\n Inhoud > Content:<\/span><\/p>\n Inhoud > Query:<\/span><\/p>\n Bij de query kan je instellen welke producten er weergegeven moeten worden. Standaard staat dit op “Latest products”.<\/p>\n Stijl:<\/span><\/p>\n Maak het Products element helemaal op naar keuze. Doe inspiratie op van andere webshops als je wat vast zit.<\/p>\n Een voorbeeld:<\/strong><\/p>\n Als je productcategorie\u00ebn wil weergeven in de zijbalk, dan ga je eerst een thumbnail afbeelding moeten toevoegen aan elke categorie – moest dit nog niet gebeurd zijn. Bekijk de les van de categorie\u00ebn<\/a> opnieuw indien nodig.<\/p>\n Wat als je nu ook nog productfilters wil toevoegen? Je wil bv. dat je klanten kunnen filteren op kleur, maat, soort,… <\/p>\n Helaas is er geen standaard filter optie beschikbaar in WooCommerce, daarvoor moet je werken met een externe plugin. Er is eentje dat ik heel erg aanraad en dat is de filter plugin van Crocoblock<\/strong> (JetSmartFilters). De plugins van Crocoblock zijn betalend maar heel goedkoop, deze plugin kost maar \u20ac15 bv.<\/p>\n Alle plugins van Crocoblock zijn echt zalig trouwens en allemaal zeer betaalbaar.<\/p>\n Voor de zoekfunctie kan je de standaard zoekfunctie van WordPress gebruiken of de JetSearch plugin van Crocoblock (betalend). Met de WP zoekfunctie geraak je wel al ergens maar je hebt niet zoveel vrijheid om die in te stellen en te stylen. Met de WP zoekfunctie zal er op heel de website gezocht worden.<\/p>\n Hieronder instructies voor het invoegen van de WP zoekfunctie.<\/p>\n Er zal een pop-up openen waarin je de condities (voorwaarden) moet instellen.<\/p>\n Er zijn een hele reeks nieuwe pagina’s toegevoegd nadat WooCommerce werd ge\u00efnstalleerd, ook een shop of winkel pagina. De bestaande mag verwijderd worden want die is niet in Elementor gemaakt en we gaan een nieuwe toevoegen.<\/p>\n Denk eraan om je pagina responsief te maken!<\/p>\n","protected":false},"template":"","class_list":["post-1085","tva_lesson","type-tva_lesson","status-publish","hentry","tva_courses-module-9-een-webshop-maken","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson\/1085"}],"collection":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson"}],"about":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/types\/tva_lesson"}],"wp:attachment":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/span><\/p>\n\n
<\/span><\/p>\nEen vooraf opgemaakte template invoegen<\/h2>\n
\n
<\/span><\/p>\n\n
Van nul een productoverzicht pagina opbouwen<\/h2>\n
De banner<\/span><\/h3>\n
<\/span><\/p>\nHet Products element invoegen<\/span><\/h3>\n
\n
<\/span><\/span><\/p>\nHet Products element opmaken<\/span><\/h3>\n
\n
\n
<\/span><\/p>\n\n
<\/span><\/p>\n\n
<\/span><\/span><\/span><\/p>\n<\/span><\/p>\nProductcategorie\u00ebn weergeven in de zijbalk<\/span><\/h3>\n
\n
<\/span><\/p>\n\n
<\/span><\/p>\n\n
Product filters<\/span><\/h3>\n
Zoekfunctie<\/span><\/h3>\n
\n
<\/span><\/p>\n\n
<\/span><\/p>\n\n
<\/span><\/span><\/p>\nJe template publiceren<\/h2>\n
\n
<\/span><\/p>\n\n
<\/span><\/p>\nJe template op een pagina invoegen<\/h2>\n
\n
<\/span><\/p>\n\n
De standaard shop pagina verwijderen<\/span><\/h3>\n
\n
<\/span><\/p>\nEen nieuwe pagina maken & de template invoegen<\/h3>\n
\n
<\/span><\/p>\n\n
<\/span><\/p>\n\n
<\/span><\/span><\/p>\nDe shop pagina als shop pagina instellen<\/h2>\n
\n
<\/span><\/p>\nDe shop pagina in het menu toevoegen en\/of als homepage instellen<\/h2>\n
\n