Cómo agregar CSS personalizado a WP Simple Pay
¿Necesitas estilizar tus formularios de pago de WP Simple Pay con CSS personalizado? Hay varias formas de añadir CSS personalizado a tu sitio de WordPress para tus formularios y otros elementos de la página.
- Edita directamente el archivo de hoja de estilos de tu tema (normalmente style.css). Ten cuidado con las actualizaciones del tema que sobrescribirán tus cambios, por eso recomendamos la opción #2 o #3.
- Añade un archivo CSS separado a tu tema y usa la función wp_enqueue_style para referenciarlo en tu functions.php o en un plugin personalizado separado.
- Añade CSS a la cabecera de tu tema usando el plugin gratuito WP Code. Ve a Fragmentos de Código → Cabecera y Pie de Página, y luego añade tu CSS como se muestra a continuación.
Si necesitas eliminar los estilos del plugin de algunas páginas, consulta este fragmento en nuestra biblioteca de fragmentos de código.
Consejos de personalización
En este momento no tenemos una guía de estilos CSS para los formularios de pago de WP Simple Pay. La mejor manera de encontrar los nombres de clase e ID que necesitas modificar es inspeccionar los elementos de la página usando las herramientas de desarrollador de tu navegador.
Aquí tienes una guía excelente para empezar a usar este método: Conceptos básicos de Inspeccionar Elemento: Personalizar WordPress para usuarios DIY
Las clases e IDs CSS de los elementos del formulario de WP Simple Pay tienden a empezar con simpay-.
Aquí tienes un ejemplo donde el ID del formulario es 83 y el ID del campo de texto es 4:
<style>
#simpay-form-83 #simpay-text-4 { display: none; }
</style>Aquí tienes un ejemplo de cómo cambiar el color del botón de pago de verde a azul al usar las opciones de visualización de formulario Embebido o Superpuesto.
<style>
.simpay-checkout-btn { background-color: #428bca !important; }
.simpay-checkout-btn:hover { background-color: #037ad0 !important; }
</style>¿Todavía tienes preguntas? ¡Estamos aquí para ayudarte!
Última modificación: