Thema eMaxStore : kwaliteit voor een prikje

We hebben eerder al gesproken over hoe je een mooi, maar voor een goed werkend thema voor je shop moet kiezen. Er zijn eigenlijk heel wat punten waarop je moet letten. De zoektocht kan na een tijdje dan ook een beetje vervelend beginnen worden. Er lijkt aan ieder thema steeds wel iets te schelen. Dat ene kleine puntje dat je net hebt ontdekt in de demo doet je dan afknappen en de hele zoektocht kan weer opnieuw beginnen.
Wel, ik heb voor jullie een supertip. Stop maar met zoeken en geef één keer een klein bedrag uit. Met dat kleine bedrag kun ja al een thema kopen waarvan ik bijna 100% zeker ben dat je in de wolken zult zijn. De naam is eMaxStore en is speciaal ontwikkeld voor WooCommerce.

De makers, Mythemeshop, zijn geen nieuwelingen. Neen, ze hebben hun strepen in de Wordpress-wereld al ruimschoots verdiend. En dat weerspigelt zich in de kwaliteit van hun thema's. Maar het thema in actie zien is uiteraard dé methode om jullie te overtuigen. Klik dus hier voor een demo.

De eigenschappen van eMaxStore

Voor zo weinig geld krijg je wel héél veel:

• Retina iconen : op gelijk welk apparaat, je icoontjes zien er steeds op hun paasbest uit, zonder pixels.
• SEO : dit thema wordt zeer makkelijk (én correct) opgepikt door Google.
• Responsive : gelijk met welk apparaat je de site bekijkt, eMaxStore past zich aan zodat de gebruikers steeds een mooie site te zien krijgt.
• Een checkout in stappen : hier kun je over discussiëren, maar een afrekenproces in eenvoudige stappen neemt je kopers bij het handje zodat ze uiteindelijk op de betalen-knop zullen drukken.
• Een uitgebreide footer : onderaan kun je kiezen voor 3 of 4 of zelfs 5 kolommen.
• Zwevend menu : ook als je gebruikers naar beneden scrollen is het menu nog steeds te zien. En dat komt de navigatie en het gebruiksgemak alleen maar ten goede.
• Kleur en kleur en kleur : je kan het thema volledig voorzien van je eigen kleuren.
• Ingebouwde vertaling : het thema is heel makkelijk te vertalen. Zonder dat je plugins moet beginnen downloaden.
• Producten vergelijken : je klanten kunnen verschillende producten makkelijk met elkaar vergelijken zodat ze makkelijk de beste keuze kunnen maken.
• Snel! Het eMaxStore thema is gebouwd om snel te laden wat Google heel erg kan waarderen. En je klanten uiteraard ook.
• Gerelateerde producten : je kunt andere producten tonen onder de hoofdpagina van een bepaald product. Deze gerelateerde producten worden dan ook nog eens voorgesteld in een mooie banner.
• Levenslange support
• Levenslange toegang tot een uitgebreide documentatie
• Enz...

Wat kost het?

Al dat fraais komt niet gratis, maar het scheelt weinig. Zeker als je bedenkt dat je het thema zo vaak mag gebruiken als je wil. Handig (en goedkoop) als er ooit een tweede webshop zal komen!
En... ik kreeg van Mythemeshop nog een leuke extra : jullie krijgen 20% korting met de code emax20coupon.

Momenteel kosten de thema's op Mythemeshop $35.00. Met de bon wordt dat dus $28.00. Geloof me vrij, je zult geen spijt krijgen van zoveel kwaliteit voor zo weinig geld. Als je webshop een klein beetje begint te draaien heb je je geld dubbel en dik terugverdiend.

Een nieuwe database aanmaken in Plesk Controle Paneel

Een Wordpress-installatie vereist ook steeds een database waarin je posts, reacties van bezoekers, enz... terechtkomen. Naargelang de hoster die je hebt gekozen zal je een soort controlepaneel hebben waarin je dit kunt doen. Sommige hoster maken gebruik van het Plesk-paneel. Hier kun je lezen hoe je een daar een database aanmaakt.

1. In je brower tik je de naam in van je website gevolgd door :8443. Bvb www.mijn domein.com:8443

