Rozszerzenie
Popup Dodaj do Koszyka dodaje funkcjonalność wyskakującego okienka do Easy Digital Downloads. Po aktywacji, po kliknięciu przez klienta przycisku „Dodaj do Koszyka”, pojawi się małe okienko modalne, które da mu możliwość przejścia bezpośrednio do strony realizacji zakupu lub kontynuowania zakupów. Oto przykład użycia domyślnych stylów motywu TwentyFifteen.
Oto jak skonfigurować okienko.
Instrukcje konfiguracji dla Popup Dodaj do Koszyka
- Po zainstalowaniu, znajdź ustawienia tego rozszerzenia w panelu administracyjnym WordPress → Pobierane → Ustawienia → Rozszerzenia → Popup Dodaj do Koszyka
- Po aktywacji wtyczki okienko będzie domyślnie wyłączone. Daje to możliwość dostosowania ustawień przed jego aktywacją na Twojej stronie. Okienko można następnie włączyć, zaznaczając pole wyboru Włącz okienko.
Uwaga: Podczas korzystania z funkcji przycisku „Kup teraz” lub rozszerzenia Darmowe Pobieranie, okienko zostanie automatycznie wyłączone, aby nie zakłócać przekierowań bramki płatności ani wyskakujących okienek stron trzecich.
Personalizacja
Ogólny Wygląd
Podgląd okienka: Ten przycisk pozwala wywołać okienko na stronie ustawień, aby zobaczyć zmiany przed ich zapisaniem. Możesz również użyć linku „Podgląd okienka” na Pasku Administracyjnym. Dodaliśmy to, abyś nie musiał stale przewijać strony ustawień do góry, aby zobaczyć podgląd okienka.
Należy pamiętać, że podgląd może nie być całkowicie dokładny podczas korzystania z krótkich kodów, ponieważ niektóre style mogą nie być ładowane w panelu administracyjnym WordPress. Zaleca się podgląd na froncie Twojej strony po zakończeniu pracy, aby potwierdzić wygląd okienka.
Tekst okienka: Tutaj możesz ustawić tekst wyświetlany w okienku. Jeśli wtyczka wykryje „%s” (bez cudzysłowów) w dowolnym miejscu tekstu tej opcji, zostanie on zastąpiony nazwą pobieranego produktu, który użytkownik dodał do swojego koszyka. Masz również możliwość dodawania plików multimedialnych (takich jak obrazy), osadzeń, a nawet krótkich kodów wewnątrz okienka.
Tekst okienka (liczba mnoga): Podobnie jak Tekst okienka, ten tekst jest wyświetlany w okienku, gdy do koszyka dodano wiele produktów jednocześnie. Jest to typowe w przypadku opcji cen zmiennych, które pozwalają na jednoczesne dodawanie wielu opcji. Ponownie, masz również możliwość dodawania plików multimedialnych (takich jak obrazy), osadzeń, a nawet krótkich kodów wewnątrz okienka.
Pamiętaj, że możesz rozwinąć pasek narzędzi edytora, klikając najbardziej prawy przycisk na edytorze!
Rozmiar czcionki: Pozwala to na zmianę ogólnego rozmiaru czcionki używanej w okienku. Akceptowane są różne formaty CSS.
- Rozmiary w pikselach to absolutne, stałe rozmiary. Przykład: 12px
- Rozmiary procentowe są względne do domyślnego rozmiaru czcionki motywu. Przykład: 120% (o 20% większy niż domyślny rozmiar czcionki motywu).
- Wartości „em” są podobne do procentów, gdzie 1em to domyślny rozmiar czcionki. Przykład: 2em (dwa razy większy niż domyślny).
Kolor tekstu: Kolor tekstu wyskakującego okienka. Aby ustawić kolor, kliknij pole koloru, aby wyświetlić selektor kolorów.
Kolor tła: Kolor tła wyskakującego okienka. Aby ustawić kolor, kliknij pole koloru, aby wyświetlić selektor kolorów.
Oto przykład z kolorem tekstu ustawionym na żółty, a kolorem tła na niebieski:
Obramowanie: Ta opcja pozwala stylizować obramowanie wyskakującego okienka, które pojawia się wokół krawędzi okienka. Trzy opcje to odpowiednio szerokość (lub grubość), styl i kolor.
Promień obramowania: Promień narożników obramowania. Im większa ta wartość, tym bardziej zaokrąglone będą narożniki. Dotyczy to również sytuacji, gdy obramowanie jest niewidoczne (szerokość wynosi zero, styl to „brak” lub kolor jest przezroczysty).
Cień: Ta opcja pozwala dodać cień do wyskakującego okienka, ustawiając wielkość cienia (rozmiar i grubość) oraz kolor cienia. Poniższy przykład dodaje ciemnozielony cień o wielkości 15:
Kolor nakładki: Nakładka odnosi się do koloru, który zakrywa resztę strony, gdy wyświetlane jest wyskakujące okienko. Możesz zmienić jego kolor, klikając pole koloru, aby wyświetlić selektor kolorów, który zawiera również opcję przezroczystości. Poniższy przykład zmienia nakładkę na jasny, półprzezroczysty pomarańczowy:
Wymiary wyskakującego okienka
Rozmiar: Tutaj możesz kontrolować rozmiar wyskakującego okienka. Akceptowane są różne formaty CSS, w tym piksele i procenty.
- Rozmiary w pikselach to stałe rozmiary. Przykład: 500px (500 pikseli na ekranie użytkownika)
- Rozmiary procentowe są względne w stosunku do rozmiaru okna przeglądarki użytkownika. Przykład: 60% (60% ekranu użytkownika)
Jeśli szerokość lub wysokość pozostaną puste, wyskakujące okienko automatycznie obliczy je, aby dopasować do zawartości.
Poniższy przykład pokazuje wyskakujące okienko z szerokością ustawioną na 500px i pustą wysokością, która zostanie automatycznie obliczona.
Wypełnienie: Wypełnienie odnosi się do odstępu między krawędzią wyskakującego okienka a jego zawartością, jak pokazano na poniższym obrazku:
Obszar na zielono to „wypełnienie”.
Style przycisków
Obramowanie przycisku: Obramowanie przycisków wyświetlanych w wyskakującym okienku, podobne do poprzedniej opcji Obramowanie. Możesz odpowiednio ustawić grubość, styl i kolor obramowania.
Promień narożnika: Promień narożników przycisku. Im większa ta wartość, tym bardziej zaokrąglone będą narożniki. Dotyczy to również sytuacji, gdy obramowanie przycisku jest niewidoczne (szerokość ustawiona na 0, styl to „brak” lub kolor jest przezroczysty).
Na przykład: niebieskie obramowanie „kropkowane” o szerokości 5px i promieniu narożnika 3px:
Wypełnienie przycisku: Podobnie jak opcja Wypełnienie wyskakującego okienka, pozwala to dostosować odstęp wewnątrz przycisku. Na przykład poniższy przykład używa 6px wypełnienia góra i dół oraz 30px wypełnienia lewo i prawo.
Kierunek przycisków: Możesz ustawić przyciski tak, aby wyświetlały się obok siebie poziomo lub jeden nad drugim pionowo. Domyślne ustawienie to poziome.
Wyrównanie przycisków: Możesz wybrać wyrównanie do lewej, środka i prawej. Wybranie lewej lub prawej przesunie przyciski na odpowiednią stronę, podczas gdy wybranie środka umieści przyciski na środku wyskakującego okienka.
Kolejność przycisków: Ta opcja pozwala wybrać, który przycisk jest wyświetlany jako pierwszy. Jeśli Kierunek przycisków jest ustawiony na poziomy, ta opcja określi, który przycisk jest wyświetlany po lewej stronie. Jeśli Kierunek przycisków jest ustawiony na pionowy, ta opcja określi, który przycisk jest wyświetlany na górze.
Przycisk Kasy/Kontynuuj
Dwie następne sekcje zawierają identyczne opcje, które pozwalają dostosować indywidualny wygląd obu przycisków.
Włączone: Wybierz, czy chcesz pokazać, czy ukryć przycisk.
Tekst: Możesz dostosować tekst każdego przycisku do czegokolwiek chcesz.
Kolor tekstu: Kolor tekstu wewnątrz przycisku.
Kolor tekstu po najechaniu: Kolor tekstu wewnątrz przycisku, gdy kursor myszy znajduje się nad przyciskiem.
Kolor tła: Kolor tła przycisku.
Kolor tła po najechaniu: Kolor tła przycisku, gdy kursor myszy znajduje się nad przyciskiem.
Poniższy przykład używa białych przycisków z czarnym tekstem, które zmieniają się w czerwone przyciski z białym tekstem, gdy kursor myszy znajduje się nad przyciskiem.
Wyjaśnienie Wybieraka Kolorów

