Como Adicionar CSS Personalizado ao WP Simple Pay

Você precisa estilizar seus formulários de pagamento do WP Simple Pay com CSS personalizado? Existem algumas maneiras de adicionar CSS personalizado ao seu site WordPress para seus formulários e outros elementos da página.

Você pode desativar os “estilos opinativos” do WP Simple Pay e herdar os estilos do seu tema visitando Simple Pay Pro → Configurações → Geral → Avançado.

1. Edite o arquivo de folha de estilos do seu tema diretamente (geralmente style.css). Tenha cuidado com quaisquer atualizações de tema que sobrescreverão suas alterações, e é por isso que recomendamos #2 ou #3.
2. Adicione um arquivo CSS separado ao seu tema e use a função wp_enqueue_style para referenciá-lo em seu functions.php ou em um plugin personalizado separado.
3. Adicione CSS ao cabeçalho do seu tema usando o plugin gratuito WP Code. Vá para Code Snippets → Header & Footer, e então adicione seu CSS como mostrado abaixo.

Se você precisar remover os estilos do plugin de algumas páginas, veja este snippet em nossa biblioteca de snippets de código.

Dicas de Personalização

Neste momento, não temos um guia de estilo CSS para os formulários de pagamento do WP Simple Pay. A melhor maneira de encontrar os nomes de classe e ID que você precisa modificar é inspecionar os elementos da página usando as ferramentas de desenvolvedor do seu navegador.

Aqui está um ótimo guia para começar a usar este método: Noções básicas de inspeção de elementos: Personalizando o WordPress para usuários DIY

As classes e IDs de elementos de formulário do WP Simple Pay tendem a começar com simpay-.

Aqui está um exemplo onde o ID do formulário é 83 e o ID do campo de texto é 4:

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

Aqui está um exemplo de como alterar a cor do botão de checkout de verde para azul ao usar as opções de exibição de formulário Embutido ou Sobreposição.

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