Productoverzichten (WooCommerce, algemeen)
WooCommerce biedt de mogelijkheid om een productoverzicht te produceren, aka. een archive page. Helaas zijn de mogelijkheden standaard nogal beperkt, en aanpassingen zijn niet altijd gemakkelijk. Daar gaat dit artikel over.
Problemen
Hoe kan ik...
- Producten in een grid weergeven, met een flexibel aantal producten per pagina
- Grid-weergave zó aanpassen, dat afbeeldingen en andere zaken, mooi uitgelijnd zijn
- Content weergeven op een productpagina. Dit kan namelijk niet bij de standaard WooCommerce-productweegave
- Bij producten controls plaatsen om producten direct in de winkelwagen te plaatsen en daarbij het aantal te bepalen
- Bij producten excerpt-tekst weergeven, of de inhoud van een apart maatwerk-veld.
Productoverzicht - Mogelijkheden
Er zijn verschillende manieren om productweergaves naar je hand te zetten:
- WooCommerce Shop Page: De Shop Page, aka. Archive page, is de meest voor de hand liggende manier om producten te presenteren
- WooCoomerce-plugin: WooCommerce biedt een eigen betaalde plugin aan, voor meer flexibele productoverzichten
- Plugins van derden: Er bestaan diverse plugins voor meer flexibele productoverzichten. Meestal zijn dit betaalde plugins
- WPBakery Page Builder-widgets: WPBakery biedt een aantal widgets om productoverzichten te creëren
- Zelf programmeren: Ik weet alleen nog niet hoe.
WooCommerce Shop Page
De WooCommerce Shop Page, aka. Product Archive Page, is het standaard WooCommerce productoverzicht.
Voordelen
Simpel: Je hoeft alleen maar een bestaande pagina aan te merken als Shop page, en de producten worden getoond
Nadelen
- Max. 12 producten per pagina. Overige producten zijn bereikbaar via een pager
- Opmaak is nie aan te passen. Oa. is uitlijnen van producten een probleem, en worden er altijd grote afbeeldingen gebruikt
- Geen mogelijkheid voor Add to basket-functionaliteit
- Niet mogelijk om gewone content op dezelfde pagina te plaatsen.
Probleem: Content weergeven op de WooCommerce Shop Page
Als je in WordPress een pagina aanduidt als WooCommerce shop page, wordt reguliere content niet meer getoond. Hier wordt uitgelegd hoe dat kan. Hoe los je dat op?
Oplossingen
- Andere oplossing gebruiken om een productoverzicht te creëren (dus geen pagina aanmerken als WooCommerce Shop Page)
- Op een pagina met content, de shortcode voor een productoverzicht invoegen [1]
- Bestaande
archive-product.phpaanpassen. [2], [3]
Voorbeelden
- stapelbakken.nl: Er is gebruik gemaakt van een reguliere shop-pagina. Daar staat geen andere content
- bsp.dvb: Geen content op shop page
- beamers.dvb: ?
Uitlijnen van afbeeldingen
- Het lijkt erop, dat afbeeldingen worden weergegeven in een matrix van maximaal 300x300. Afbeeldingen worden horizontaal probleemloos uitgelijnd. Verticaal is dit echter wel een probleem: De verschillende producten in een grid verspringen in dat geval verticaal
- Uiteraard kan dat uitlijnprobleem met CSS verholpen worden. Een andere oplossing: Zorgen dat alle afbeeldingen even hoog zijn (bv. altijd 300 pixels).
WPBakery Page Builder-widgets
WPBakery Page Builder heeft diverse widgets voor productoverzichten.
Voordelen
- Je kunt content op dezelfde pagina plaatsen als het productoverzicht
- Je hebt iets meer controle dan in het geval van een standaard WooCommerce productoverzicht.
Nadelen (eind 2018)
- Je bent afhankelijk van WPBakery Page Builder. Ik ben niet zo'n fan van dit ding, omdat-ie nogal bloated is en een vendor lock-in creëert
- Afbeeldingen zijn niet klikbaar
- Als je er overheen beweegt, verschijnt er een knop voeg toe aan winkelmand. Je kunt echter niet doorklikken naar een productpagina → Zie hieronder.
- Het staat me bij, dat ik de nodige complicaties had om de vormgeving naar m'n hand te zetten. Onder andere verschenen knoppen tijdens hover-over over bestaande tekst of afbeeldingen heen.
Button: Add to cart → View details
Tjakka: https://theme.co/apex/forums/topic/woocommerce-stick-to-popup/
Zelf programmeren
Nadelen
- Leercurve: Het kost tijd om dit onder de knie te krijgen
Voordelen
- Doelgericht: Ook al kost het tijd om dit onder de knie te krijgen, ik weet vrij zeker dat het binnen een afzienbare tijd gaat lukken. Die zekerheid heb ik niet, wanneer ik me ga verdiepen in wat er beschikbaar is aan bestaande plugins: In mijn ervaring kan dat een gebed zonder einde worden
- Controle & autonomie: Uiteindelijk heb ik complete controle over het resultaat. Zonder afhankelijkheid van derden, zoals via betaalde plugins
- Compact: Deze oplossingen zijn compact. Geen bloat
- Veilig? In 2018 zijn een handjevol WordPress-sites van mij gehacked. Ik vermoed vanwege een page builder - Typisch geval van bloat. Door zelf oplossingen te programmeren ben ik hoogstwaarschijnlijk een stuk veiliger, omdat hacking-algorithmes zwakheden in bekende onderdelen van sites targeten.
- Onderhoudsvriendelijk: Welliswaar zijn sites met dergelijke maatwerk-codes moeilijker te onderhouden door de klant zelf, maar des te gemakkelijker door mensen met kennis van zaken
- Leerzaam: Door dit zelf te doen, leer ik WordPress beter kennen, vooral op het gebied dat mij het meest interesseert: Automatisering
- Richting framework: Als ik nu (juni 2019) een nieuw systeem zou kiezen voor webwinkels, zou ik geen CMS kiezen, maar een framework, vermoedelijk eentje die geschreven is in Python, bv. Django. Door zelf nu in WordPress te ontwikkelen, ga ik al die kant op, en wordt de overstap minder relevant.
Zie ook
Zie ook
- Product-tabelweergave (WordPress)
- Productweergave-storingen
- WooCommerce Excerpt Alot-plugin
- WooCommerce Productoverzicht - Zelf programmeren