2. Log in met de gegevens die je hoster je heeft verstrekt.

3. Zorg zeker dat je terecht bent gekomen op bijde juiste website als je meerdere domeinen hebt.

4. Onder de rubriek Applications & Services kies je Databases.

5. Klik op de knop Add New Database.

6. Geef je database een naam en kies voor het type MySQL. Druk daarna op de knop OK.

7. In het volgende scherm moet je ook een gebruiker toewijzen aan de database. Druk dus op Add New Database User.

8. Nu geef je de gebruiker een willekeurige naam en koppel je hieraan ook een paswoord (dat je 2x moet intikken). Druk op OK.

Je database is aangemaakt en een bijhorende gebruiker ingesteld.

Verschillende plugins in een keer installeren

Wie aan meerdere Worpress-sites werkt, wil ook vaak dezelfde plugins installeren. Je collectie plugins staat waarschijnlijk in een mapje op je PC en keer op keer moet je die één voor één opnieuw installeren. Daar is ook een kortere manier voor.
Er bestaan ook plugins die het werk uit handen nemen, maar als het kan vermijd ik liever een plugin zodra het kan.

Onderstaande methode zal je niet veel voordeel opbrengen als je ditv maar één keer hoeft te doen. Maar wie telkens dezelfde plugin moet herinstalleren, zal toch flink wat tijd winnen.

Hoe ga je te werk?
1. download alle plugins die je nodig hebt en plaats alle zip bestanden in een mapje apart op je PC
2. Unzip alle bestanden en verwijder de originele zip-bestanden
3. Open Filezilla en selecteer de inhoud van je speciaal aangemaakte map
4. Plaats nu alle mappen naar je website in de map wp-content/plugins
5. In het beheergedeelte van je site activeer je de plugins nu één voor één

WooCommerce site klonen naar een nieuwe host

Wie een webwinkel goed wil voorbereiden doet best op een ander domein dan waar de uiteindelijke webshop terecht zal komen. Zo kun je een goedkope domeinnaam (met bijhorende webruimte) kopen om op te testen. Eenmaal je site op punt staat kun je deze migreren naar je nieuwe / bestaande webruimte.
Zoiets klinkt vaak eenvoudiger dan het in werkelijkheid is. Denk maar aan al je afbeeldingen, producten, blog, reacties, categorieën,plugins,...

Maar een plugin met de passende naam Duplicator kan je helpen. We gaan uit van de volgende situatie : je hebt de site opgebouwd op www.BESTAAND.com en wil deze verhuizen naar www.NIEUW.com . Eerst en vooral moeten we de Duplicator-plugin installeren op www.BESTAAND.com:

• Download de plugin op de site van Wordpress en bewaar het zip-bestand op je computer.
• In Wordpress ga je naar Plugins >> Nieuwe plugin.
• Kies de optie Uploaden.
• Blader naar het bewuste zip-bestand en kies Nu installeren.
• Wanneer Wordpress klaar is kun je ook meteen Activeren.

Na de activatie zien we in onze linkerkolom een nieuw item : Duplicator. Druk hierop en we krijgen meteen een scherm voorgeschoteld dat ons vraagt om een nieuw pakket aan te maken.

Druk op het Create New en een nieuw scherm zal openen. Je ziet nu drie onderdelen die we moeten invullen (of aanvullen):

Eerst en vooral moeten we de naam van onze backup een naam geven. Duplicator heeft dit reeds voor ons ingevuld, maar als je wil kun je hier een andere naam aan geven. Je kunt ook, indien je dit wenst, nog een persoonlijke verduidelijking invullen in het vak Notes.

Tweede vak is Archive. Standaard zijn hier reeds een paar zaken aangeduid en deze kun je laten zoals ze zijn. Dan wordt alles opgenomen in de kopie van je site. Als je bepaalde zaken (bvb bepaalde mappen) toch wil uitsluiten kun je dit hier aanduiden. Ook bepaalde tabellen uit je database kun je hier uitsluiten.

