Share
WooCommerce is het meest populaire en "meest aanpasbare eCommerce-platform voor het bouwen van uw online bedrijf." U kunt WooCommerce gratis downloaden, maar u begint echt zijn kracht te zien wanneer u WordPress WooCommerce-plug-ins en -thema's gaat gebruiken.
Maar moet je echt een WooCommerce-thema gebruiken?
Hoewel het niet verplicht is, raad ik het ten zeerste aan.
Niet alleen zijn WooCommerce-thema's eCommerce-gericht door ontwerp, het hele thema is gecentreerd rond WooCommerce-stijlen. De CSS die WooCommerce gebruikt om te definiëren hoe producten worden weergegeven, wordt vervolgens gebruikt door het WordPress WooCommerce-thema om alles echt samen te trekken - wat zorgt voor een aantal van de meest prachtig ontworpen e-commerce storefronts.
Om nog maar te zwijgen van het feit dat het installeren en opzetten van een nieuw WordPress WooCommerce-thema niet moeilijker is dan het opzetten van een ander WordPress-thema.
Ik zal je laten zien hoe je het moet doen.
Als je WooCommerce al hebt geïnstalleerd, is dat geweldig! Zo niet, dan raad ik de Beginner's Guide van Rachel McCollin aan om WooCommerce te gebruiken. Hiermee maakt u kennis met WooCommerce en neemt u alle stappen door die nodig zijn om uw online storefront in de lucht te krijgen.
Laten we nu beginnen met het installeren en instellen van een nieuw WordPress WooCommerce-thema.
Als u uw producten al aan WooCommerce hebt toegevoegd, raad ik aan deze stap over te slaan en te beginnen met stap 2.
Het installeren van dummy-gegevens voegt fictieve producten toe aan uw etalage om u te helpen uw winkel met producten te visualiseren. Nadat je de installatie hebt voltooid en je nieuwe WordPress WooCommerce-thema hebt ingesteld, wil je dit verwijderen allemaal de dummygegevens voordat u uw producten toevoegt. Anders riskeert u per ongeluk uw eigen productgegevens te verwijderen.
De dummygegevens worden meegeleverd met uw WooCommerce-plug-in. Als u WooCommerce binnen de WordPress Admin hebt geïnstalleerd, kunt u doorgaan en de plug-in van de WordPress Plugin Directory downloaden naar uw computer. Dit zal gemakkelijker zijn dan inloggen op uw FTP, naar uw plugin-map gaan en daar de dummy-gegevens downloaden.
Zodra uw download is voltooid, unziet u het bestand zodat u klaar bent om uw dummy-data.xml-bestand te importeren.
Ga naar je Hulpmiddelen en klik op Importeren:
Laat de "WooCommerce Tax Rates (CSV)" u niet in verwarring brengen. Dit kan later worden gedaan als je wilt. Voor de WooCommerce Dummy Data, wil je kiezen WordPress.
Meer dan waarschijnlijk is de plug-in WordPress Importer niet geïnstalleerd, dus ga je gang en Installeer nu.
Na installatie, ga je gang en Activeer Plugin & Run Importer.
Weet je nog waar je de WooCommerce-plug-in hebt gedownload en uitgepakt? Super goed! Nu moet je klikken Kies bestand en maak er je weg naar.
Uw dummy-gegevens moeten in uw uitgepakte map staan: (woocommerce.version.number)> woocommerce> dummy-data.
Open de dummy-gegevensmap en selecteer dummy-data.xml, en je bent klaar om het bestand te uploaden en te importeren.
Dit is het laatste dat u moet doen voordat u alle dummygegevens hebt geïmporteerd.
Een deel hiervan is persoonlijke voorkeur, maar hier is wat ik doe (screenshot hieronder):
Importeer de standaard auteur "wooteam" in plaats van een nieuwe auteur te maken of een reeds bestaande auteur te gebruiken. Op deze manier weet u welke inhoud is geïmporteerd / gemaakt in dit proces op basis van de auteursnaam (ik raad aan om de auteur te verwijderen wanneer u de dummygegevens verwijdert nadat u klaar bent met het installeren en instellen van uw nieuwe WordPress WooCommerce-thema).
Ik beveel je ook aan Download en importeer bijlagen zodat je afbeeldingen hebt gekoppeld aan elk product (nogmaals, je zult willen zorgen dat het medium wordt verwijderd als je klaar bent met de dummygegevens).
Nadat u deze selecties heeft gemaakt, dient u:
Ga naar yourwebsite.com/shop/ en je zou een volledig geïmporteerde testwinkel moeten zien:
Ja! Je hebt het gedaan!
Het is niet erg goed ontworpen, toch? Maar goed dat we een fantastisch WordPress WooCommerce-thema zoals Savoy gaan installeren.
(OPMERKING: als u klaar bent met het installeren en instellen van uw thema, vergeet dan niet om de producten en afbeeldingen van de dummy gegevensimport te verwijderen voor je begint met het toevoegen van je eigen producten.)
Laten we nu kijken naar hoe het WooCommerce-thema te installeren. Als je je WordPress Commerce-thema nog niet hebt gedownload, ga je gang en download het naar je computer (zorg ervoor dat je weet waar je het downloadt, zodat je het kunt openen).
Er zijn twee verschillende manieren waarop u uw thema kunt installeren:
Als u vertrouwd bent met het gebruik van FTP, maak dan een verbinding met uw server en ga naar de wp-content> thema's directory. Dit is waar je je thema naartoe wilt sturen. Zorg er echter voor dat u uw thema verzendt voordat u uw uitgepakte map naar uw server verzendt. Laten we een kijkje nemen door ons voorbeeld WordPress-thema van ThemeForest te gebruiken.
Na het uitpakken van uw download ziet u een aantal verschillende mappen:
Niet elk thema dat u downloadt, zal op deze manier worden verpakt. Soms is de gecomprimeerde map die u download de eigenlijke themamap. Het is altijd een goed idee om dubbel te controleren, omdat dit van plaats tot plaats varieert.
The Savoy - Minimalist AJAX WooCommerce Theme bevat een aantal extra dingen zoals documentatie, assets, etc. Als je in de map Themabestanden voor Savoy kijkt, vind je je thema (savoy.zip).
Als je met FTP installeert, ga je gang en upload je de uitgepakte themamap (bijvoorbeeld: "savoy") in de themamap. Als u niet zeker weet of u FTP gebruikt of liever installeert vanuit de WordPress Admin, is dat prima. Ik gebruik ook liever de WordPress Admin.
Het installeren van een WordPress-thema vanuit de Admin vereist dat de themamap wordt ingepakt (themefolder.zip). Zoals we eerder hebben besproken, wilt u zeker weten dat u met de. Werkt werkelijk themamap en niet de map waarin uw thema is ingepakt.
Van de WordPress Admin, onder Verschijning, Klik Thema's:
Voeg een nieuw thema toe:
Upload thema:
Weet je nog waar je thema-zipbestand zich bevindt??
(Ons voorbeeldthema is getiteld: savoy.zip)
Klik Kies bestand en maak er je weg naar:
Eenmaal geïnstalleerd, kunt u bezoeken Uiterlijk> Thema's in uw WordPress Admin om te zien of het is geïnstalleerd of klik om het meteen te activeren.
Zoals u kunt zien (hieronder), is het thema Savoy met succes geïnstalleerd, dus de muisaanwijzer en Activeren:
Nu dat uw WordPress WooCommerce-thema succesvol is geïnstalleerd en geactiveerd, laten we het instellen.
Niet elk thema is precies hetzelfde aangepast. Hoe een thema wordt ontworpen en ontwikkeld, is een grote factor, dus er kunnen enkele verschillen zijn tussen deze tutorial en wat u te wachten staat. In het algemeen echter, zou dit u moeten helpen om uw WordPress WooCommerce-thema in te stellen, ongeacht welk WooCommerce-thema u gebruikt van ThemeForest of ergens anders.
Na het installeren en activeren van het thema Savoy, wordt u op de hoogte gebracht van aanbevolen plug-ins:
Soms brengt uw thema u op de hoogte van aanbevolen plug-ins, terwijl andere aanbevelingen in hun documentatie opnemen. Er kunnen thema-ontwerpfuncties zijn, zoals optionele schuifregelaars, die niet zijn gecodeerd in het thema, maar waarin wordt voorzien.
Klik op Begin met het installeren van plug-ins in het Savoy-thema om de lijst met aanbevolen plug-ins te bekijken:
Nogmaals, dit zal variëren van thema tot thema, maar in dit geval, kunt u dit al dan niet willen installeren.
Terwijl Savoy bijvoorbeeld contactformulier 7 aanbeveelt en er styling voor gebruikt, wilt u deze plug-in misschien niet gebruiken voor uw contactformulier. U wilt misschien iets als Gravity Forms of Ninja Forms gebruiken.
Een plug-in zoals Thumbnails regenereren is een uitstekende plug-in om te gebruiken voor diegenen die een bestaande winkel hebben opgezet en waarvan hun afbeeldingen zijn geconfigureerd voor een vorig thema. Deze plug-in zal je WordPress mediabibliotheek doorlopen en het formaat van al je afbeeldingen aanpassen om te werken met je nieuwe thema. U kunt dit al dan niet doen met de dummy-gegevens en misschien wilt u deze plug-in helemaal overslaan (maar ik raad het toch aan, zodat alle media correct worden gedimensioneerd voor testdoeleinden).
Een plug-in zoals de Envato Toolkit is echter erg belangrijk voor thema's die worden aangeschaft via ThemeForest, zodat u op de hoogte blijft van thema-updates.
Ik zou aanraden om alle aanbevolen plug-ins te installeren wanneer je aan de slag gaat. Je kunt een plug-in later altijd verwijderen als je hem niet nodig hebt, terwijl als je geen plug-in installeert die je nodig hebt, je gefrustreerd kunt raken omdat het thema niet "werkt" of iets doet dat je leuk vond op de demo.
Zodra u alle, sommige of geen van de aanbevolen en / of vereiste plug-ins hebt geïnstalleerd, vergeet dan niet om ze te activeren:
Als u een thema gebruikt dat is aangeschaft bij ThemeForest, zoals ons voorbeeldthema Savoy, vergeet dan niet om uw Marketplace-gebruikersnaam en geheime API-sleutel in de Envato WordPress Toolkit in te voeren om ervoor te zorgen dat de juiste thema-updates beschikbaar zijn.
Dit is het deel van het installeren en instellen van uw WordPress WooCommerce-thema wanneer het echt leuk wordt en u begint uw website tot leven te zien komen.
U kunt de WordPress Customizer openen vanuit het menu in WordPress: Uiterlijk> Aanpassen. Of ga naar de pagina 'Thema's' hieronder Uiterlijk> Thema's en klik vervolgens op de Aanpassen knop:
Welkom bij de WordPress Customizer:
Hier zullen we een paar tweaks maken voordat we dieper ingaan op de configuratie.
Het eerste wat je zult zien is Site-identiteit. Hier kunt u uw Sitetitel en Tagline wijzigen.
Soms kun je hier ook een aangepaste headerafbeelding en / of een Sitepictogram toevoegen (dit varieert van thema tot thema).
Configureer vervolgens uw menu's:
Als dit een nieuwe WooCommerce-instelling is of als u nog geen pagina's heeft gemaakt, is er misschien nog niet veel dat u kunt 'aanpassen'. Met WooCommerce geïnstalleerd, heeft het echter automatisch een aantal pagina's toegevoegd waarvan je zeker weet dat je deze meteen aan je menu wilt toevoegen.
U kunt eenvoudig een nieuw menu toevoegen en maken:
Nadat u een menu (of meerdere) hebt toegevoegd, kunt u selecteren waar u het menu wilt laten verschijnen, evenals de verschillende menu-items (zoals aangepaste links, berichten, pagina's, producten, etc.).
Dit geeft u veel flexibiliteit met hoe u uw WooCommerce-site wilt laten functioneren. Wees niet bang om ermee te spelen of later te veranderen.
Voordat we de WordPress Customizer verlaten, wil je WordPress vertellen om van de voorpagina je winkel te maken:
Mark Voorpagina wordt weergegeven zoals Een statische pagina en selecteer de Voorpagina om de jouwe te zijn Winkel pagina. De winkelpagina werd automatisch gemaakt toen u de WooCommerce-plug-in installeerde.
Wat betreft de berichten pagina, dit is afhankelijk van waar u een blog wilt op uw WooCommerce-site. Als dat zo is, moet u een blogpagina maken en die op deze pagina van de WordPress Customizer of in de WordPress Admin-instellingen> Lezen.
Met een aantal basisconfiguraties kunt u zien hoe goed uw online winkel eruit kan zien met behulp van een WordPress WooCommerce-thema:
De afzonderlijke productpagina's zien er geweldig uit:
Het bevat zelfs gerelateerde producten:
The Savoy - Minimalist AJAX WooCommerce Theme stelt u in staat om eenvoudig vele elementen binnen uw site af te stemmen en kunt gaan ver achter alles wat ik in deze tutorial behandeld heb (lees zeker de documentatie van je thema om specifiek over je thema te leren). Ik heb alleen wijzigingen in de WordPress Customizer laten zien en kan meestal worden gemaakt op vrijwel elk thema dat u misschien gebruikt.
U kunt duidelijk zien hoe eenvoudig deze eerste eerste stappen bij het configureren van uw nieuwe WordPress WooCommerce-thema kunnen zijn en hoe goed het eruit ziet, simpelweg door een WordPress-thema te gebruiken dat specifiek is ontworpen voor WooCommerce..
Er zijn veel nuttige WordPress WooCommerce-plug-ins beschikbaar op CodeCanyon en enkele prachtig ontworpen en effectieve WordPress WooCommerce-thema's op ThemeForest.
Kijken naar enkele van de bestverkopende ThemeForest WooCommerce-thema's is misschien een goede plek om te beginnen (Savoy is nog steeds mijn favoriet). Ik weet zeker dat je iets zult vinden dat bij je eCommerce-winkel past. Of blader door onze aanbevolen showcase om precies de juiste te vinden voor uw winkel:
Wat gebruikt u WooCommerce om te verkopen?
Accentsconagua