Beoordeeld door U schakelt uw winkel over naar Blocksy, opent de winkelpagina en de productkaarten zien er goed uit. Dan probeert u een andere plaatsing van de verlanglijstknop. Met de optie linksboven kan de knop boven de SALE-badge komen te staan. Op productpagina's neemt de inline-optie een eigen rij in beslag onder Toevoegen aan winkelwagen.
Niets daarvan is precies kapot. Het zijn twee goed gebouwde tools die verschillende layout-keuzes maken, en de hiaten komen naar voren in de details. Die details zijn wat een shopper opmerkt wanneer ze beslissen of ze iets voor later willen opslaan.
Daarom wordt de gratis SaveTo Wishlist Lite plugin nu geleverd met een speciale Blocksy-verlanglijst-integratie. Hieronder laat ik u zien wat het verandert en welke plaatsingen het beste bij Blocksy passen. Ik laat u ook zien hoe u het kunt controleren.
Spring naar:
- Waarom verlanglijstknopjes misplaatst kunnen lijken op Blocksy
- Wat de SaveTo Wishlist Blocksy-integratie doet
- Wat u nodig heeft voordat u begint
- Hoe u uw verlanglijstknop-plaatsingen op Blocksy kiest
- Wanneer u Rechtsboven kiest in plaats van Links Boven
- Hoe u kunt controleren of de Blocksy-integratie werkt
- De grenzen die de moeite waard zijn om te weten
- Veelgestelde Vragen
- Klaar om uw Blocksy-verlanglijst in te stellen?
Waarom verlanglijstknopjes misplaatst kunnen lijken op Blocksy
Blocksy behoudt de eigen productmarkup van WooCommerce, maar legt deze uit met zijn eigen instellingen. Zo geeft Blocksy u zoveel controle over uw winkel-layout. Een plugin-knop die in die layout wordt geplaatst, kent de regels van Blocksy echter niet automatisch.
Onze ontwikkelaars hebben vier specifieke plekken gemeten waar dat naar voren kwam:
- Kaartuitlijning: Blocksy lijnt de inhoud van de kaart uit op basis van zijn eigen instelling voor Inhoudsuitlijning. De verlanglijstknop werd echter gecentreerd, dus op links uitgelijnde kaarten was het het enige dat niet in lijn was.
- De badgehoek: Blocksy plaatst zijn Sale- en niet-op-voorraad-badges in de linkerbovenhoek van de kaart. Een daar geplaatste wishlist-knop zat bovenop de badge en verborg deze.
- De productgalerij: Op productpagina's kon de plaatsing van de afbeelding linksboven in de hoek van de pagina belanden, weg van de foto.
- De winkelwagenrij: Blocksy rekt extra items in die rij uit tot volledige breedte. Dus een "inline" wishlist-knop kwam op een eigen rij te staan.
Blocksy is een populaire keuze, dus deze details bereiken veel winkels. Volgens de WordPress.org-vermelding heeft Blocksy meer dan 300.000 actieve installaties en een gemiddelde van 5 sterren over 873 beoordelingen. Het is gemaakt door CreativeThemes en het wordt genoemd in overzichten zoals de gids voor WooCommerce-thema's van Store Owner Tips.
Het goed krijgen van de knop is belangrijk omdat bewaren een echte gewoonte is. Volgens het productpagina-onderzoek van Baymard Institute vertrouwt 21% van de 1.193 respondenten op "Opslaan"-functies. Toch maken 89% van de sites die Baymard heeft geanalyseerd "Opslaan"-functies niet gemakkelijk toegankelijk en bruikbaar. Een knop die misplaatst lijkt, helpt niet en ondermijnt de conversiewaarde van een wishlist.
Wat de SaveTo Wishlist Blocksy-integratie doet
De integratie is één extra stylesheet. SaveTo Wishlist Lite 1.1.6 laadt deze automatisch wanneer Blocksy, of een Blocksy-childtheme, uw actieve thema is. Er is niets om in te schakelen.
| Plaatsing | Zonder de integratie | Met de integratie |
|---|---|---|
| Winkel-, titel- en winkelwagenplaatsingen | Knop gecentreerd, zelfs op links uitgelijnde kaarten | Volgt uw Blocksy-kaartuitlijning: links, midden of rechts |
| Winkel, Links Boven de Productafbeelding | Bedekt de Sale- of niet-op-voorraad-badge | Verplaatst naar beneden om onder de badge te zitten |
| Product, Links Boven de Productafbeelding | Kan buiten de productgalerij vallen | Zit over de galerij, onder elke badge |
| Product, Inline met de winkelwagenknop | Neemt een eigen volledige rij in beslag | Deelt de rij met de winkelwagenknop |
Het stylesheet past alleen de positie, afstand en uitlijning aan. Uw knopkleuren, -grootte en -stijl blijven exact zoals u ze in SaveTo Wishlist hebt ingesteld. Het werkt ook met elke Frontend CSS Loading-modus. Winkels die minimale of geen plugin-styling laden, krijgen dezelfde oplossingen.
Onze Woostify-integratie werkt op dezelfde manier: één thema-specifiek stylesheet, automatisch geladen.
Wat de integratie niet doet
De reikwijdte is bewust klein, wat ook het risico laag houdt.
- Geen instellingen: Er is geen Blocksy-pagina, schakelaar of optie in SaveTo Wishlist.
- Geen extra JavaScript: Het is alleen CSS, dus het voegt geen scripts toe. Onze snelheidstest laat zien wat de plugin zelf toevoegt aan een productpagina.
- Geen nieuw ontwerp: Het herstylt de knop niet om op de eigen knoppen van Blocksy te lijken. Het past uw bestaande knop in de lay-out van Blocksy.
- Geen andere thema's beïnvloed: Het stylesheet wordt alleen geladen wanneer Blocksy het actieve thema is. Onze geautomatiseerde tests controleren beide kanten daarvan.
Wat u nodig heeft voordat u begint
U heeft twee dingen nodig, en beide zijn gratis.
- Het Blocksy thema: Of een child theme dat erop gebouwd is. Onze ontwikkelaars hebben de fixes gemeten op Blocksy 2.1.57, en we hebben de onderstaande screenshots gemaakt op 2.1.58.
- SaveTo Wishlist Lite 1.1.6 of later: Eerdere versies bevatten de Blocksy stylesheet niet. Update eerst als je een oudere versie hebt.
De integratie zit in de gratis plugin, dus je hebt SaveTo Wishlist Pro er niet voor nodig. Pro-winkels krijgen het ook, omdat Pro bovenop de gratis plugin draait.
Blocksy is een klassiek thema, dus je winkel- en productpagina's gebruiken de standaard WooCommerce-templates. Als je in plaats daarvan een pagina bouwt met het WooCommerce Product Collection-blok, wordt de knop nog steeds weergegeven. Daar plaatst de eigen blokafhandeling van de plugin hem. Bouw je productpagina's met Elementor in plaats daarvan? Onze Elementor widget gids behandelt die route.
Hoe u uw verlanglijstknop-plaatsingen op Blocksy kiest
Elke plaatsing toont de knop op Blocksy, dus je kiest een uiterlijk, geen breuk. Je vindt beide onder SaveTo Wishlist > Instellingen > Knop Plaatsing & Stijlen. Kijk in de secties Winkelpagina en Productpagina.
Plaatsingen op de winkelpagina
Hier zie je waar elk van de zes winkelplaatsingen terechtkomt op een Blocksy productkaart:
- Rechtsboven de Productafbeelding: De standaardinstelling van de plugin, en de beste pasvorm voor Blocksy. De hoek van de badge is aan de linkerkant, dus niets concurreert om deze plek.
- Linksboven de Productafbeelding: Op een kaart met een badge, verplaatst de knop naar beneden om eronder te zitten. Op een kaart zonder badge, behoudt hij zijn normale plek in de hoek.
- Boven de Producttitel en Onder de Producttitel: Beide tonen de knop tussen de afbeelding en de titel. Dat komt omdat Blocksy zijn eigen titel weergeeft.
- Boven de Toevoegen aan Winkelwagen Knop: Toont de knop direct onder de titel.
- Onder de Toevoegen aan Winkelwagen Knop: Toont de knop na de Toevoegen aan Winkelwagen knop.
De laatste vier volgen allemaal de Content Alignment-instelling van Blocksy voor productkaarten. Verander je kaarten naar midden of rechts, en de knop beweegt mee. Liever geen knop op een paginatype? Kies Niet weergeven ervoor, zoals onze gids voor het verbergen van de wishlist-knop uitlegt.
🔍️ Wat we hebben gezien: Boven de Producttitel en Onder de Producttitel zien er hetzelfde uit op Blocksy. Als je ertussen schakelt en verwacht dat de knop verplaatst, zal dat niet gebeuren, en dat is verwacht. Kies een van beide, of kies Boven de Toevoegen aan Winkelwagen Knop als je de knop onder de titel wilt.
Plaatsingen op de productpagina
Alle zeven productpagina-plaatsingen werken op Blocksy. Twee ervan krijgen specifieke hulp van de stylesheet.
Inline met de Toevoegen aan Winkelwagen Knop staat naast Toevoegen aan Winkelwagen op desktop. Op smalle schermen verplaatst het zich eronder, omdat de eigen knop van Blocksy de rij daar al vult.
Links Boven op de Productafbeelding valt over de productgalerij. Op een product met een badge, zit het onder de badge in plaats van deze te bedekken.
De andere vijf plaatsingen vereisen geen speciale behandeling van de stylesheet.
Wanneer u Rechtsboven kiest in plaats van Links Boven
Kies Rechts Boven op de Productafbeelding als uw producten grote of gestapelde badges hebben. De Links Boven-aanpassing maakt één badge vrij op Blocksy's standaard badgegrootte, en niet meer.
De stylesheet herkent Sale-badges, niet-op-voorraad-badges en Blocksy's aangepaste badges. Het verplaatst de knop alleen op kaarten die er daadwerkelijk een tonen. Daarom kan een gemengd raster knoppen op twee verschillende hoogtes in de linkerbovenhoek hebben.
Dus als uw verkopen meerdere badges in dezelfde hoek hebben, houdt Rechts Boven elke kaart consistent. Het is ook de standaardinstelling van de plugin, dus een nieuwe installatie op Blocksy gebruikt deze al.
Sommige shoppers bewaren een product om te wachten op een betere prijs. Voor hen kan SaveTo Wishlist Pro prijsdaler-meldingen sturen wanneer een opgeslagen product goedkoper wordt.
Hoe u kunt controleren of de Blocksy-integratie werkt
Deze controles duren een paar minuten en dekken de plekken die de stylesheet verandert. Voer ze één keer uit na het updaten, en opnieuw na een grote Blocksy-update.
- Controleer of de stylesheet laadt: Bekijk de broncode van een winkelpagina en zoek naar
savetowishlist-blocksy.css. Deze zou aanwezig moeten zijn zolang Blocksy actief is. Als een minificatieplugin uw CSS-bestanden combineert, wordt de naam mogelijk niet weergegeven. - Controleer een product in de uitverkoop: Met de Links Boven-afbeeldingplaatsing moet de knop onder de Sale-badge zitten.
- Controleer uw kaartuitlijning: Op links uitgelijnde Blocksy-kaarten moet een titel of winkelwagenknop ook links uitgelijnd zijn.
- Controleer de winkelwagenrij: Met de Inline-plaatsing moet de knop op desktop dezelfde rij delen. Op een telefoon valt deze eronder.
- Controleer als gast: Open de winkel in een privévenster. Gasten zien dezelfde knop, zolang gastverlanglijsten zijn ingeschakeld.
Als er nog steeds iets niet klopt, is er mogelijk een cache- of minificatieplugin die oude CSS levert. Wis deze, en laad opnieuw. Voor meer manieren om de knop aan uw thema aan te passen, zie onze post over opties voor het pictogram van de verlanglijstknop.
De grenzen die de moeite waard zijn om te weten
De integratie omvat de winkel-, archief- en enkele producttemplates. Een paar dingen vallen hier buiten.
- De winkelwagenpagina: Winkelwagenknoppen, zoals de optie om individuele winkelwagenitems op te slaan, gebruiken de normale styling van de plugin.
- Grote badges: De Links Boven-offset is ontworpen voor één standaardbadge. Grotere ontwerpen moeten Rechts Boven gebruiken.
- Blocksy-versies: De correcties zijn gemeten op Blocksy 2.1.57. Een toekomstige Blocksy-release kan de lay-out wijzigen, dus controleer opnieuw na grote updates.
- Knopweergave: De integratie past uw knop aan in de lay-out van Blocksy. Het kopieert niet het knopontwerp van Blocksy.
Onze geautomatiseerde tests draaien op een echte Blocksy-installatie. Ze bevestigen dat de stylesheet wordt geladen op Blocksy en niet op een ander thema. Ze controleren ook of de inline knop in zijn rij blijft.
Veelgestelde Vragen
Moet ik de Blocksy-integratie inschakelen?
Nee. SaveTo Wishlist Lite 1.1.6 en hoger laadt de Blocksy-stylesheet automatisch wanneer Blocksy uw actieve thema is. Er is geen instelling, schakelaar of pagina voor.
Werkt het met een Blocksy-kindthema?
Ja. De plugin controleert het bovenliggende thema, dus een kindthema gebouwd op Blocksy krijgt dezelfde stylesheet als Blocksy zelf.
Heb ik SaveTo Wishlist Pro nodig voor de Blocksy-integratie?
Nee. Het wordt meegeleverd in de gratis SaveTo Wishlist Lite-plugin, versie 1.1.6 en hoger. Pro-winkels krijgen het automatisch omdat Pro bovenop de gratis plugin draait.
Klaar om uw Blocksy-verlanglijst in te stellen?
Blocksy geeft uw winkel een strakke lay-out, en de verlanglijstknop past er nu in zonder aangepaste CSS. De enige echte beslissing die overblijft, is waar u wilt dat de knop staat.
- Bekijk wat de integratie verandert op Blocksy-kaarten en productpagina's.
- Kies uw plaatsingen, beginnend met Rechtsboven op de winkelpagina.
- Gebruik Rechtsboven voor grote badges om elke kaart consistent te houden.
- Voer de vijf controles uit na het updaten, en na grote Blocksy-updates.
Uw Blocksy-verlanglijstinstelling is één plugin-update verwijderd. Installeer of update SaveTo Wishlist Lite naar versie 1.1.6 en de stylesheet doet de rest.