Derde vak is Installer. Hier kun je twee zaken aanvullen. Eerst en vooral (en dit is belangrijk!) de gegevens van je database op www. BESTAAND.com. Vervolgens kun je ook de nieuwe url invullen. In ons geval www.NIEUW.com

Nu kunnen we onderaan drukken op de knop Next.

Onze Duplicator-plugin gaat aan de slag. Dit kan een tijdje duren; naargelang de omvang van je site.
Wanneer Duplicator klaar is komen we terecht op een nieuw scherm. Dit geeft het resultaat weer van een scan die Duplicator voor ons heeft uitgevoerd.
Wanneer je tevreden bent kun je nu een kopie maken door onderaan op de knop Build te drukken.

Nu is Duplicator een pakket aan het klaarstomen. In dit pakket zit alles wat we nodig hebben om onze site te verhuizen. Dit kan even duren. Het is ook belangrijk het scherm niet af te sluiten. Het uiteindelijke resultaat is dat we twee bestanden kunnen downloaden op onze computer : een installer-bestand en een archiefbestand. Beiden gaan we dus op onze computer downloaden.

Nu schakelen we over naar onze nieuwe site, dus www.NIEUW.com. Daar hebben we wel een nieuwe database nodig. Hiervoor zijn er twee opties :

1. We laten Duplicator een nieuwe database aanmaken.Vergeet niet om je gegevens neer te pennen : je database-naam, de database-gebruiker en het bijhorende paswoord.
2. Als er op je nieuwe site reeds een database aanwezig is en je weet 100% zeker dat deze mag worden overschreven, zorg er dan voor dat je alle benodigde gegevens van deze database bij de hand hebt.

Via een FTP-programma (bvb FileZilla) log je in op je nieuwe website en in de root plaats je de twee bestanden die Duplicator zonet heeft gemaakt. Maak je geen zorgen over Wordpress-bestanden; al wat we nodig hebben zit in onze twee bestanden.

Nu begint het spannend te worden. We gaan in onze webbrowser naar www.NIEUW.com/installer.php.

Automatisch komen we terecht in stap 1 van het proces. We zien hier ook als onze nieuwe website voldoet aan alle vereisten. Als je PHP-versie niet voldoet, zul je contact moeten opnemen met je hoster.

Het enige wat je eigenlijk moet doen is aangeven als je een nieuwe database wil of als er een bestaande databse moet worden gebruikt.

Vergeet ook onderaan niet aan te vinken dat je akkoord gaat met de voorwaarden. Daarna kun je drukken op Run Deployment.

Duplicator gaat nu aan de slag om alle bestanden en de database te installeren. Naargelang de grootte van je site kan dit even duren. Automatisch komen we terecht in stap 2.


In stap 2 moet je de URL's controleren die Duplicator aangeeft. deze zijn meestal correct, maar zorg ervoor dat je alles toch nog eens goed controleert. Bevestigen doe je onderaan met de knop Run Update.

Stap 3 geeft aan dat alles is geslaagd. Nu moet je wel nog je permalinks opnieuw instellen. Tevens moet je ook de twee bestanden verwijderen die we eerder hebben geplaatst op www.NIEUW.com. Dit doe je door in je dashboard te gaan naar Duplicator >> Tools >> Cleanup.

Succes!

Je Woocommerce site sneller maken

Wie voor een webwinkel vertrouwt op Wordpress en WooCommerce heeft een goede keuze gemaakt. Zeker voor beginners is het een behoorlijke lage drempel om Wordpress en de WooCommerce-instellingen onder de knie te krijgen. En wat je zelf niet kunt, kan een plugin of een mooi thema vaak voor je oplossen.

Maar uiteindelijk verliezen we een beetje het overzicht en zijn we al lang blij dat alles werkt en eruit ziet zoals wij dat willen. En dan verliezen we één belangrijk aspect uit het oog : de laadsnelheid van onze site. Zowel Google als onze klanten houden van een site die lekker snel laadt en reageert. Gelukkig kunnen we zelf een groot deel van deze snelheid bepalen, mits we enkele regels in acht nemen:

