Jak dodać niestandardowy kod CSS do WP Simple Pay

Czy chcesz stylizować formularze płatności WP Simple Pay niestandardowym kodem CSS? Istnieje kilka sposobów na dodanie niestandardowego CSS do Twojej witryny WordPress dla formularzy i innych elementów strony.

Możesz wyłączyć „domyślne style” WP Simple Pay i odziedziczyć style swojego motywu, odwiedzając Simple Pay Pro → Ustawienia → Ogólne → Zaawansowane.

1. Edytuj bezpośrednio plik arkusza stylów swojego motywu (zazwyczaj style.css). Należy jednak uważać na wszelkie aktualizacje motywu, które nadpiszą Twoje zmiany, dlatego zalecamy #2 lub #3.
2. Dodaj osobny plik CSS do swojego motywu i użyj funkcji wp_enqueue_style do odwołania się do niego w pliku functions.php lub w osobnym niestandardowym pluginie.
3. Dodaj CSS do nagłówka swojego motywu za pomocą darmowego pluginu WP Code. Przejdź do Fragmenty kodu → Nagłówek i Stopka, a następnie dodaj swój CSS, jak pokazano poniżej.

Jeśli chcesz usunąć style pluginu z niektórych stron, zobacz ten fragment w naszej bibliotece fragmentów kodu.

Wskazówki dotyczące dostosowywania

Obecnie nie mamy przewodnika po stylach CSS dla formularzy płatności WP Simple Pay. Najlepszym sposobem na znalezienie nazw klas i identyfikatorów, które musisz zmodyfikować, jest zbadanie elementów strony za pomocą narzędzi deweloperskich przeglądarki.

Oto świetny przewodnik, który pomoże Ci zacząć korzystać z tej metody: Podstawy Inspekcji Elementu: Dostosowywanie WordPressa dla użytkowników DIY

Klasy CSS i identyfikatory elementów formularzy WP Simple Pay zazwyczaj zaczynają się od simpay-.

Oto przykład, gdzie identyfikator formularza to 83, a identyfikator pola tekstowego to 4:

<style>
#simpay-form-83 #simpay-text-4 { display: none; }
</style>

Oto przykład zmiany koloru przycisku płatności z zielonego na niebieski przy użyciu opcji wyświetlania formularza Osadzony lub Nakładka.

<style>
.simpay-checkout-btn { background-color: #428bca !important; }
.simpay-checkout-btn:hover { background-color: #037ad0 !important; }
</style>