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, waardoor 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 het uiterlijk van uw website aan te passen, wat bij de WooCommerce-integratie niet anders is. 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.
- Voor elk product zijn Avada-paginaopties beschikbaar.
- Met Avada Builder kunt u productpagina-ontwerpen maken door elementen te slepen en neer te zetten.
Om uw e-commercesite te bouwen met Avada.
Eerst moeten we wooCommerce in Avada installeren.
- WooCommerce installeren – Stapsgewijze instructies
- Hoe u een winkelpagina aan uw website kunt toewijzen
- Uw producten maken
- Productzoomeffect creëren
- Instellingen voor productafbeeldingsgrootte aanpassen in WooCommerce.
WooCommerce installeren – Stapsgewijze 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 zou de WooCommerce Setup Wizard moeten verschijnen. Als je een van onze Woo-demo's importeert, zoals Modern Shop of Classic Shop, kun je deze stap overslaan zonder het risico dat je gegevens verloren gaan. Om verder te gaan, selecteert u 'Nu niet' in het vervolgkeuzemenu. Als je geen van onze Woo-demo's importeert, ga dan 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 de benodigde informatie over uw winkel in te voeren. Door op de knop 'Maak uw eerste product aan' 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.
Hoe u een winkelpagina aan uw website kunt toewijzen
Als onderdeel van het normale WooCommerce-installatieproces moet de Installatiewizard worden gestart, waarmee u uw winkel kunt configureren en uw winkelpagina's aan klanten kunt toewijzen. Meer informatie over de pagina's die de Installatiewizard maakt, vindt u 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 elke WooCommerce-pagina, die u links bovenaan kunt vinden. raam.
Je kunt de winkelpagina handmatig instellen door naar het tabblad Producten te gaan in de WooCommerce-instellingen – WooCommerce > Instellingen > Producten – en de pagina te selecteren die de hoofdwinkelpagina zal zijn in het vervolgkeuzemenu. WooCommerce zal dan als gevolg van jouw actie jouw producten op deze pagina weergeven.
De overige pagina's kunnen worden geconfigureerd op het tabblad Geavanceerd, te vinden op WooCommerce > Instellingen > Geavanceerd .
Uw producten maken
Stap 1 – Navigeer in uw WordPress-beheerderszijbalk naar het tabblad Producten > Product toevoegen.
Stap 2 – Voer bovenaan de pagina de naam van uw product in.
Stap 3 – Vul het berichtinhoudsveld in met de tekst uit de productbeschrijving. Alle productinformatie wordt in deze sectie weergegeven.
Stap 4 – Vul het vak 'Productgegevens' in met alle productinformatie . Prijs, SKU en verzending zijn bijvoorbeeld amp
Stap 5 – Typ in het vak ' Korte productbeschrijving ' een beknopte beschrijving van uw product die naast uw hoofdafbeeldingen wordt weergegeven.
Stap 6 – De belangrijkste afbeelding 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 één enkele afbeelding.
Stap 8 vak ' Productcategorieën ' de categorieën in die op uw producten van toepassing zijn. Vul vervolgens de lege velden in met de juiste tags voor uw product in het vak ' Producttags ' .
Stap 9 – Zodra u alle benodigde informatie heeft ingevoerd, klikt u op de knop ' Publiceren '. Het artikel verschijnt dan op uw hoofdpagina.
Productzoomeffect creëren
Als je Avada Layouts gebruikt, moet je ervoor zorgen dat de WooCommerce Product Images Zoom-optie is ingeschakeld in Avada > Opties > WooCommerce > Algemeen WooCommerce > WooCommerce Product Images Zoom-optie , of op het Woo Product Images Element General-tabblad > Productafbeeldingen Zoom als u WooCommerce Layouts gebruikt.
Breedte van WooCommerce-productafbeeldingen – De breedte van uw hoofdafbeelding (zie onderstaande instelling) en de werkelijke grootte van de geüploade afbeelding moeten beide groter zijn dan de instelling Avada > Opties > WooCommerce > Algemeen WooCommerce > Breedte van WooCommerce-productafbeeldingen of de instelling Maximale breedte van productafbeeldingen in het Woo-productafbeeldingen-element. De breedte van de containerkolom voor een enkele productgalerij wordt bepaald door de instellingen die u kiest. Zodra je de nodige aanpassingen hebt gedaan, ben je klaar om de breedte van je WooCommerce-hoofdafbeelding in te stellen.
Breedte hoofdafbeelding van WordPress – De instelling voor de breedte van de hoofdafbeelding van WooCommerce is te vinden in de aanpasser 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 zal zijn, 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, zal er geen zoom zichtbaar zijn wanneer de muis over de afbeelding op de pagina beweegt. Bovendien moet de grootte van de daadwerkelijke afbeelding die u uploadt hetzelfde zijn als of groter zijn dan de instelling voor de breedte van de hoofdafbeelding in het ontwerp van uw website.
Zorg ervoor dat u uw thumbnails opnieuw genereert nadat u de WooCommerce-afbeeldingsgroottes heeft gewijzigd; Hierdoor worden uw nieuwe afbeeldingsformaten toegepast op alle afbeeldingen die al naar uw website zijn geüpload. U kunt hiervoor de plugin 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 Enkele productafbeeldingen 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 de afbeeldingsgrootte is het belangrijk om te onthouden dat ook rekening moet worden gehouden met de algemene Avada-opties. 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 merkt u mogelijk enkele visuele lay-outverschillen op de voorkant van uw winkelpagina's; Dit is op geen enkele manier een bug. Het komt simpelweg omdat uw afbeeldingen te klein waren om door de WooCommerce-instellingen te worden beïnvloed. U kunt deze instellingen beschouwen als de maximale breedte en hoogte voor uw afbeeldingen in termen van afbeeldingsafmetingen. Alles wat 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 even groot of groter zijn dan de instellingen voor het afbeeldingsformaat in uw WooCommerce-winkel.
Voor eventuele wijzigingen in de instellingen voor de afbeeldingsgrootte moet u uw miniaturen opnieuw genereren, zodat ze van kracht 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 de afbeeldingsformaten worden aangepast met behulp van de onderstaande stappen:
Stap 1 – Navigeer in uw beheerderszijbalk naar het tabblad ' Uiterlijk ' en vervolgens naar het tabblad ' Aanpassen ' om te beginnen met het aanpassen van uw site.
Stap 2 – Navigeer naar het tabblad ' WooCommerce ' bovenaan de pagina.
Stap 3 – De instelling Afbeeldingen voor afzonderlijke productafbeeldingen vindt u onder het tabblad 'Productafbeeldingen' van het configuratievenster .
Stap 4 – Wanneer u afbeeldingen uploadt naar uw afzonderlijke productpagina's, selecteert u de hoofdoptie voor de afbeeldingsbreedte. De miniatuurbreedte is de breedte van de miniaturen voor uw producten in de catalogus. Vul de lege velden in met de gewenste breedtewaarde.
Stap 5 –Om miniaturen opnieuw te genereren nadat u de afbeeldingsgroottes hebt gewijzigd en opgeslagen, moet u de plugin , die u kunt vinden in de sectie Plugin 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.