1. verwijderen van ongebruikte plugins
2. opsporen van plugins die de site vertragen
3. verwijderen van themes die we niet gebruiken
4. onze afbeeldingen optimaliseren
5. onnodige reacties verwijderen
6. onnodige pagina's verwijderen
7. gebruik een caching tool
8. zorg steeds voor de laatste updates

1. Verwijderen van ongebruikte plugins

Vaak zul je bepaalde instellingen willen bereiken waarvoor je een plugin gebruikt. Soms is de uitkomst hiervan niet volgens je wensen en besluit je om de plugin te deactiveren. Maar ook gedeactiveerde plugins kunnen je site trager maken. Daarom moet je ze ook verwijderen. Ga daarvoor alsvolgt tewerk :

• Ga naar het beheergedeelte van je Wordpress site >> Plugins >> Geïnstalleerde plugins. 
• In de lijst van al je plugins moet je de plugins die je niet meer wenst te gebruiken deactiveren
• Eenmaal een plugin is gedeactiveerd, kun je nu ook kiezen voor verwijderen.
• Als Wordpress vraagt om ook de bijhorende bestanden te verwijderen, kun je dit bevestigen met Ja, deze bestanden verwijderen.

2. Opsporen van plugins die de site vertragen

Het klinkt misschien tegenstrijdig, maar dankzij een plugin kun je nagaan welke andere plugins je site trager maken. Wees hier hard in. Zo kan een plugin om gerelateerde posts te tonen je hele site behoorlijk loom maken. Dan is het misschien beter deze plugin toch te schrappen, hoe handig die ook lijkt.
De plgun in kwestie is P3 Plugin Performance Profiler. Om deze plugin te installeren :

• Download de plugin op de site van Wordpress en bewaar het zip-bestand op je computer.
• In Wordpress ga je naar Plugins >> Nieuwe plugin.
• Kies de optie Uploaden.
• Blader naar het bewuste zip-bestand en kies Nu installeren.
• Wanneer Wordpress klaar is kun je ook meteen Activeren.

Eenmaal de plugin geïnstalleerd is gaan we naar Plugins >> Geïnstalleerde plugins en we zien onze nieuwe plugin in het lijstje staan. We hoeven alleen op Scan Now te drukken. We komen in een nieuw scherm terecht en drukken op de knop Start Scan.

Nu komen we te weten welk aandeel elke plugin heeft in het laadproces van onze webwinkel. Hieruit kun je dan zelf beslissen wat je wil verwijderen (zie punt 1 hierboven). Eenmaal je de ongewenste plugins hebt verwijderd, kun je de plugin P3 misschien best ook verwijderen aangezien je deze nu toch niet meer nodig hebt.

3. Verwijderen van themes die we niet gebruiken

In het bouwproces van onze webwinkel hebben we wellicht verschillende thema's uitgeprobeerd. Degene die nu niet meer nodig zijn, kunnen we gerust verwijderen.  Ga naar Weergave >> Thema's. Je krijgt nu een lijst te zien met al de thema's die geïnstalleerd zijn.

Druk op het allereerste thema. Je krijgt nu het thema te zien in een volledig scherm. Onderaan rechts staat een knop "verwijderen" behalve voor het thema dat momenteel actief is. Verwijder op deze manier alle thema's die overbodig zijn. Met de pijltjes bovenaan links kun je tussen de verschillende thema's wisselen.

4. Afbeeldingen optimaliseren

Het optimaliseren van afbeeldingen kan nogal breed worden geïnterpreteerd. Er zijn namelijk veel aspecten waarop je kunt letten. Maar een belangrijke stap is om je afbeelding kleiner in bestandsgrootte te maken. Een plugin als WP Smush.it is een ware parel om je afbeeldingen kleiner in bestandsgrootte te maken en toch een perfecte kwailiteit te behouden.
Let er ook op dat je afbeeldingen geen 1200 x 1200 zijn als ze maar worden getoond op je site met een grootte van 300 x 300.
Een website zoals Web Resizer is best handig om dit soort acties makkelijk en gratis te doen.

5. Onnodige reacties verwijderen

