WordPress 2

[vc_row][vc_column][rev_slider_vc alias=”codeclub”][/vc_column][/vc_row][vc_row css=”.vc_custom_1526309875521{margin-top: 50px !important;}” el_id=”Code-Club”][vc_column css=”.vc_custom_1506468919149{margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”][nd_options_text nd_options_text_tag=”h3″ nd_options_text_weight=”bold” nd_options_text_family=”nd_options_first_font” nd_options_text_align=”center” nd_options_text=”02. Webshop maken met WordPress + WooCommerce” nd_options_text_color=”#007ffd” nd_options_text_font_size=”40″ nd_options_text_line_height=”50″ nd_options_class=”scaletext6″][vc_empty_space height=”15px”][vc_row_inner css=”.vc_custom_1536749159791{margin-bottom: 20px !important;}” el_id=”Lessen”][vc_column_inner width=”2/12″ offset=”vc_hidden-sm vc_hidden-xs”][/vc_column_inner][vc_column_inner width=”2/3″ offset=”vc_col-md-8 vc_col-xs-12″][nd_options_text nd_options_text_tag=”h3″ nd_options_text_weight=”normal” nd_options_text_family=”nd_options_first_font” nd_options_text_align=”center” nd_options_text=”Met de plugin WooCommerce verander je jouw WordPress website in een waanzinnige webshop.” nd_options_text_color=”#007ffd” nd_options_text_font_size=”20″ nd_options_text_line_height=”25″][vc_column_text css=”.vc_custom_1539686129970{margin-top: 15px !important;}”]

Vandaag leren we de basis van WooCommerce door onze CV/Portfolio pagina om te toveren naar een webshop. Aan het einde van deze les heb je de volgende handelingen en begrippen ontdekt:

[/vc_column_text][vc_column_text css=”.vc_custom_1543821053804{margin-top: -15px !important;}”]

– WordPress permalinks (debuggen)(niet altijd nodig)
– WooCommerce Setup Wizard
– WooCommerce geavanceerde instellingen en aanpassingen
– Producten toevoegen
– Menu’s maken en wijzigen
– Betaalmiddelen toevoegen aan WooCommerce

[/vc_column_text][vc_text_separator title=”Naslagwerk” color=”custom” el_width=”70″ accent_color=”#66b3ff” el_class=”verdieping”][vc_column_text css=”.vc_custom_1539686852538{margin-top: -15px !important;}”]

‘WooCommerce is een enorm krachtige en uitgebreide plugin. WooCommerce is gemaakt voor kleine zelfstandige ondernemers, grote bedrijven en alles daartussenin. Wil je gebruik maken van alles wat WooCommerce te bieden heeft of loop je vast? Hieronder enkele links met alle informatie over WooCommerce:

Webtalis handboek WooCommerce >

Webtalis WooCommerce Setup Wizard >

Hostnet’s WooCommerce voor beginners introductie >

WooCommerce Getting Started Documentation >

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/12″ offset=”vc_hidden-sm vc_hidden-xs”][/vc_column_inner][/vc_row_inner][vc_row_inner disable_element=”yes” el_id=”Buttons-Code”][vc_column_inner width=”1/4″ offset=”vc_hidden-sm vc_hidden-xs”][/vc_column_inner][vc_column_inner width=”1/4″ offset=”vc_col-md-3 vc_hidden-sm vc_col-xs-3 vc_hidden-xs”][vc_btn title=”DE OPDRACHT” style=”custom” custom_background=”#007ffd” custom_text=”#ffffff” shape=”round” size=”sm” align=”right” i_align=”right” i_icon_fontawesome=”fa fa-caret-down” add_icon=”true” link=”url:%23Club-Info|||”][/vc_column_inner][vc_column_inner width=”1/4″ offset=”vc_col-md-3 vc_hidden-sm vc_col-xs-3 vc_hidden-xs”][vc_btn title=”HET VOORBEELD” style=”outline-custom” outline_custom_color=”#007ffd” outline_custom_hover_background=”#007ffd” outline_custom_hover_text=”#ffffff” shape=”round” size=”sm” align=”left” i_align=”right” i_icon_fontawesome=”fa fa-caret-down” add_icon=”true” link=”url:%23Trainingsschema|||”][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” css=”.vc_custom_1526370745027{margin-top: 0px !important;background-color: #007ffd !important;}” el_id=”Club-Info”][vc_column css=”.vc_custom_1506468919149{margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”][vc_empty_space][nd_options_text nd_options_text_tag=”h3″ nd_options_text_weight=”bold” nd_options_text_family=”nd_options_first_font” nd_options_text_align=”center” nd_options_text=”PLAN VAN AANPAK” nd_options_text_color=”#ffffff” nd_options_text_font_size=”40″ nd_options_text_line_height=”50″][vc_row_inner gap=”10″ css=”.vc_custom_1526372245157{margin-top: 0px !important;margin-right: 25px !important;margin-bottom: 0px !important;margin-left: 25px !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}” el_id=”Wanneer”][vc_column_inner width=”1/6″ offset=”vc_hidden-sm vc_hidden-xs” css=”.vc_custom_1536752244077{margin-top: -25px !important;}”][/vc_column_inner][vc_column_inner width=”2/3″ css=”.vc_custom_1539693486180{border-bottom-width: 1px !important;padding-bottom: 10px !important;border-bottom-color: #56a9fc !important;border-bottom-style: solid !important;}”][vc_empty_space height=”10px”][vc_toggle title=”0. Inloggen WordPress” color=”white” custom_font_container=”tag:h2|font_size:24|text_align:left|color:%23ffffff” custom_google_fonts=”font_family:Montserrat%3Aregular%2C700|font_style:400%20regular%3A400%3Anormal” el_id=”1538434063795-ad484c82-43a2″ use_custom_heading=”true” css=”.vc_custom_1543821137021{margin-top: -15px !important;}”]0.1
Log in op je eigen *jouwURL*.TwaanLab.academy webpagina via: *jouwURL*.TwaanLab.academy/wp-admin

 

0.1.1 Let Op!
Het kan zijn dat je ipv jouw Dashboard je bij de Setup Wizard van WooCommerce komt. Klik dan nogmaals in op je adresbalk en typ jouw persoonlijke wp-admin inlog link weer in. Als het goed is kom je nu terecht op het Dashboard.[/vc_toggle][vc_empty_space][nd_options_text nd_options_text_tag=”h4″ nd_options_text_weight=”normal” nd_options_text_family=”nd_options_first_font” nd_options_text=”Webshop opzetten met WooCommerce” nd_options_text_color=”#ffffff” nd_options_text_font_size=”15″ nd_options_text_line_height=”15″][vc_empty_space height=”15px”][vc_toggle title=”1. WooCommerce instellingen” color=”white” custom_font_container=”tag:h2|font_size:24|text_align:left|color:%23ffffff” custom_google_fonts=”font_family:Montserrat%3Aregular%2C700|font_style:400%20regular%3A400%3Anormal” el_id=”1538435152469-6bfe4862-d7a9″ use_custom_heading=”true”]We gaan een webshop opzetten met de WooCommerce plug-in. Bij de installatie van de plug-in krijg je automatisch een Setup Wizard die jou door alle WooCommerce instellingen loodst. De WooCommerce plug-in is al geïnstalleerd op jouw website dus moeten we deze Setup Wizard handmatig uitvoeren.

 

1.1
Ga in je Dashboard naar WooCommerce

 

1.2
Om de Setup Wizard handmatig te doen ga je naar de link helemaal rechtsbovenin je scherm Help > Setup Wizard en dan Setup Wizard

 

1.3
De Setup Wizard helpt je met het instellen van de basis gegevens van je webshop én maakt voor jou de pagina’s aan die WooCommerce nodig heeft om te werken op jouw website. Vul de volgende gegevens in naar wens in de Setup Wizard:
Store Setup (adres e.d.)
Payment (welke betalingen ontvang je)
Shipping (verzendkosten)[/vc_toggle][vc_toggle title=”2. WooCommerce aanpassen” color=”white” custom_font_container=”tag:h2|font_size:24|text_align:left|color:%23ffffff” custom_google_fonts=”font_family:Montserrat%3Aregular%2C700|font_style:400%20regular%3A400%3Anormal” el_id=”1539688327554-3ab7cccc-c26d” use_custom_heading=”true”]Je hebt zojuist de basis instellingen van WooCommerce gemaakt. Vaak wil je meer instellen zoals het niet verzenden naar het buitenland of welke emails er verzonden worden na een bestelling.

 

2.1
Als je meer controle wilt over de instellingen van WooCommerce kan je gaan naar WooCommerce > Settings

 

2.2
Blader door alle tabbladen én subtabbladen om te bekijken wat je kan aanpassen. Pas aan wat jij anders wilt hebben.[/vc_toggle][vc_empty_space][nd_options_text nd_options_text_tag=”h4″ nd_options_text_weight=”normal” nd_options_text_family=”nd_options_first_font” nd_options_text=”Webshop vullen met producten” nd_options_text_color=”#ffffff” nd_options_text_font_size=”15″ nd_options_text_line_height=”15″][vc_empty_space height=”15″][vc_toggle title=”3. Producten toevoegen” color=”white” custom_font_container=”tag:h2|font_size:24|text_align:left|color:%23ffffff” custom_google_fonts=”font_family:Montserrat%3Aregular%2C700|font_style:400%20regular%3A400%3Anormal” el_id=”1539688642802-a693e48b-c402″ use_custom_heading=”true”]Nu alles van onze webshop is ingesteld moeten we onze winkel gaan vullen met producten die te kopen zijn.

 

3.1
Onderzoek hoe je zelf producten kan toevoegen aan WooCommerce. In deze tutorial van Hostnet vind je alles over de instellingen van jouw producten, het toevoegen van producten en de verzendmethodes.[/vc_toggle][vc_empty_space][nd_options_text nd_options_text_tag=”h4″ nd_options_text_weight=”normal” nd_options_text_family=”nd_options_first_font” nd_options_text=”Wordpress Menu aanpassen” nd_options_text_color=”#ffffff” nd_options_text_font_size=”15″ nd_options_text_line_height=”15″][vc_empty_space height=”15″][vc_toggle title=”4. Menu aanpassen” color=”white” custom_font_container=”tag:h2|font_size:24|text_align:left|color:%23ffffff” custom_google_fonts=”font_family:Montserrat%3Aregular%2C700|font_style:400%20regular%3A400%3Anormal” el_id=”1539690206559-dc336443-ae06″ use_custom_heading=”true”]Nu alles van onze webshop is ingesteld moeten we onze winkel gaan vullen met producten die te kopen zijn.

 

4.1
Ga naar Appearance > Menu

 

4.2
We moeten eerst een eigen Menu aanmaken. Typ Main in het vakje Menu Name en klik op Create Menu.

 

4.3
Geef het Main menu als locatie Primary en sla het Menu op.

 

4.4
In de linkerbalk staan de pagina’s die we toe kunnen voegen aan ons eigen gemaakte Menu. Voeg je CV/Portfolio pagina, Shop én Checkout pagina toe aan het Main Menu. Sla het Main Menu weer op.

 

4.5
Maak een tweede menu aan genaamd Submenu.

 

4.6
Voeg Cart en My Account toe aan het Submenu en geef hem de locatie Social mee.

 

4.7
Sla ook dit Menu op en bekijk waar alles terecht gekomen in door je website weer te bekijken. Zie je je links niet staan in het één of beide Menu’s? Dan zijn ze waarschijnlijk niet goed toegevoegd. Voeg ze dan nogmaals toe aan de Menu’s.

 

4.8
Wil je de volgorde van de links in de Menu’s aanpassen? Dat kan via Appearance > Menu, selecteer het Menu dat je wilt aanpassen, verschuif de pagina’s in de volgorde waarin jij hem wilt en sla het menu op.

 

4.9
Hier kan je ook de namen van de Menu links veranderen. Verander de naam in het Menu van Shop naar Winkel en van Checkout naar Afrekenen[/vc_toggle][vc_empty_space][nd_options_text nd_options_text_tag=”h4″ nd_options_text_weight=”normal” nd_options_text_family=”nd_options_first_font” nd_options_text=”Betaalmogelijkheden instellen” nd_options_text_color=”#ffffff” nd_options_text_font_size=”15″ nd_options_text_line_height=”15″][vc_empty_space height=”15″][vc_toggle title=”5. Mollie instellen” color=”white” custom_font_container=”tag:h2|font_size:24|text_align:left|color:%23ffffff” custom_google_fonts=”font_family:Montserrat%3Aregular%2C700|font_style:400%20regular%3A400%3Anormal” el_id=”1539692798374-8870c80f-5546″ use_custom_heading=”true”]Voor deze stap heb je een Mollie account en KVK inschrijving nodig. Als je geen KVK inschrijving hebt, kan je deze stap overslaan. Als alternatief hiervoor kan je wel de PayPal plugin gebruiken.

 Onze winkel is bijna klaar. We moeten alleen nog zorgen dat we de betalingen van onze gebruikers kunnen ontvangen. Standaard heeft WooCommerce PayPal en Stripe als betaalmiddelen. In Nederland maken we veel meer gebruik van iDeal. Om iDeal op onze website te integreren maken we gebruik van de plugin Mollie.

 

5.1
Webtalis heeft een geweldige en uitvoerige uitleg over het instellen van Mollie. Je kan zijn video bekijken of de pagina doorlezen voor alle informatie, let wel op, je hebt hiervoor een Mollie Account nodig.[/vc_toggle][vc_empty_space][nd_options_text nd_options_text_tag=”h4″ nd_options_text_weight=”normal” nd_options_text_family=”nd_options_first_font” nd_options_text=”Extra: Abonnementen verkopen en betalingen ontvangen” nd_options_text_color=”#ffffff” nd_options_text_font_size=”15″ nd_options_text_line_height=”15″][vc_empty_space height=”15″][vc_toggle title=”§ Subscription (abonnement) toevoegen” color=”white” custom_font_container=”tag:h2|font_size:24|text_align:left|color:%23ffffff” custom_google_fonts=”font_family:Montserrat%3Aregular%2C700|font_style:400%20regular%3A400%3Anormal” el_id=”1539693286293-b33a8cc4-863a” use_custom_heading=”true”]Onze winkel is bijna klaar. We moeten alleen nog zorgen dat we de betalingen van onze gebruikers kunnen ontvangen. Standaard heeft WooCommerce PayPal en Stripe als betaalmiddelen. In Nederland maken we veel meer gebruik van iDeal. Om iDeal op onze website te integreren maken we gebruik van de plugin Mollie.

 

§.1
Met de plugin Subscription is het mogelijk geworden om abonnementen te verkopen via je webshop. Dit kan een abonnement zijn op een maandelijkse nieuwe wisky of een digitaal abonnement voor toegang tot jouw website. Hier vind je een uitgebreide video over abonnementen in WooCommerce met de Plugin Subscription. De Subscription plugin is al geïnstalleerd en kan je dus direct gebruiken.[/vc_toggle][/vc_column_inner][vc_column_inner width=”1/6″ offset=”vc_hidden-sm vc_hidden-xs”][/vc_column_inner][/vc_row_inner][vc_row_inner gap=”10″ css=”.vc_custom_1526372245157{margin-top: 0px !important;margin-right: 25px !important;margin-bottom: 0px !important;margin-left: 25px !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column_inner width=”1/6″ offset=”vc_hidden-sm vc_hidden-xs” css=”.vc_custom_1536752244077{margin-top: -25px !important;}”][/vc_column_inner][vc_column_inner width=”2/3″ css=”.vc_custom_1539693559109{border-bottom-width: 1px !important;padding-bottom: 10px !important;border-bottom-color: #56a9fc !important;border-bottom-style: solid !important;}”][vc_column_text css=”.vc_custom_1538436898469{margin-top: 15px !important;}”]

Volgende week gaan we verder met het maken van onze wordpress website door het toevoegen van een menu, webshop en portfolio pagina. In de tussentijd is de website van jou, geef hem vorm, verander de inhoud en maak hem zo groot als jij wilt. Note: kom je erachter dat je een specifieke plugin of thema nodig hebt voor jouw wensen? Dit kan via Toine.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″ offset=”vc_hidden-sm vc_hidden-xs”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row_content” disable_element=”yes” css=”.vc_custom_1539693572594{margin-top: 0px !important;background-color: #efefef !important;}” el_id=”Trainingsschema”][vc_column css=”.vc_custom_1506468919149{margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”][vc_empty_space][nd_options_text nd_options_text_tag=”h3″ nd_options_text_weight=”bold” nd_options_text_family=”nd_options_first_font” nd_options_text_align=”center” nd_options_text=”HET VOORBEELD” nd_options_text_color=”#007ffd” nd_options_text_font_size=”40″ nd_options_text_line_height=”50″ nd_options_class=”scaletext”][nd_options_text nd_options_text_tag=”h3″ nd_options_text_weight=”bold” nd_options_text_family=”nd_options_first_font” nd_options_text_align=”center” nd_options_text=”CV portfolio pagina” nd_options_text_color=”#56a9fc” nd_options_text_font_size=”35″ nd_options_text_line_height=”50″][vc_row_inner gap=”10″ css=”.vc_custom_1526376354519{margin-top: 0px !important;margin-right: 25px !important;margin-bottom: 0px !important;margin-left: 25px !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column_inner width=”1/2″ offset=”vc_hidden-sm vc_hidden-xs” css=”.vc_custom_1538437462783{padding-top: 0px !important;padding-bottom: 10px !important;}”][nd_options_text nd_options_text_tag=”h3″ nd_options_text_weight=”normal” nd_options_text_family=”nd_options_first_font” nd_options_text_align=”center” nd_options_text=”Startpunt” nd_options_text_color=”#56a9fc” nd_options_text_font_size=”20″ nd_options_text_line_height=”30″][vc_column_text css=”.vc_custom_1538437894348{margin-top: 0px !important;}”]

Hieronder vind je een mobile versie van de website. Full desktop weergave klik hier.

[/vc_column_text][vc_raw_html css=”.vc_custom_1538437651726{margin-right: -15px !important;padding-right: 0px !important;padding-left: 0px !important;}”]JTNDaWZyYW1lJTIwd2lkdGglM0QlMjI1NTAlMjIlMjBoZWlnaHQlM0QlMjI0MDIlMjIlMjBzcmMlM0QlMjJodHRwcyUzQSUyRiUyRmRlbW8udHdhYW5sYWIuYWNhZGVteSUyRiUyMiUyMGZyYW1lYm9yZGVyJTNEJTIyMCUyMiUyMGFsbG93ZnVsbHNjcmVlbiUyMGFsaWduJTNEJTIyY2VudGVyJTIyJTNFJTNDJTJGaWZyYW1lJTNF[/vc_raw_html][/vc_column_inner][vc_column_inner width=”1/2″ css=”.vc_custom_1526399274290{padding-top: 0px !important;padding-bottom: 10px !important;}” offset=”vc_hidden-sm vc_hidden-xs”][nd_options_text nd_options_text_tag=”h3″ nd_options_text_weight=”normal” nd_options_text_family=”nd_options_first_font” nd_options_text_align=”center” nd_options_text=”Eindresultaat” nd_options_text_color=”#56a9fc” nd_options_text_font_size=”20″ nd_options_text_line_height=”30″][vc_column_text css=”.vc_custom_1538437961768{margin-top: 0px !important;}”]

Hieronder vind je een mobile versie van de website. Full desktop weergave klik hier.

[/vc_column_text][vc_raw_html css=”.vc_custom_1538437629821{margin-right: -15px !important;padding-right: 0px !important;padding-left: 0px !important;}”]JTNDaWZyYW1lJTIwd2lkdGglM0QlMjI1NTAlMjIlMjBoZWlnaHQlM0QlMjI0MDIlMjIlMjBzcmMlM0QlMjJodHRwcyUzQSUyRiUyRnRlc3QudHdhYW5sYWIuYWNhZGVteSUyMiUyMGZyYW1lYm9yZGVyJTNEJTIyMCUyMiUyMGFsbG93ZnVsbHNjcmVlbiUyMGFsaWduJTNEJTIyY2VudGVyJTIyJTNFJTNDJTJGaWZyYW1lJTNF[/vc_raw_html][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row css=”.vc_custom_1506894025055{margin-top: 60px !important;margin-bottom: 60px !important;}”][vc_column width=”1/3″ css=”.vc_custom_1526551515259{padding-top: 0px !important;}” offset=”vc_col-lg-4 vc_col-md-3 vc_hidden-sm vc_hidden-xs”][/vc_column][vc_column width=”1/3″ css=”.vc_custom_1506932702339{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;border-left-color: #007ffd !important;border-left-style: solid !important;border-right-color: #007ffd !important;border-right-style: solid !important;border-top-color: #007ffd !important;border-top-style: solid !important;border-bottom-color: #007ffd !important;border-bottom-style: solid !important;}” offset=”vc_col-lg-offset-0 vc_col-lg-4 vc_col-md-offset-0 vc_col-md-6″][nd_options_text nd_options_text_tag=”h2″ nd_options_text_weight=”bold” nd_options_text_family=”nd_options_first_font” nd_options_text_align=”center” nd_options_text=”Volg ons!” nd_options_text_font_size=”35″ nd_options_text_line_height=”35″ nd_options_text_color=”#007ffd”][vc_column_text css=”.vc_custom_1506808492359{margin-left: -40px !important;}”]

[smbtoolbar]

[/vc_column_text][/vc_column][vc_column width=”1/3″ offset=”vc_col-lg-offset-0 vc_col-lg-4 vc_col-md-offset-0 vc_col-md-3 vc_hidden-sm vc_hidden-xs”][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1506472380464{border-top-width: 1px !important;padding-top: 30px !important;padding-bottom: 30px !important;background-color: #f9f9f9 !important;border-top-color: #f1f1f1 !important;border-top-style: solid !important;}”][vc_column css=”.vc_custom_1506469139427{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_empty_space height=”30px”][vc_row_inner equal_height=”yes”][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”1/6″][nd_options_image nd_options_align=”center” nd_options_width=”100%”][/vc_column_inner][vc_column_inner width=”1/6″][nd_options_image nd_options_align=”center” nd_options_width=”100%”][/vc_column_inner][vc_column_inner width=”1/6″][nd_options_image nd_options_align=”center” nd_options_width=”100%” nd_options_image=”1281″][/vc_column_inner][vc_column_inner width=”1/6″][nd_options_image nd_options_align=”center” nd_options_width=”100%”][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *