Als het gaat om het opzetten van een online winkel, is WooCommerce de go-to- plugin . Het is belachelijk eenvoudig om een online winkel op te zetten en uw producten te verkopen zodra u klaar bent. Avada biedt uitgebreide ondersteuning en ontwerpintegratie voor WooCommerce, zodat u de winkel van uw dromen kunt creëren en er tegelijkertijd voor kunt zorgen dat deze er precies zo uitziet als het frame dat u in gedachten heeft.
Bij Avada gaat het erom u de mogelijkheid te bieden om het uiterlijk van uw website aan te passen, wat niet anders is met de WooCommerce-integratie. Met behulp van ons populaire netwerk met geavanceerde opties kunt u kiezen uit een breed scala aan aanpassingen voor een verscheidenheid aan ontwerpmogelijkheden, waaronder:
- WooCommerce heeft zijn eigen Avada Global Options Panel, los van het hoofd Avada Global Options Panel.
- Avada-pagina-opties zijn beschikbaar voor elk product.
- Met Avada Builder kunt u ontwerpen voor productpagina's maken door elementen te slepen en neer te zetten.
Om uw eCommerce-site te bouwen met Avada.
Eerst moeten we wooCommerce in Avada installeren.
- WooCommerce installeren – Stap voor stap instructies
- Een winkelpagina toewijzen aan uw website
- Uw producten maken
- Productzoomeffect creëren
- Instellingen voor productafbeeldingsgrootte aanpassen in WooCommerce.
WooCommerce installeren – Stap voor stap instructies
Ga naar Avada > Plugin - ins / Add-ons en zoek naar de WooCommerce- plugin , zoals weergegeven in de onderstaande schermafbeelding.
Stap 1 – Installeer de WooCommerce- plugin .
Stap 2 – Selecteer 'Installeren' in het vervolgkeuzemenu.
De plugin wordt automatisch geïnstalleerd en geactiveerd.
Stap 3 – Daarna moet de WooCommerce Setup Wizard worden weergegeven. Als u een van onze Woo-demo's importeert, zoals Modern Shop of Classic Shop, kunt u deze stap overslaan zonder het risico te lopen uw gegevens te verliezen. Om verder te gaan, selecteert u 'Niet nu' in het vervolgkeuzemenu. Als u geen van onze Woo-demo's importeert, gaat u verder met de volgende stap door op 'Let's Go!' te klikken. knop om het installatieproces te starten.
Stap 4 – Volg de aanwijzingen en instructies op het scherm om het proces te voltooien en voer de nodige informatie over uw winkel in. Door op de knop 'Maak uw eerste product' te klikken wanneer u klaar bent, kunt u doorgaan met het maken van uw eerste product. U kunt ook terugkeren naar uw WordPress-dashboard door op de link onder het installatievenster te klikken.
Een winkelpagina toewijzen aan uw website
Als onderdeel van het normale WooCommerce-installatieproces moet de installatiewizard worden gestart, zodat u uw winkel kunt configureren en uw winkelpagina's aan klanten kunt toewijzen. Meer informatie over de pagina's die de Setup Wizard aanmaakt vind je in dit WooCommerce document.
Als alternatief, als de Installatiewizard niet verschijnt, of als u deze om welke reden dan ook annuleert, kunt u altijd terugkeren naar de Installatiewizard door Installatiewizard te selecteren in het Help-menu op een WooCommerce-pagina, die u linksboven in de pagina kunt vinden. raam.
U kunt de winkelpagina handmatig instellen door naar het tabblad Producten in de WooCommerce-instellingen – WooCommerce > Instellingen > Producten – te gaan en de pagina te selecteren die de hoofdwinkelpagina wordt in het vervolgkeuzemenu. WooCommerce zal dan uw producten op deze pagina tonen als resultaat van uw actie.
De overige pagina's kunnen worden geconfigureerd in het tabblad Geavanceerd, te vinden op WooCommerce > Instellingen > Geavanceerd .
Uw producten maken
Stap 1 – Navigeer in uw WordPress Admin-zijbalk naar het tabblad Producten > Product toevoegen.
Stap 2 – Voer bovenaan de pagina de naam van uw product in.
Stap 3 – Vul het veld voor de berichtinhoud in met de tekst uit de productbeschrijving. Alle productinformatie wordt in dit gedeelte weergegeven.
Stap 4 – Vul het veld ' Productgegevens ' in met alle productinformatie. Prijs, SKU en verzending zijn bijvoorbeeld allemaal mogelijke amp .
Stap 5 – Typ in het vak ' Korte productbeschrijving ' een beknopte beschrijving van uw product die naast uw hoofdafbeeldingen wordt weergegeven.
Stap 6 hoofdafbeelding moet onder het vak ' Productafbeelding ' aan de rechterkant van de pagina worden geplaatst; Dit moet voor elk product worden ingevuld.
Stap 7 –Voeg meer afbeeldingen toe aan het vak ' Productgalerij ' als u een galerij met afbeeldingen wilt gebruiken in plaats van een enkele afbeelding .
Stap 8 – Voer in het vak ' Productcategorieën categorieën in die van toepassing zijn op uw producten. Vul vervolgens de lege plekken in met de juiste tags voor uw product in het vak ' Producttags ' .
Stap 9 – Nadat u alle benodigde informatie heeft ingevoerd, klikt u op de knop ' Publiceren ' en het artikel verschijnt op uw hoofdpagina in de winkel.
Productzoomeffect creëren
Als u Avada-lay-outs gebruikt, moet u ervoor zorgen dat de WooCommerce Product Images Zoom-optie is ingeschakeld in Avada > Opties > WooCommerce > Algemeen WooCommerce > WooCommerce Product Images Zoom-optie , of in het Woo Product Images Element General-tabblad > Productafbeeldingen Zoom in als u WooCommerce-lay-outs gebruikt.
Breedte van WooCommerce-productafbeeldingen - Uw belangrijkste afbeeldingsbreedte (zie onderstaande instelling) en de werkelijke grootte van de geüploade afbeelding moeten beide groter zijn dan de instelling Avada > Opties > WooCommerce > Algemeen WooCommerce > WooCommerce Productafbeeldingen Breedte of de Productafbeeldingen Max Breedte-instelling in het element Woo Productafbeeldingen. De breedte van de containerkolom voor een enkele productgalerij wordt bepaald door de instellingen die u kiest. Zodra je de nodige aanpassingen hebt gemaakt, ben je klaar om de breedte van je WooCommerce-hoofdafbeelding in te stellen.
WordPress Main Image Width – De WooCommerce Main Image Width-instelling is te vinden in de Customizer van uw WordPress-website. Navigeer vanuit het WordPress-dashboard naar Uiterlijk> Aanpassen> WooCommerce> Productafbeeldingen , waar u de instelling Hoofdafbeeldingsbreedte vindt; Dit bepaalt de werkelijke grootte van de afbeelding die in de galerij wordt weergegeven.
Hoe gedetailleerder uw zoomeffect, hoe groter de afbeeldingsgrootte die u voor uw afbeelding hebt ingesteld. Ter verduidelijking, als de afbeeldingsgrootte in de WooCommerce-instellingen overeenkomt met de afbeeldingsbreedte in de algemene opties van Avada, is er niet gezoomd wanneer de muis over de afbeelding op de pagina beweegt. Bovendien moet de grootte van de daadwerkelijke afbeelding die u uploadt gelijk zijn aan of groter zijn dan de instelling voor de hoofdafbeeldingsbreedte in het ontwerp van uw website.
Zorg ervoor dat u uw miniaturen opnieuw genereert nadat u de WooCommerce-afbeeldingsformaten hebt gewijzigd; Hiermee worden uw nieuwe afbeeldingsformaten toegepast op afbeeldingen die al naar uw website zijn geüpload. U kunt hiervoor de plugin in Regenerate Thumbnails gebruiken.
Instellingen voor productafbeeldingsgrootte aanpassen in WooCommerce.
WooCommerce bevat opties voor het aanpassen van de grootte van productafbeeldingen in de secties Catalogus en Single Product-afbeeldingen van de winkel. Daarnaast zijn er specifieke Avada-instellingen die werken in combinatie met de afbeeldingsformaten die door uw WooCommerce-winkel worden gebruikt. Bij het configureren van deze instellingen voor afbeeldingsgrootte is het belangrijk om te onthouden dat ook rekening moet worden gehouden met de algemene instellingen van Avada. We zullen elk van deze opties later in meer detail bespreken.
Stel dat de afbeeldingen die u uploadt voor uw producten bij de bron kleiner zijn dan de afbeeldingsformaten die zijn opgegeven in uw WooCommerce-instellingen. In dat geval kunt u enkele visuele lay-outverschillen opmerken aan de voorkant van uw winkelpagina's; Dit is op geen enkele manier een bug. Het is simpelweg omdat je afbeeldingen te klein waren voor de WooCommerce-instellingen om ze te beïnvloeden. U kunt deze instellingen zien als de maximale breedte en hoogte voor uw afbeeldingen in termen van afbeeldingsafmetingen. Alles dat onder de opgegeven limiet valt, wordt niet vergroot of verkleind.
Zorg er bij het configureren van uw winkel voor dat zowel de WooCommerce-instellingen voor de afbeeldingsgrootte als de werkelijke grootte van uw afbeeldingen in aanmerking worden genomen. Samenvattend moeten uw afbeeldingen dezelfde grootte hebben als of groter zijn dan de instellingen voor de afbeeldingsgrootte in uw WooCommerce-winkel.
Voor eventuele wijzigingen in uw instellingen voor afbeeldingsgrootte moet u uw miniaturen opnieuw genereren om ze van kracht te laten worden op afbeeldingen die al naar uw site zijn geüpload. Daarom wordt het gebruik van de plugin Regenerate Thumbnails ten zeerste aanbevolen. Bovendien kunnen afbeeldingsformaten worden aangepast met behulp van de onderstaande stappen:
Stap 1 – Navigeer in uw beheerderszijbalk naar het tabblad ' Vormgeving ' en vervolgens naar het tabblad ' Aanpassen ' om uw site aan te passen.
Stap 2 – Navigeer naar het tabblad ' WooCommerce ' bovenaan de pagina.
Stap 3 – De instelling Afbeeldingen voor enkele productafbeeldingen vindt u onder het tabblad ' Productafbeeldingen ' .
Stap 4 - Wanneer u afbeeldingen uploadt naar uw afzonderlijke productpagina's, selecteert u de hoofdoptie voor afbeeldingsbreedte. Miniatuurbreedte is de breedte van de miniaturen voor uw producten in de catalogus. Vul de lege plekken in met de gewenste breedtewaarde.
Stap 5 plugin Regenerate Thumbnails gebruiken , die u kunt vinden in het Plugin ins. Installeer eerst de plugin en navigeer vervolgens naar het WP Admin > Tools , waar u ervoor kunt kiezen om uw afbeeldingsminiaturen opnieuw te genereren en de nieuwe afbeeldingsformaten te maken.
