Selo PIX - Pagina Checkout - Mercado Pago e PagHiper

[soupapamikeoficial]

Passando para compartilhar essa configuração que deu certo em nossa loja para colocar o selo do PIX na página de Checkout para usuários do Mercado Pago e PagHiper.

Configurar no Código HTML
Descrição: Pix - Checkout
Local publicação: Rodapé
Página publicação: Página de checkout
Tipo: javaScript

Segue o código:

$(function(){

$("#pagamento18 .forma-conteiner").append('<img src="https://cdn.awsli.com.br/404/404737/arquivos/PIX.png" style="margin: 0 0 0 20px;" alt="Pague com MercadoPago - Pix">')

$("#pagamento6 .forma-conteiner").append('<img src="https://cdn.awsli.com.br/404/404737/arquivos/PIX.png" style="margin: 0 0 0 5px;" alt="Pague com Boleto ou Pix">') });

[DNA_Aromas]

Muito obrigado pelo código.
Sucesso!!!

[Ronaldo_LG]

Obrigado por compartilhar o código. Paz e Luz de Jesus em seu caminho. Abraços.

[soupapamikeoficial]

Amém. Muito obrigado. Te desejamos muito sucesso. Abraços

[FabioLourenco]

Fiz no meu mas por alguma razão nao funcionou, adicionei o ; no final da primeira linha, mas mesmo assim não apareceu.

[estampadoscativar]

Olá Fabio, também tive um pouco de dificuldade, mas consegui resolver.

Em nossa loja a forma padrão de pagamento é o PagSeguro, então usamos ele como “Checkout Transparente”, ou seja, quando não precisa sair do nosso site para efetuar o pagamento.

Já a nossa recebimento via PIX é do MercadoPago, então deixamos nele a opção de “Checkout PRO” ativada, conforme print abaixo:

E lá no código, para facilitar, vou colocar o mesmo código do amigo soupapamike, então todos os créditos a ele tá?

E no código tem que deixar assim:

$(function(){
  <!-- Logo PIX - Mercado Pago -->
 $("#pagamento18 .forma-conteiner").append('<img src="https://cdn.awsli.com.br/404/404737/arquivos/PIX.png" style="margin: 0 0 0 20px;" alt="Pague com MercadoPago - Pix">')

  <!-- Logo PIX - Boleto-->
   $("#pagamento6 .forma-conteiner").append('<img src="https://cdn.awsli.com.br/404/404737/arquivos/PIX.png" style="margin: 0 0 0 5px;" alt="Pague com Boleto ou Pix">')

});

Obs.: Se o seu boleto tiver desconto, pode ser que o layout fique quebrada dependendo do tamanho e font que você usa em seu tema. Segue exemplo:

Espero que ajude.

[Leonardo_Vicentini_F]

veja se isso ajuda!

Icone / Imagem / Selo PIX - Pagina Checkout | Ajuste Texto Desconto

Boa tarde! Gostaria de pedir uma nova ajuda. Na minha página de checkout notei um problema quanto ao valor de Frete e Descontos. Note no print da visão desktop que aparecem normalmente o frete e o desconto, porém na versão mobile, o valor do Desconto fica recuado do lado esquerdo e o valor do frete simplesmente some. Conseguiriam me ajuda nesse sentido? O valor não está errado, mas fica feio achei. [image] Visão mobile (fiz o teste no celular e no desktop reduzindo a tela e ambos se compor…

[rubensjuniorti]

@soupapamikeoficial

https://cdn.awsli.com.br/404/404737/arquivos/PIX.png

Parabéns muito bem!!!

[Keromais]

Olá, obrigada!
Apareceu no checkout, porém no rodapé não aparece. Consegue me ajudar?

Obrigada! Carina.

[Usuario_garimpo]

Nossa você ajudou uma alma desesperada… muito obrigada !

[TATIANEK]

No meu aconteceu a mesma coisa.
Você conseguiu resolver? Apareceu no rodapé?

[Leonardo_Vicentini_F]

Icone / Imagem / Selo PIX - HOME

Para quem já está recebendo em PIX e quer colocar o selo na home. PS. Pode ser necessário mudar o código ou inserir CSS para aplicar em temas $(function(){ if ($(".gateways-rodape").length) $(".gateways-rodape").append('<li class="col-md-3"><img src="https://cdn.awsli.com.br/950/950939/arquivos/PIX.png" alt="PIX"></li>'); }}; para o meu caso teve que ficar <style> .gateways-rodape li:nth-child(odd) { border-right: none; } .gateways-rodape li:nth-child(4) { border-left: 1px solid #dd…

[TATIANEK]

@Icone / Imagem / Selo PIX - HOME

.gateways-rodape li:nth-child(odd) { border-right: none; } .gateways-rodape li:nth-child(4) { border-left: 1px solid #dd…

@Leonardo_Vicentini_F
Oi Leonardo, não tenho conhecimento em como fazer.
Eu fiz assim: peguei a primeira parte que você enviou após a palavra temas, copiei e colei no Editar CSS, e não ouve mudança.
Depois apaguei e colei a segunda parte que você enviou, e que deu certo pra você, copiei e colei lá e também não resolveu.
É assim mesmo Leonardo? O que estou fazendo errado? Vou colocar o anexo pra você ver como coloquei lá.
E muito obrigada pela atenção e ajuda.

[FabianoBrassioli]

@TATIANEK precisa inserir o código que deu certo para ele em outro local.
No Incluir Código HTML e preencher conforme abaixo. Veja se dá certo assim.

[TATIANEK]

@FabianoBrassioli
Fiz como você me indicou e também não deu certo. Acho que o código que deu certo para o @Leonardo_Vicentini_F e que eu estou copiando e colando, não está completo, acho que falta uma parte.
Veja abaixo como eu fiz.
Obrigada pela ajuda.

[FabianoBrassioli]

@TATIANEK tenta deixar no conteúdo somente essa parte. Veja se funciona. No meu caso só precisou dessa parte.

<script>
$(function(){ 
	if ($(".gateways-rodape").length) $(".gateways-rodape").append('<li class="col-md-3"><img src="https://cdn.awsli.com.br/950/950939/arquivos/PIX.png" alt="PIX"></li>');
});
</script>

[TATIANEK]

Não deu certo também Fabiano.
Agradeço a sua atenção e ajuda.