Een standaardinstallatie van Wordpress in combinatie met WooCommerce heeft vaak al enkele reacties en productreviews ingebouwd. Deze hebben geen enkel nut en je kunt ze dus ook best verwijderen. Als je een bestaande site hebt waar al reacties staan, kun je ook eens nagaan welke reacties je makkelijk kunt verwijderen omdat ze toch niks bijbrengen.
Om reacties te verwijderen ga je in het beheergedeelte van je Wordpressinstallatie naar Reacties en je ziet meteen een lijst van alle reacties. Wanneer je met de cursor over de reactie gaat, krijg je de optie om de reactie naar de prullenbak te verwijzen.

Eigenlijk is de reactie nu dus nog niet definitief verwijderd, want de prullenbak is maar een tussenstap. Als je de prullenbak ook wil ledigen kun je deze terugvinden bovenaan het scherm :

Als je hierop klikt kun je ofwel de reactie één voor één verwijderen. Je kunt ook kiezen om de prullenbak in één keer leeg te maken.

6. Onnodige pagina's verwijderen

Overloop ook steeds je pagina's. Verwijder deze waarvan je ze overbodig vindt. Een standaardinstallatie van Wordpress zal ook steeds een Vorbeeldpagina installeren. Vergeet deze zeker niet te verwijderen. De werkwijze is dezelfde als het verwijderen van reacties.

7. Gebruik een caching tool

Mijn favoriete caching tool is W3 Total Cache. Over deze plugin kun je meteen een boek vol pennen. Maar hier gaan we alleen de basis bespreken die voor de meesten zou moeten voldoen.

• Download de plugin op de site van Wordpress en bewaar het zip-bestand op je computer.
• In Wordpress ga je naar Plugins >> Nieuwe plugin.
• Kies de optie Uploaden.
• Blader naar het bewuste zip-bestand en kies Nu installeren.
• Wanneer Wordpress klaar is kun je ook meteen Activeren.

Eenmaal de plugin actief is, zal er een menu bijkomen in de linkerkolom van het beheergedeelte van Wordpress. We kiezen voor de optie General Settings. We activeren de Paginacache en kiezen als methode Disk: Enhanced. Hierna bewaren we deze instellingen.

Volgende stap is Performance >> Browser Cache. In het gedeelte Algemeen kun je alles aanvinken, Behalve de optie voor 404-pagina's.
Deze instellingen zouden moeten volstaan. Als je het gevoel hebt dat je site helemaal niet sneller is geworden, kun je de plugin gerust weer verwijderen.

8. Zorg steeds voor de laatste updates

Het is een goede gewoonte om je site goed te onderhouden. Zelf doe ik het ongeveer elke maand. Dan ga ik na als er updates zijn van m'n plugins, theme en de Wordpressinstallatie.

Afbeeldingen zijn wazig en onscherp in WooCommerce

Wie een webwinkel wil maken met WooCommerce steek heel veel moeite in allerlei aspecten van de website. Velen komen om het einde van het proces dan ook voor een teleurstelling te staan als ze het uiteindelijke resultaat zien : de afbeeldingen zijn onscherp, wazig en zien er helemaal niet uit zoals het moet.

Nochtans is dit euvel makkelijk op te lossen. Vaak doet het probleem zich voor bij afbeeldingen in het lijstje "meest recente producten" of in het lijstje van je producten die je in de kijker wil zetten (featured products).

Klik op de bovenstaande afbeelding om het probleem te zien op volle grootte. Je merkt dat de afbeeldingen niet scherp zijn.Het probleem ontstaat omdat de instellingen van WooCommerce en de uiteindelijke grootte op de site niet overeen komen.

Als je rechtsklikt op de  afbeelding in je webwinkel kun je kiezen voor "Afbeeldingsinfo bekijken" (Firefox).

Hier zien we dat de afbeelding een originele afmeting heeft van 140x140px. Maar onze webshop toont een afbeelding die veel groter is : 218x218px. Door dit uitrekken van een kleinere afbeelding gaat veel kwaliteit verloren en dat veroorzaakt dus de wazige of onscherpe plaatjes.

Als je geen Firefox gebruikt, maar Chrome, kun je ook op een makkelijke manier achterhalen welke afmetingen je afbeelding werkelijk hebben op je site. Rechtsklik op een foto en kies "Element inspecteren". Ga dan met je cursor op de link van de afbeelding staan en Chrome toont je de afmetingen.

