WooCommerce Gallery Images instellen
Heb je onze plugin WooCommerce Attribute Gallery Images goed geïnstalleerd, dan kunnen we hem instellen. Open het beheerpaneel onder WooCommerce > Gallery Images. Zie je dat menu niet, controleer dan of onze plugin weLaunch Framework is geïnstalleerd. Die is gratis.
Algemene plugininstellingen
In de algemene instellingen van de plugin zet je hem aan of uit. Het belangrijkste is dat de containerselectors 100% kloppen. Standaard kun je gebruiken:
- Selector van de afbeeldingscontainer
De selector van de hoofdafbeelding (CSS-klasse of id). Voorbeeld: .woocommerce-product-gallery__wrapper (Flatsome) OF .woocommerce-product-gallery - Selector van de galerijcontainer
De selector van de galerijafbeeldingen (CSS-klasse of id). Voorbeeld: .product-thumbnails (Flatsome) of .woocommerce-product-gallery
Werkt geen van de opties hierboven, dan moet je de omliggende container in je thema zelf zoeken.
- Open een productpagina op je site.
- Klik met rechts op de productafbeelding en kies ‘Inspecteren’
- Je ziet een bovenliggende div waarvan je de klasseselector kunt gebruiken
- Herhaal dat voor de galerij ALLEEN als die anders is. Is de selector hetzelfde, zet hem dan ook in het galerijveld.
Daarnaast kun je
- Standaardgalerij van WooCommerce vervangen
Standaard wijzigt onze plugin de galerij alleen als een variant is gekozen. Schakel dit in om altijd onze galerijfuncties te gebruiken. - Variantafbeeldingen in de galerij van het variabele product tonen
Toont alle galerijafbeeldingen van varianten in de standaardgalerij van het variabele product. - Afbeeldingen van het variabele product blijven tonen
Naast de variantafbeeldingen ook de galerijafbeeldingen van het variabele product tonen. - Variantafbeeldingen in categorieën tonen
Toont galerijafbeeldingen ook in overzichten. Daarvoor heb je onze plugin Single Variations nodig en moet je thema een tweede afbeelding in overzichten ondersteunen (bijv. Flatsome).
Opties voor variantafbeeldingen en miniaturen
De variantafbeelding en de miniaturen van de galerij hebben elk volledig eigen opties. Standaard heeft het hoofdproduct bijvoorbeeld 1 kolom en de miniaturen 4, maar je kunt dat ook naar 6 kolommen zetten.
- Kolommen
- Marge rechts
- Celuitlijning
Uitlijning van de cellen - Volledig scherm
Schakelt volledig scherm voor de carrousel in, met een knop om het te openen en te sluiten. Met ESC verlaat je het volledige scherm. - Toegankelijkheid
Schakelt toetsenbordnavigatie met de pijltjestoetsen links en rechts in - Adaptieve hoogte
Past de hoogte van de carrousel aan de gekozen slide aan - Automatisch afspelen
gaat automatisch naar de volgende cel - Contain
Houdt cellen binnen de container, zodat er aan het begin of eind niet te ver wordt gescrold; heeft geen effect als Wrap Around aan staat - Vrij scrollen
Inhoud kan vrij worden gescrold en geveegd zonder cellen uit te lijnen
- Lazy load
Schakelt het uitgesteld laden van afbeeldingen in - Positie in procenten
stelt de positie in procenten in plaats van pixels in - Knoppen vorige / volgende
Maakt knoppen om naar de vorige en volgende cel te gaan - Paginastippen
Maakt en toont paginastippen - Formaat aanpassen
Reageert op het wijzigen van het venster en past grootte en posities aan - Rechts naar links
Schakelt de lay-out van rechts naar links in - Galerijgrootte instellen
Stelt de hoogte van de galerij in; schakel uit als de galerij al een hoogte via CSS heeft - Watch CSS
Volgt de inhoud van :after van het element - Wrap Around
Gaat na de laatste cel terug naar de eerste, voor oneindig scrollen
Styling
Je kunt een paar stijlen aanpassen zodat de galerij beter bij je website past: de kleur van het laadicoon, de randkleur van miniaturen of een nep-laadtijd.
Meer afbeeldingen aan varianten toevoegen
Met onze plugin voeg je heel eenvoudig extra detailafbeeldingen aan varianten toe. Open een variabel product en scrol naar de varianten. Open je één variant, dan zie je onderaan dat je meer afbeeldingen kunt toevoegen. Sleep ze om te sorteren of beweeg erover om te verwijderen. Nieuwe afbeeldingen komen uit je standaard WordPress-mediabibliotheek.