De standaard single product pagina ziet er echt niet zo goed uit. Alles plakt veel te veel tegen de rand en de algemene lay-out kan gewoonweg veel beter. Daarom maken we een nieuwe single product template, die van toepassing zal zijn op de producten.<\/p>\n
Een single product 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 Single product<\/em><\/li>\n
- Vul een logische naam in voor je template, bv. “Single product”<\/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-18.32.42.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-18.37.36.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 single product template opbouwen<\/h2>\n
Meestal ziet de opbouw van een single product eruit zoals het voorbeeld hieronder: links de productfoto’s, rechts de andere elementen (titel, prijs, korte omschrijving, winkelmandje) en onderaan de lange productomschrijving.<\/p>\n
Je bent hier echter volledig vrij in! Wil jij liever wat specialer doen en niet de standaard volgen, feel free he!<\/p>\n
Product elementen invoegen<\/span><\/h3>\n\n- Klik op het roze plusje en voeg een container in met de structuur van 2 kolommen<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Plusje.png\" "\\"Plusje\\"")
<\/span>![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-18.48.43.png\" "\\"2")
<\/span><\/p>\nVoeg links de productfoto’s toe en rechts de andere elementen, volgens de stapjes hieronder. Dubbelcheck eerst of de subcontainers in de kolomrichting<\/strong> ingesteld zijn.<\/p>\n\n- Klik links bovenaan in de zwarte balk op het rastertje<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.22.47.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Sleep de volgende elementen op de juiste plaats:\n
\n- Product Images (productfoto’s – links)<\/li>\n
- WooCommerce Breadcrumbs (kruimelpad – rechts)<\/li>\n
- Product Title (product titel – rechts)<\/li>\n
- Product Price (product prijs – rechts)<\/li>\n
- Short Description (korte beschrijving – rechts)<\/li>\n
- Add to Cart (toevoegen aan winkelmandje – rechts)<\/li>\n<\/ul>\n<\/li>\n
- Voeg een nieuwe container toe onder de 2 kolommen-structuur<\/li>\n
- Voeg daarin het volgende element toe: Product Data Tabs (de lange omschrijving – onderaan)<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-18.54.04.png\" "\\"Screenshot")
<\/span>![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/screencapture-shop-fixityourself-be-wp-admin-post-php-2023-05-21-19_00_56.png\" "\\"screencapture-shop-fixityourself-be-wp-admin-post-php-2023-05-21-19_00_56\\"")
<\/span><\/p>\nVoorbeeld van een sober afgewerkt resultaat:<\/strong><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/screencapture-weare-official-product-we-are-crooked-orange-t-shirt-2023-05-21-19_18_17.png\" "\\"screencapture-weare-official-product-we-are-crooked-orange-t-shirt-2023-05-21-19_18_17\\"")
<\/span><\/p>\nDe p<\/span>roduct elementen opmaken<\/span><\/h3>\nElk element kan je verder instellen en opmaken, door het te selecteren en vervolgens links in de instellingen aanpassingen te doen. Ondertussen weet je hoe het werkt, als je toch graag het voorbeeld wil volgen, bekijk den het filmpje hieronder.<\/p>\n
Je 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 > Producten<\/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-19.19.21.png\" "\\"Screenshot")
<\/span><\/p>\nEen voorbeeld bekijken<\/h2>\n\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
- Ga naar de front end van je website en open je shop pagina<\/li>\n
- Klik op een product en bekijk het resultaat<\/li>\n<\/ul>\n
Denk eraan om je pagina responsief te maken!<\/p>\n
Kleuren in het thema aanpassen<\/h2>\n
Stel dat het streepje bij de lange samenvatting in een foute kleur is, dan moet dit in het thema aangepast worden. Dit kan niet in de template zelf via Elementor.<\/p>\n
\n- Klik in het WP dashboard op Uiterlijk > Customizer<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-19.24.28.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Navigeer in de customizer naar je shop en vervolgens naar de een product, zodat je een voorbeeld kan zien<\/li>\n
- Klik links in het men u op Globaal > Kleuren<\/em><\/li>\n
- Pas in het kleurenpallet de juiste kleur aan. Het kan zijn dat je even moet zoeken voor je de juiste kleur vindt<\/li>\n
- Klik daarna op de blauwe knop Publiceren<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-19.28.32.png\" "\\"Screenshot")
<\/span><\/p>\n","protected":false},"template":"","class_list":["post-1086","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\/1086"}],"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=1086"}],"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 Meestal ziet de opbouw van een single product eruit zoals het voorbeeld hieronder: links de productfoto’s, rechts de andere elementen (titel, prijs, korte omschrijving, winkelmandje) en onderaan de lange productomschrijving.<\/p>\n Je bent hier echter volledig vrij in! Wil jij liever wat specialer doen en niet de standaard volgen, feel free he!<\/p>\n Voeg links de productfoto’s toe en rechts de andere elementen, volgens de stapjes hieronder. Dubbelcheck eerst of de subcontainers in de kolomrichting<\/strong> ingesteld zijn.<\/p>\n Voorbeeld van een sober afgewerkt resultaat:<\/strong><\/p>\n Elk element kan je verder instellen en opmaken, door het te selecteren en vervolgens links in de instellingen aanpassingen te doen. Ondertussen weet je hoe het werkt, als je toch graag het voorbeeld wil volgen, bekijk den het filmpje hieronder.<\/p>\n Er zal een pop-up openen waarin je de condities (voorwaarden) moet instellen.<\/p>\n Denk eraan om je pagina responsief te maken!<\/p>\n Stel dat het streepje bij de lange samenvatting in een foute kleur is, dan moet dit in het thema aangepast worden. Dit kan niet in de template zelf via Elementor.<\/p>\n<\/span><\/p>\n\n
<\/span><\/p>\nEen vooraf opgemaakte template invoegen<\/h2>\n
\n
<\/span><\/p>\n\n
Van nul een single product template opbouwen<\/h2>\n
Product elementen invoegen<\/span><\/h3>\n
\n
<\/span><\/span><\/p>\n\n
<\/span><\/p>\n\n
\n
<\/span><\/span><\/p>\n<\/span><\/p>\nDe p<\/span>roduct elementen opmaken<\/span><\/h3>\n
Je template publiceren<\/h2>\n
\n
<\/span><\/p>\n\n
<\/span><\/p>\nEen voorbeeld bekijken<\/h2>\n
\n
Kleuren in het thema aanpassen<\/h2>\n
\n
<\/span><\/p>\n\n
<\/span><\/p>\n","protected":false},"template":"","class_list":["post-1086","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\/1086"}],"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=1086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}