Nu komt de stap waar we WooCommerce gaan vertellen dat deze de juiste afmetingen moet gebruiken. In het beheergedeelte ga je naar WooCommerce >> Instellingen >> Tabblad Catalogus. Helemaal onderaan zie je de afbeeldingopties en hier gaan we dus de correcte afmetingen invullen.

Eenmaal de juiste groottes zijn ingevuld moet je de wijzigingen opslaan. Maar dit is nog niet voldoende. Onze thumbnails (of miniaturen) moeten ook opnieuw worden aangemaakt. Enkel op deze manier zullen alle bestaande plaatjes effectief worden gewijzigd. Hiervoor hebben we een plugin nodig : Regenerate Thumbnails.

Installeren van de plugin
Het installeren van de plugin is, net zoals alle andere plugins, een fluitje van een cent.

• Download de plugin op de site van Wordpress en bewaar het zip-bestand op je computer.
• In Wordpress ga je naar Plugins >> Nieuwe plugin.
• Kies de optie Uploaden.
• Blader naar het bewuste zip-bestand en kies Nu installeren.
• Wanneer Wordpress klaar is kun je ook meteen Activeren.

Eenmaal de plugin geïnstalleerd is gaan we naar Extra >> Regenereer Thumbnails.

Na een tijdje is de klus geklaard en zien we het resultaat in onze webshop.

Klik op de bovenstaande afbeelding om het reultaat in volle glorie te kunnen bekijken.

Voor de volledigheid tonen we nog eens ons werk in 1 plaatje. Links zien we de onze afbeelding nadat we alles hebben aangepast. Rechts zien we de wazige afbeelding.

Aangepaste velden creëren in het afrekenproces

Wie het afrekenproces in WooCommerce van nader bekijkt ziet dat dit er behoorlijk logisch uitziet. Maar toch zijn er naargelang jouw situatie misschien toch aanpassingen nodig. Als jij in je webshop bvb notebook LCD-schermen verkoopt is de kans groot dat er pc-herstellers in je webwinkel terecht komen. Zij zullen zo'n scherm kopen om hun herstellingen te kunnen doorvoeren. En hiervoor zullen zij een geldige factuur wensen.

Een veld waar zij hun btw-nummer kunnen invullen is standaard niet inbegrepen in WooCommerce. Hiervoor is een handige plugin : Poor Guys Army Knife. In deze post zal ik niet alle mogelijkheden bespreken die deze fantastische plugin aankan. Maar enkel het aanmaken van extra velden in het afrekenproces.

Installeren van de plugin
Het installeren van de plugin is, net zoals alle andere plugins, een fluitje van een cent.

• Download de plugin op de site van Wordpress en bewaar het zip-bestand op je computer.
• In Wordpress ga je naar Plugins >> Nieuwe plugin.
• Kies de optie Uploaden.
• Blader naar het bewuste zip-bestand en kies Nu installeren.
• Wanneer Wordpress klaar is kun je ook meteen Activeren.

Velden creëren
De plugin kun je nu vinden in je WooCommerce -menu :

Vervolgens kies je de optie Checkout Billing Section :

In het volgende scherm zien we alle velden die er reeds aanwezig zijn. Onderaan kunnen we een nieuw veld aanmaken. In ons geval dus om een btw-nummer te kunnen toevoegen.

Eenmaal we het veld hebben ingesteld kunnen we ons nieuwe veld bijwerken. We kunnen aanduiden als we het veld verplicht willen meken; of juist niet. We kunnen het veld een naam geven. En we kunnen teven reeds een zgn. 'placeholder' invullen. De breedte van het veld kunnen we ook bepalen : Wide voor een volledige breedte, First voor de eerste helft van het scherm en Last voor de tweede helft van het scherm.

Tot slot kunnen we het veld ook verslepen met de cursor en zo een logische plaats geven tussen alle andere velden. Net onder het veld 'Bedrijfsnaam' lijkt me logisch. Vergeet niet om je werk te bewaren!
In onze webwinkel zien we het resultaat van onze aanpassingen: