Como adicionar a página de checkout de ícones de pagamento personalizados do WooCommerce

Deseja adicionar um ícone personalizado do WooCommerce Payment Gateway para a página de checkout? Neste post, mostrarei como adicionar rapidamente os ícones de pagamento personalizados à página de checkout do WooCommerce. Este artigo contém uma descrição detalhada das etapas para adicionar rapidamente os ícones do WooCommerce Payment Gateway à página de checkout.

Editar seus arquivos de tema nem sempre é a maneira segura de personalizar o WooCommerce – Eu tirei o fardo de adicionar ícones de pagamento em qualquer lugar do seu site criando um plugin WooCommerce Payment Icons que você pode encontrar aqui.

Este plugin vem com uma maneira fácil de adicionar ícones SVG com mais de 65 botões de métodos de pagamento! Você também pode fazer upload do banner de pagamento se não gostar do SVG e também pode usar um código de acesso para mostrar os pagamentos aceitos em qualquer lugar da sua loja WooCommerce. Confira aqui atualmente a um preço com desconto.

Se você estiver executando uma loja WooCommerce, provavelmente está familiarizado com o conjunto padrão de ícones de cartão de crédito. Para alguns, eles podem parecer bons, mas se você os abrir em uma tela de alta resolução, eles podem parecer um pouco embaçados. Além disso, eles parecem um pouco desatualizados.

Se você estiver procurando por um design personalizado e claro que possa implementar, este artigo o guiará. Idealmente, o melhor design de ícone seria adicionar formas de botão curvas personalizadas que tenham sombras falsas.

Ícones personalizados do gateway de pagamento WooCommerce

Na maioria dos casos, você deseja adicionar ícones de alta resolução que sejam bem dimensionados em dispositivos móveis e tenham uma ótima aparência. Existem várias fontes onde você pode obter esses ícones de pagamento - por exemplo, os mercados de designs criativos oferecem vários ícones de métodos de pagamento gratuitos e premium, como esses ícones de métodos de pagamento definidos no Pixeden, que você pode baixar e usar em sua loja WooCommerce.

Para este tutorial simples, usaremos ícones com uma aparência moderna. A melhor solução seria usar ícones SVG para resolução perfeita em qualquer tela.- Facilitamos o uso do tutorial SVG em nosso plugin WC PayIcons que ajuda a adicionar ícones de pagamento em qualquer lugar da sua loja WooCommerce. Se você fizer uma pesquisa rápida na internet, encontrará uma infinidade de ícones de cartão de crédito que você pode implementar na página de checkout e até no rodapé da sua loja WooCommerce. No entanto, os que se destacaram para mim estão disponíveis no Dribble.

Além disso, eles têm um design agradável que os usuários vão adorar. Esses ícones adicionam uma sensação de confiança à sua página de checkout, pois as pessoas ficam mais cuidadosas na hora de fazer compras online. Estes são os ícones que vamos usar:

Além disso, os disponíveis no Dribble são imagens de métodos de pagamento com os quais o usuário está familiarizado, por exemplo, VISA, MasterCard, PayPal e AMEX.

Isso ajudará a estabelecer uma apresentação mais confiável e confiável, chamando a atenção dos visitantes de primeira viagem. No entanto, você também pode verificar se o seu gateway de pagamento inclui empresas diferentes.

Para ser honesto, apenas alguns artigos na internet tentam mostrar como adicionar ícones personalizados do WooCommerce Payment Gateways usando ganchos e filtros. Este artigo tenta ajudá-lo a adicionar o ícone de cada um dos gateways de pagamento padrão do WooCommerce a qualquer coisa que desejar.

Por isso, algumas lojas WooCommerce só aceitam pagamentos Visa e MasterCard e não querem exibir ícones para outros Gateways de Pagamento WooCommerce como American Express, para não confundir o cliente.

Adicionando ícones de métodos de pagamento Página de checkout do WooCommerce

Você pode usar o mesmo código que compartilhamos abaixo para todos os ícones do WooCommerce Payment Gateway, mas você só precisa encontrar os ícones específicos dos cartões de crédito que está usando para aceitar pagamentos em sua loja online.

Para adicionar os ícones personalizados do WooCommerce Payment Gateway, precisamos filtrar a função woocommerce_gateway_icon , que provavelmente está disponível em cada extensão do gateway. Você precisa adicionar o seguinte código no arquivo functions.php:

 // Adicione ícones de cartão de crédito personalizados à página de checkout do WooCommerce 

add_filter ('woocommerce_gateway_icon', 'njengah_custom_woocommerce_icons');

function njengah_custom_woocommerce_icons() {

    $icon = '<img src="icons-url" alt="stripe" />';

     retornar $ícone;

}

No entanto, você precisa substituir o URL da imagem dependendo da localização da imagem dos ícones de pagamento em seu site.

Você pode fazer upload dos ícones para a pasta de mídia do WordPress e substituir o icons-url no código pelo respectivo caminho da imagem, conforme mostrado na imagem abaixo:

Conclusão

Você pode adicionar rapidamente os ícones de pagamento na página de checkout da sua loja WooCommerce usando o filtro no snippet de código acima e carregando o ícone na sua galeria de mídia. Se você não quiser mexer com o código ou for um desenvolvedor de temas WooCommerce que deseja estender esse filtro e dar aos usuários mais opções, eu abordei minha excelente solução.

Eu construí o melhor plugin de ícones de pagamento que vem com a função shortcode e permite que os usuários adicionem ícones na página de checkout do gateway de pagamento, no widget de rodapé e em qualquer outro lugar usando um shortcode simples. – confira aqui . Este plugin suporta o uso de SVG, que é uma ótima solução para personalizar os ícones de pagamento para se adequar ao seu tema ou esquema de cores do site. Com o plugin WC PayIcons você pode fazer o upload do ícone diretamente da respectiva página do gateway de pagamento, conforme mostrado abaixo:

Artigos semelhantes

1. Como alterar o ícone do PayPal na página de checkout do WooCommerce
2. Como redirecionar para o carrinho após o login no WooCommerce
3. Como ocultar um produto no WooCommerce ou ocultar produtos por categoria ou funções
4. Alterar Prossiga para o texto do checkout no WooCommerce
5. Como ocultar a barra de administração para clientes WooCommerce ou por funções de usuário
6. Como definir produtos em destaque no WooCommerce
7. Como ocultar o subtotal do carrinho no WooCommerce ou remover a linha do subtotal
8. Como obter o nome da categoria de produto atual no WooCommerce
9. Como alterar o texto fora do estoque no WooCommerce
10. Como alterar o texto do botão de checkout no WooCommerce [Place Order]
11. Mais de 30 melhores plugins WooCommerce para sua loja (a maioria é GRATUITA)
12. Como adicionar o ícone de remoção à página de checkout do WooCommerce
13. Como pular o carrinho e redirecionar para a página de checkout WooCommerce
14. Como remover foi adicionado ao seu carrinho Mensagem WooCommerce
15. Como alterar o aviso 'Adicionado ao carrinho' do WooCommerce
16. Como exibir o texto de disponibilidade de estoque no WooCommerce » Em estoque e fora
17. Como mover a descrição sob a imagem no WooCommerce