- \n
- Log in op het WP dashboard<\/li>\n
- Klik op links in het menu op Pagina’s<\/em><\/li>\n
- Verwijder de pagina Winkelwagen<\/em> (waar “winkelwagen pagina” achter staat) door er met de muis over te hoveren en te klikken op Prullenbak<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-20.07.57.png\" "\\"Screenshot")
<\/span><\/p>\nEen nieuwe pagina maken<\/h2>\n
- \n
- Log in op het WP dashboard<\/li>\n
- Klik op links in het menu op Pagina’s<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-19-at-20.40.03.png\" "\\"Screenshot")
<\/span><\/p>\n- \n
- Klik bovenaan op Nieuwe pagina<\/em><\/li>\n
- De pop-up die eventueel verschijnt mag weg geklikt worden, je ziet nu het onderstaande scherm:<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-19-at-20.46.44.png\" "\\"Screenshot")
<\/span><\/p>\n- \n
- Vul bij Titel toevoegen<\/em> de titel van je pagina in (bv. Winkelmandje)<\/li>\n
- Klik rechts bovenaan 2x op de blauwe knop Publiceren<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-19-at-20.49.04.png\" "\\"Screenshot")
<\/span><\/p>\n- \n
- Klik daarna bovenaan links op de blauwe knop Bewerk met Elementor<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-19-at-20.50.46.png\" "\\"Screenshot")
<\/span><\/p>\nEen titel toevoegen<\/h2>\n
- \n
- Klik links bovenaan bij de instellingen in de zwarte balk op het raster<\/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 het Koptekst<\/em> element links vanuit de instellingen in de container en laat los wanneer je de roze balk ziet verschijnen in de container<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-20.14.41.png\" "\\"Screenshot")
<\/span><\/p>\n- \n
- Wijzig de tekst naar “Winkelmandje” of iets gelijkaardig<\/li>\n
- Maak de titel nog verder op (typografie, kleuren, uitlijning & hoogte van de container…) indien nodig<\/li>\n<\/ul>\n
Het Cart element invoegen<\/h2>\n
- \n
- Klik links bovenaan bij de instellingen in de zwarte balk op het raster<\/li>\n<\/ul>\n<\/span><\/p>\n
- \n
- Typ in het zoekvak “cart” en sleep het Cart<\/em> element naar de pagina, onder de titel<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-20.19.41.png\" "\\"Screenshot")
<\/span><\/p>\nHet winkelmandje is momenteel leeg. Om deftig instellingen te doen en layout aan te passen aan het Cart element, moeten we dus eerst iets in het winkelmandje steken in onze shop.<\/p>\n
- \n
- Ga in een ander tabblad naar je shop page en steek een item in het winkelmandje<\/li>\n
- Ga daarna terug naar je Winkelmand pagina<\/li>\n
- Update de pagina<\/li>\n
- Refresh de pagina<\/li>\n
- Nu ga je wel het volledige Cart element te zien krijgen. Voorlopig ziet het eruit zoals het voorbeeld hieronder<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-20.23.55.png\" "\\"Screenshot")
<\/span><\/p>\nHet Cart element opmaken<\/h2>\n
Wanneer je het element aanklikt, kan gaan links de instellingen open zoals bij elk element. Zo kan je dit allemaal aanpassen:<\/p>\n
Inhoud:<\/span><\/p>\n
- \n
- Het aantal kolommen aanpassen (1 of 2)<\/li>\n
- Indien 2 kolommen de Winkelmand totalen in de rechtse kolom sticky maken<\/li>\n
- Knoppen en titels vertalen<\/li>\n
- Ervoor kiezen om het winkelmandje automatisch te updaten<\/li>\n<\/ul>\n
Stijl:<\/span><\/p>\n
- \n
- Achtergrondkleur aanpassen van heel het blok (sections)<\/li>\n
- Typografie & kleuren aanpassen van titels, beschrijvingen, links,…<\/li>\n
- Het “Bereken verzendkosten” formulier aanpassen<\/li>\n
- Samenvatting stylen<\/li>\n
- Totalen stylen<\/li>\n
- De checkout button stylen<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-20.40.25.png\" "\\"Screenshot")
<\/span>![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-20.37.27.png\" "\\"Screenshot")
<\/span><\/p>\nJe kent het principe ondertussen, je kan hier zo ver in gaan als je zelf wil. Maak er maar iets moois van!<\/p>\n
Sober voorbeeld:<\/strong><\/p>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-20.45.21.png\" "\\"Screenshot")
<\/span><\/p>\n- \n
- Update je pagina door links onderaan op de roze knop Updaten<\/em> te klikken – moest dat nog niet gebeurd zijn<\/li>\n
- Klik links bovenaan in de zwarte balk op de 3 streepjes en klik 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>\nDe winkelmand pagina als winkelmand 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 Geavanceerd<\/em><\/li>\n
- Selecteer bij Winkelwagen pagina <\/em>de winkelmand 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-20.51.17.png\" "\\"Screenshot")
<\/span><\/p>\nHet winkelmandje toevoegen aan de header<\/h2>\n
- \n
- Ga naar de frontend van je website (de pagina maakt niet uit)<\/li>\n
- Klik in de zwarte balk op Bewerkt met Elementor<\/em> en vervolgens op Header<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-20.53.58.png\" "\\"Screenshot")
<\/span><\/p>\n- \n
- Sleep het Menu Cart element in de header, rechts naast het menu<\/li>\n<\/ul>\n
Tip: als je het element er niet rechts naast krijgt, plaats het dan links naast het menu. Dan ga je naar Geavanceerd > Order en klik op het pijltje naar rechts<\/em>. Zo gaan het menu en het winkelmandje van plaats wisselen<\/p>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-20.57.56.png\" "\\"Screenshot")
<\/span>![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-21.00.44.png\" "\\"Screenshot")
<\/span><\/p>\n- \n
- Pas van elk element in de header de breedte aan bij Geavanceerd > Breedte > Aangepast<\/em> zodat het mooi naast elkaar past (bv. logo 10%, menu 80%, winkelmandje 10%)-> samen moet het altijd 100 zijn<\/li>\n<\/ul>\n
Het Menu Cart element opmaken<\/h2>\n
Je weet ondertussen al hoe het werkt. Klik het element aan en dan gaan links de instellingen open. Hier kan je allerhande instellingen en stijlaanpassingen doen, zowel voor het icoontje als het menu cart mandje zelf.<\/p>\n
Laat je helemaal gaan, test alles uit, doe maar wat je zelf mooi vindt!<\/p>\n
Wil je toch het voorbeeld volgen? Check dan de onderstaande video<\/p>\n
Denk eraan om je pagina te updaten! Bekijk een voorbeeld van het resultaat door naar de frontent van je website te gaan.<\/p>\n
Denk eraan om je pagina responsief te maken!<\/p>\n","protected":false},"template":"","class_list":["post-1087","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\/1087"}],"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=1087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Pas van elk element in de header de breedte aan bij Geavanceerd > Breedte > Aangepast<\/em> zodat het mooi naast elkaar past (bv. logo 10%, menu 80%, winkelmandje 10%)-> samen moet het altijd 100 zijn<\/li>\n<\/ul>\n
- Sleep het Menu Cart element in de header, rechts naast het menu<\/li>\n<\/ul>\n
- Klik vervolgens in de tab Geavanceerd<\/em><\/li>\n
- Klik links bovenaan in de zwarte balk op de 3 streepjes en klik vervolgens op Afsluiten<\/em><\/li>\n<\/ul>\n
- Update je pagina door links onderaan op de roze knop Updaten<\/em> te klikken – moest dat nog niet gebeurd zijn<\/li>\n
- Typ in het zoekvak “cart” en sleep het Cart<\/em> element naar de pagina, onder de titel<\/li>\n<\/ul>\n
- Klik links bovenaan bij de instellingen in de zwarte balk op het raster<\/li>\n<\/ul>\n
- Sleep het Koptekst<\/em> element links vanuit de instellingen in de container en laat los wanneer je de roze balk ziet verschijnen in de container<\/li>\n<\/ul>\n
- Klik links bovenaan bij de instellingen in de zwarte balk op het raster<\/li>\n<\/ul>\n
- Klik rechts bovenaan 2x op de blauwe knop Publiceren<\/em><\/li>\n<\/ul>\n
- De pop-up die eventueel verschijnt mag weg geklikt worden, je ziet nu het onderstaande scherm:<\/li>\n<\/ul>\n
- Klik bovenaan op Nieuwe pagina<\/em><\/li>\n
- Verwijder de pagina Winkelwagen<\/em> (waar “winkelwagen pagina” achter staat) door er met de muis over te hoveren en te klikken op Prullenbak<\/em><\/li>\n<\/ul>\n