De
Add To Cart Popup extensie voegt een popup functionaliteit toe aan Easy Digital Downloads. Wanneer geactiveerd, verschijnt er na het klikken op een ‘Voeg toe aan winkelwagen’ knop een kleine modale popup die de klant de optie geeft om direct naar de afrekenpagina te gaan of om verder te winkelen. Hier is een voorbeeld met de standaard styling van het TwentyFifteen thema.
Hier leest u hoe u de popup configureert.
Configuratie-instructies voor Add to Cart Popup
- Nadat u het heeft geïnstalleerd, vindt u de instellingen voor deze extensie via WordPress admin → Downloads → Instellingen → Extensies → Add To Cart Popup
- Wanneer u de plugin activeert, is de popup standaard uitgeschakeld. Dit is zodat u de instellingen kunt aanpassen voordat u deze op uw site activeert. De popup kan vervolgens worden ingeschakeld door het aanvinken van het Enable Popup selectievakje.
Opmerking: Bij gebruik van de “Buy Now” knop functie, of de Free Downloads extensie, wordt de popup automatisch uitgeschakeld om niet te interfereren met betalingsgateway omleidingen of popups van derden.
Maatwerk
Algemene weergave
Popup Voorbeeld: Met deze knop kunt u een popup activeren terwijl u op de instellingenpagina bent om uw wijzigingen te bekijken voordat u ze opslaat. U kunt ook de “Popup Voorbeeld” link op de Admin Bar gebruiken. We hebben dit toegevoegd zodat u niet constant naar de bovenkant van de instellingenpagina hoeft te scrollen om de popup te bekijken.
Houd er rekening mee dat het voorbeeld mogelijk niet volledig accuraat is bij gebruik van shortcodes, aangezien sommige stijlen mogelijk niet worden geladen in de WordPress Admin. Het wordt aanbevolen om op de front-end van uw site te bekijken wanneer u klaar bent om het uiterlijk van de popup te bevestigen.
Popup Tekst: Hier kunt u de tekst instellen die op de popup wordt weergegeven. Als de plugin “%s” (zonder aanhalingstekens) ergens in de tekst van deze optie detecteert, wordt deze vervangen door de naam van de download die de gebruiker aan zijn winkelwagen heeft toegevoegd. U heeft ook de mogelijkheid om mediabestanden (zoals afbeeldingen), embeds en zelfs shortcodes in de popup toe te voegen.
Popup Meervoud Tekst: Vergelijkbaar met Popup Tekst, wordt deze tekst weergegeven op de popup wanneer meerdere items tegelijkertijd aan de winkelwagen zijn toegevoegd. Dit is typisch bij gebruik van variabele prijsopties die toestaan dat meerdere opties tegelijkertijd worden toegevoegd. Nogmaals, u heeft ook de mogelijkheid om mediabestanden (zoals afbeeldingen), embeds en zelfs shortcodes in de popup toe te voegen.
Onthoud dat u de werkbalk van de editor kunt uitbreiden door op de meest rechtse knop van de editor te klikken!
Lettergrootte: Hiermee kunt u de algehele grootte van het lettertype in de popup wijzigen. Diverse CSS-formaten worden hier geaccepteerd.
- Pixelgroottes zijn absolute vaste groottes. Voorbeeld: 12px
- Percentagegroottes zijn relatief ten opzichte van de standaard lettergrootte van het thema. Voorbeeld: 120% (20% groter dan de lettergrootte van het thema).
- “em” waarden zijn vergelijkbaar met percentages, waarbij 1em de standaard lettergrootte is. Voorbeeld: 2em (twee keer zo groot als de standaard).
Tekstkleur: De kleur van de tekst in de popup. Klik op het kleurenvak om de kleurenkiezer te openen en de kleur in te stellen.
Achtergrondkleur: De kleur van de achtergrond van de popup. Klik op het kleurenvak om de kleurenkiezer te openen en de kleur in te stellen.
Hier is een voorbeeld met de tekstkleur ingesteld op geel en de achtergrondkleur ingesteld op blauw:
Rand: Met deze optie kunt u de rand van de popup stylen, die rond de rand van het popupvenster verschijnt. De drie opties zijn respectievelijk de dikte, de stijl en de kleur.
Randradius: De radius van de hoeken van de rand. Hoe groter deze waarde, hoe ronder de hoeken zullen zijn. Dit geldt ook als u de rand niet zichtbaar hebt ingesteld (dikte is nul, stijl is "geen" of kleur is transparant).
Schaduw: Met deze optie kunt u een schaduw aan de popup toevoegen door de schaduwhoeveelheid (grootte en dikte) en de schaduwkleur in te stellen. Het onderstaande voorbeeld voegt een donkergroene schaduw toe met een schaduwhoeveelheid van 15:
Overlaykleur: De term overlay verwijst naar de kleur die de rest van de pagina bedekt wanneer de popup wordt weergegeven. U kunt de kleur ervan wijzigen door op het kleurenvak te klikken om de kleurenkiezer te openen, die ook een transparantieoptie bevat. Het onderstaande voorbeeld verandert de overlay in een licht semi-transparant oranje:
Popupafmetingen
Grootte: Hier kunt u de grootte van de popup regelen. Diverse CSS-formaten worden hier geaccepteerd, waaronder pixels en percentages.
- Pixelgroottes zijn vaste groottes. Voorbeeld: 500px (500 pixels op het scherm van de gebruiker)
- Percentagegroottes zijn relatief ten opzichte van de grootte van het browservenster van de gebruiker. Voorbeeld: 60% (60% van het scherm van de gebruiker)
Als de breedte of hoogte leeg worden gelaten, berekent de popup deze automatisch om de inhoud te passen.
Het volgende voorbeeld toont een popup met een breedte ingesteld op 500px en de hoogte leeg gelaten om automatisch te worden berekend.
Opvulling: De opvulling verwijst naar de ruimte tussen de rand van de popup en de inhoud ervan, zoals getoond in de volgende afbeelding:
Het gebied in groen is wat wordt aangeduid als de "opvulling".
Knopstijlen
Knoprand: De rand voor de knoppen die in de popup worden weergegeven, vergelijkbaar met de vorige Rand-optie. U kunt respectievelijk de dikte, stijl en kleur van de rand instellen.
Hoekradius: De radius van de knophoeken. Hoe groter deze waarde, hoe ronder de hoeken zullen zijn. Dit geldt ook als de knoprand niet zichtbaar is (dikte ingesteld op 0, stijl is "geen" of kleur is transparant).
Bijvoorbeeld: een blauwe "gestippelde" rand met een dikte van 5px en een hoekradius van 3px:
Knopopvulling: Vergelijkbaar met de popup Opvulling-optie, hiermee kunt u de ruimte binnen de knop aanpassen. De volgende gebruikt bijvoorbeeld 6px boven- en onderopvulling en 30px links- en rechtsopvulling.
Knoprichting: U kunt de knoppen zo instellen dat ze naast elkaar horizontaal worden weergegeven, of verticaal boven elkaar worden gestapeld. De standaardinstelling is horizontaal.
Knopuitlijning: U kunt kiezen tussen uitlijning links, midden en rechts. Als u links of rechts kiest, worden de knoppen naar die respectievelijke kant geduwd, terwijl midden de knoppen in het midden van de popup plaatst.
Knopvolgorde: Met deze optie kunt u kiezen welke knop als eerste wordt weergegeven. Als de Knoprichting is ingesteld op horizontaal, bepaalt deze optie welke knop aan de linkerkant wordt weergegeven. Als de Knoprichting is ingesteld op verticaal, bepaalt deze optie welke knop bovenaan wordt weergegeven.
Afrekenen/Doorgaan Knop
De volgende twee secties bestaan uit identieke opties waarmee u het individuele uiterlijk van beide knoppen kunt aanpassen.
Ingeschakeld: Kies of u de knop wilt weergeven of verbergen.
Tekst: U kunt de tekst van elke knop aanpassen naar wat u maar wilt.
Tekstkleur: De kleur van de tekst in de knop.
Tekstkleur bij Hover: De kleur van de tekst in de knop wanneer de muiscursor over de knop zweeft.
Achtergrondkleur: De achtergrondkleur van de knop.
Achtergrondkleur bij Hover: De achtergrondkleur van de knop wanneer de muiscursor over de knop zweeft.
Het volgende voorbeeld gebruikt witte knoppen met zwarte tekst die veranderen in rode knoppen met witte tekst wanneer de muiscursor over de knop is.
De Kleurkiezer, Uitgelegd
