Beoordeeld door Je opent je wishlist-pagina in Flatsome's UX Builder om deze af te stemmen op de rest van je winkel. Je voegt een rij, een kop, misschien een banner toe. Dan klik je op Bijwerken, laad je de pagina en de wishlist is weg.
Er worden geen fouten gemeld en niets waarschuwt je. Shoppers die producten voor later hebben opgeslagen komen op een lege pagina terecht, en ze vertellen het je misschien niet. Het is gemakkelijk te missen, en daarom hebben we een Flatsome wishlist-element gebouwd.
Het wordt meegeleverd in de gratis SaveTo Wishlist Lite-plugin als een native Save to Wishlist-element voor UX Builder. Hieronder laat ik zien waarom de pagina leeg wordt en hoe je het element plaatst. Ik zal ook de enige plek bespreken die het niet kan bereiken.
Spring naar:
- Waarom je Flatsome Wishlist-pagina leeg wordt in UX Builder
- Wat de SaveTo Wishlist Flatsome-integratie daadwerkelijk doet
- Wat u nodig heeft voordat u begint
- Hoe je de Wishlist toevoegt aan een Flatsome-pagina met UX Builder
- Welke pagina moet het Wishlist-element bevatten
- De enige plaatsing om te vermijden: UX Blocks
- Hoe je bevestigt dat je Flatsome Wishlist werkt
- Hoe zit het met de Save To Wishlist-knop op Flatsome?
- Veelgestelde Vragen
- Klaar om je Wishlist toe te voegen aan Flatsome?
Waarom je Flatsome Wishlist-pagina leeg wordt in UX Builder
De wishlist-pagina bereikt de browser op precies één manier. WordPress voert de [saveto_wishlist] shortcode uit die in de paginalichaam is opgeslagen, en die shortcode trekt de wishlist.
Een UX Builder-pagina slaat zijn eigen lay-out op. Wanneer u opslaat, schrijft UX Builder die lay-out als zijn eigen shortcodes, zoals [row] en [col]. Bouw de verlanglijstpagina opnieuw op zonder ons element, en de opgeslagen lay-out bevat geen verlanglijst shortcode meer.
Dat is normaal gedrag van page-builders, geen Flatsome-bug. Elke builder die de paginabody beheert, bepaalt wat daar wordt weergegeven, dus de verlanglijst heeft een stukje nodig dat de builder begrijpt.
Flatsome is een populair thema, dus deze opzet is gebruikelijk. Volgens de Flatsome-vermelding op ThemeForest heeft het thema 270.319 verkopen. De vermelding noemt het het bestverkochte WooCommerce-thema. Het verschijnt ook in thema-overzichten, waaronder de lijst van Wholesale Suite met WooCommerce-thema's voor groothandels.
Een lege verlanglijstpagina kost meer dan het lijkt. Volgens het productpagina-onderzoek van Baymard Institute vertrouwen 21% van de 1.193 respondenten op "Opslaan"-functies. Hetzelfde onderzoek toonde aan dat 89% van de sites "Opslaan"-functies niet gemakkelijk toegankelijk en bruikbaar maakt. Een pagina die niets weergeeft, is het uiterste van dat probleem. Het tenietdoen van de conversiewaarde die een verlanglijst toevoegt.
Wat de SaveTo Wishlist Flatsome-integratie daadwerkelijk doet
De integratie voegt één ding toe: een Save to Wishlist-element in de elementkiezer van UX Builder. Het wordt geleverd in SaveTo Wishlist Lite 1.1.3 en hoger. Er is geen instellingenpagina en geen schakelaar om in te schakelen.
- Zelfde shortcode eronder: Het element koppelt UX Builder-opties aan de bestaande
saveto_wishlistshortcode in plaats van een nieuwe aan te maken. Dus het wordt precies weergegeven als de shortcode, met dezelfde gast-, klant- en gedeelde-lijstafhandeling. - Twee optionele instellingen: Verlanglijst-ID en Toon alleen de standaardverlanglijst. Ze komen rechtstreeks overeen met de eigen
idendefaultonlyattributen van de shortcode, dus niets kan tussen de twee afwijken. - Een veilige placeholder in de editor: Binnen UX Builder ziet u een statische box, niet uw live verlanglijst. Zo kan een per ongeluk klikje in de editor uw eigen opgeslagen items niet veranderen.
- Scripts die laden waar ze nodig zijn: De plugin scant de inhoud van een pagina op de shortcode voordat de verlanglijst-app wordt geladen. Omdat het element dezelfde tag gebruikt, krijgen alle pagina's die deze dragen de scripts en stijlen die ze nodig hebben.
Die controle voorkomt dat de volledige verlanglijst-app wordt geladen op pagina's die geen verlanglijst tonen. Onze snelheidstest meet wat SaveTo Wishlist toevoegt aan een productpagina. Op elk ander thema doet de integratie niets. De builder-hook wordt alleen geactiveerd binnen een UX Builder-verzoek, en de placeholder controleert eerst op Flatsome.
Wat de integratie niet doet
Het bereik is opzettelijk beperkt. Hier eindigt de taak van het element.
| Gebied | Gedekt door de Flatsome-integratie? |
|---|---|
| Een verlanglijst binnen een pagina die u bewerkt in UX Builder | Ja, via het Save to Wishlist-element |
| Een verlanglijst binnen een UX Block dat wordt opgenomen in een footer, menu of productlay-out | Nee. De scripts en stijlen van de verlanglijst worden daar niet geladen |
| Flatsome-specifieke styling voor de knop Opslaan op verlanglijst | Nee. De knop volgt uw normale instellingen voor Knop Plaatsing & Stijlen |
| Het tabblad verlanglijst op Mijn account | Niet nodig. Flatsome trekt dat tabblad niet via UX Builder |
| Een instellingenpagina of een aan/uit-schakelaar | Geen. Het element is er wanneer Flatsome actief is |
Dat is een andere vorm dan onze thema-integraties voor Woostify en Blocksy, die de knop zelf herstylen. De Flatsome-integratie gaat over de verlanglijstpagina. Het lijkt het meest op onze Divi Builder module, die de verlanglijst op Divi layouts op dezelfde manier plaatst.
Wat u nodig heeft voordat u begint
Je hebt drie dingen nodig, en je hebt er waarschijnlijk al twee.
- Het Flatsome-thema: Met UX Builder ingeschakeld voor de pagina die je wilt bewerken.
- SaveTo Wishlist Lite 1.1.3 of hoger: De huidige release is 1.1.6, dus update eerst als je een oudere versie hebt.
- Een pagina om op te bouwen: Meestal de verlanglijstpagina die de plugin heeft aangemaakt toen je hem activeerde.
Het element is onderdeel van de gratis plugin. Je hebt SaveTo Wishlist Pro er niet voor nodig, hoewel Pro-winkels het ook krijgen.
Een snelle, eerlijke opmerking over versies. Onze ontwikkelaars hebben het element met de hand geverifieerd op Flatsome 3.15.5, en Flatsome is op het moment van schrijven 3.20.11. Flatsome is een betaald thema, dus het maakt geen deel uit van onze geautomatiseerde testwebsite. Het element maakt gebruik van de eigen builderfuncties van Flatsome, maar controleer het snel na een grote thema-update.
Hoe je de Wishlist toevoegt aan een Flatsome-pagina met UX Builder
Hier is de volledige opstelling. Je doet het één keer per pagina, en het bevat geen code. De stappen komen overeen met onze Flatsome kennisbankgids.
- Open uw verlanglijstpagina in UX Builder.
- Klik op Elementen toevoegen, zoek vervolgens Opslaan op verlanglijst in de groep Inhoud. Zoek naar het hart-icoon, of typ "opslaan op verlanglijst" om te zoeken.
- Sleep het element naar de rij of kolom waar de verlanglijst moet verschijnen.
- Klik op het element om het optiepaneel te openen.
- Laat beide opties op hun standaardwaarden staan, tenzij je een specifieke lijst nodig hebt. De onderstaande tabel legt elk van hen uit.
- Klik op Toepassen, en vervolgens op Bijwerken om de pagina op te slaan.
- Open de pagina buiten de builder om de live verlanglijst te zien.
Stel de twee elementopties in
Je kunt beide met rust laten. Dan gedraagt het element zich precies zoals de [saveto_wishlist] shortcode op een standaard verlanglijstpagina.
| Optie | Wat het doet | Standaard |
|---|---|---|
| Wishlist ID | Pint het element vast aan één specifieke verlanglijst, met zijn numerieke ID. Laat het leeg voor een normale verlanglijstpagina. | Leeg |
| Toon alleen de standaard verlanglijst | Wanneer ingesteld op Ja, ziet een ingelogde klant één lijst, hun standaardlijst, in plaats van de volledige tabel met meerdere lijsten. Zonder een standaard ingesteld, valt het terug op hun eerste gepubliceerde lijst. | Nee |
Beide opties bepalen wat ingelogde klanten zien. Een gast krijgt altijd de gastenverlanglijstweergave, wat je ook instelt. Gedeelde verlanglijstlinks gedragen zich anders voor elke optie, wat het onderstaande diagram in kaart brengt.
Er is één valkuil die het waard is om te weten. Een vastgezette verlanglijst-ID wint het van een gedeelde link. Open een gedeelde lijst op die pagina, en het toont in plaats daarvan de vastgezette lijst. Laat de verlanglijst-ID leeg op je hoofdverlanglijstpagina, waar gedeelde links worden geopend.
Toon alleen de standaardverlanglijst is dezelfde functie als het attribuut defaultonly="yes" van de shortcode. We hebben uitgelegd waarom een pagina met één lijst de meeste klanten past toen dat attribuut werd uitgebracht.
Wat je in de builder zult zien
In de editor tekent het element een eenvoudig vak met een opmerking dat de verlanglijst op de live pagina verschijnt. Dat is verwacht, en het is geen stylingprobleem.
De echte verlanglijst is een live app die wordt opgeslagen in je account. Het renderen ervan op het canvas zou een onbedoelde klik toestaan om items aan je eigen lijst toe te voegen of te verwijderen. Dus de placeholder wordt alleen getoond binnen de builder, en alleen aan ingelogde gebruikers die berichten kunnen bewerken.
🔍️ Wat we hebben gezien: De placeholder wordt gemakkelijk aangezien voor een kapotte of ongestylede verlanglijst. Het is verleidelijk om te beginnen met het oplossen van problemen vanuit UX Builder, maar het element is waarschijnlijk in orde. Controleer in plaats daarvan de live pagina, en controleer deze dubbel: eenmaal uitgelogd en eenmaal als klant.
Welke pagina moet het Wishlist-element bevatten
Voor de meeste winkels is het antwoord de verlanglijstpagina die de plugin bij activering heeft aangemaakt. Deze is al gekoppeld aan de rest van de plugin, dus niets anders hoeft te veranderen.
Je kunt het element ook op een nieuwe pagina plaatsen, of op meer dan één. Het werkt op elke pagina die UX Builder direct bewerkt. Onze ontwikkelaars hebben specifiek een pagina gecontroleerd die niet de verlanglijstpagina was, en de verlanglijst werd daar ook geladen.
Als je de verlanglijst naar een nieuwe pagina verplaatst, update dan één instelling. Wijs in SaveTo Wishlist > Instellingen de Redirect page dropdown toe aan de nieuwe pagina. Dat is waar shoppers terechtkomen na het opslaan van een product wanneer de knop is ingesteld om hen om te leiden.
Houd de URL van de verlanglijstpagina stabiel zodra klanten deze gaan gebruiken. Sommigen zullen deze als bladwijzer opslaan, en anderen plakken gedeelde verlanglijstlinks in berichten naar vrienden en familie.
De enige plaatsing om te vermijden: UX Blocks
Plaats het element direct op de pagina. Plaats het niet binnen een herbruikbaar UX Block dat een ander deel van je site ophaalt.
Flatsome kan een UX Block indirect insluiten met een [block id="..."] verwijzing. Je vindt deze in theme-option footers, per-page footers, menu-item blocks en aangepaste productlayouts.
De plugin bepaalt of de verlanglijst-app wordt geladen door de eigen inhoud van de pagina te scannen. Het kan echter niet in een blok kijken dat ergens anders is opgeslagen. Het element wordt nog steeds afgedrukt, maar de scripts en stijlen van de verlanglijst worden er niet mee geladen. Zonder hen kan de verlanglijst niet goed werken.
Wilt u een verlanglijst in een sitewijde plek zoals de header of footer? Voeg in plaats daarvan een menukoppeling toe aan de verlanglijstpagina. Het is één menu-item en het werkt op elke pagina.
Hoe je bevestigt dat je Flatsome Wishlist werkt
Voer deze controles één keer uit na de installatie, en opnieuw na elke grote Flatsome-update. Ze weerspiegelen de scenario's die onze ontwikkelaars handmatig hebben geverifieerd.
- Uitgelogd: Open de pagina in een privévenster. U zou de gastenverlanglijst moeten zien, zolang gastenverlanglijsten zijn ingeschakeld.
- Als klant: Log in met een testklantaccount, sla een product op en open vervolgens de pagina. Het product zou vermeld moeten staan.
- Als beheerder, buiten de builder: U zou de live verlanglijst moeten zien, nooit de placeholder-box.
- Mijn account: Open het tabblad Verlanglijst onder Mijn account. Het zou ook de live verlanglijst moeten tonen.
- Een gedeelde link: Maak een testlijst openbaar, deel deze en open vervolgens de link uitgelogd. Het zou die lijst moeten tonen.
Eén randgeval wordt al voor u afgehandeld. UX Builder-previewlinks dragen een URL-parameter met zich mee. Een klant die er een volgt, ziet nog steeds zijn eigen verlanglijst. De placeholder wordt alleen getoond aan gebruikers die berichten kunnen bewerken.
Een gast die nog niets heeft opgeslagen, ziet een lege staat, wat normaal is. Als gasten helemaal geen verlanglijst krijgen, controleer dan of Gastenverlanglijst uitschakelen uit staat. U kunt ook de gastenverlanglijstpagina aanpassen als deze te kaal leest.
Hoe zit het met de Save To Wishlist-knop op Flatsome?
De knop Opslaan op verlanglijst heeft de integratie niet nodig. Het haakt in op de standaard WooCommerce-producttemplates, en de templates van Flatsome activeerden die hooks in onze tests.
Onze ontwikkelaar heeft dit getest op Flatsome 3.15.5. De knop werd weergegeven op alle 12 winkelkaarten en op de enkele productpagina. Op die testwinkel bevond de winkelknop zich binnen het prijsgebied van Flatsome op elke kaart. Dat is waar de plaatsing Boven de knop Toevoegen aan winkelwagen zich aan hecht.
In tegenstelling tot Woostify en Blocksy, krijgt Flatsome geen thema-specifieke knopstijlen. Kies uw plaatsing onder SaveTo Wishlist > Instellingen > Knop Plaatsing & Stijlen. We hebben niet elke plaatsing op Flatsome getest, dus controleer de uwe op een winkelpagina, een productpagina en een telefoon.
Het correct krijgen van de knop is belangrijk omdat de meeste winkelwagens de checkout niet halen. Volgens het onderzoek naar winkelwagenverlating van Baymard Institute, is het gemiddelde gedocumenteerde verlaten tarief 70,22%, verspreid over 50 studies. Een zichtbare verlanglijstknop geeft die shoppers ergens om een product te parkeren. Dat geeft u een manier om een deel van die verkopen terug te winnen.
Drukt een plaatsing uw Flatsome-kaarten in? U kunt de knop op het ene paginatype verbergen en op het andere laten staan.
Veelgestelde Vragen
Heeft de Flatsome-integratie SaveTo Wishlist Pro nodig?
Nee. Het Save to Wishlist-element wordt geleverd in de gratis SaveTo Wishlist Lite-plugin, versie 1.1.3 en hoger. Installeer of update de gratis plugin. Het element verschijnt vervolgens in de groep Content van UX Builder terwijl Flatsome actief is.
Waarom is mijn wishlist-pagina leeg nadat ik deze heb bewerkt in UX Builder?
Een UX Builder-pagina slaat zijn eigen lay-out op, bestaande uit builder-shortcodes. Als je de pagina herbouwt zonder ons element, heeft die lay-out geen [saveto_wishlist] shortcode om de verlanglijst te genereren. Voeg het Save to Wishlist-element toe vanuit de elementkiezer en sla de pagina vervolgens opnieuw op.
Kan ik de wishlist shortcode nog steeds gebruiken op een Flatsome-winkel?
Ja, op pagina's die je niet met UX Builder bewerkt. De shortcode werkt zoals gewoonlijk in de block editor, zoals onze handleiding voor verlanglijst shortcodes laat zien. Gebruik binnen een UX Builder-lay-out het element in plaats daarvan. Het draait dezelfde shortcode onderliggend, met een goed optiepaneel.
Zullen mijn klanten ooit de builder-placeholder zien?
Nee. De placeholder verschijnt alleen binnen UX Builder, en alleen voor ingelogde gebruikers die berichten kunnen bewerken. Iedereen die de live pagina bekijkt, inclusief jij, ziet de echte wishlist.
Klaar om je Wishlist toe te voegen aan Flatsome?
Een verlanglijstpagina is alleen nuttig als hij daadwerkelijk wordt weergegeven. Op Flatsome komt dit neer op één keuze. Bouw de pagina met het Save to Wishlist-element, niet een shortcode die UX Builder zal herschrijven.
- Begrijp waarom de pagina leeg wordt voordat je iets herbouwt.
- Voeg het Save to Wishlist-element toe aan je verlanglijstpagina in UX Builder.
- Houd het buiten UX Blocks en link in plaats daarvan naar de pagina vanuit je footer.
- Voer de vijf controles uit als gast, klant en beheerder.
Je Flatsome-verlanglijst is één element verwijderd van het werken. Installeer of update SaveTo Wishlist Lite en voeg het vandaag nog toe aan je verlanglijstpagina.
