Quero colocar a seguinte informação ao lado da forma de pagamento boleto na Página do Produto: O boleto será gerado após a finalização de sua compra. Imprima e pague no banco, loteria ou pela internet.
Tentei fazer por conta própria, mas não consegui.
Se alguém souber o código CSS para essa função e puder passar agradeço.
A ideia é ficar como na foto abaixo:
Olá Pedro, boa noite, tudo bem? Chegou a tentar usar pseudo elementos como after? Você pode definir um texto através do content e toda a aparência com demais propriedades css. Se quiser, me envia um link de exemplo que eu te mando o código por aqui.
Abraços!
Legal isso, mais uma destas coisas simples que poderiam ser implantadas na Loja inteira, pois hoje este quadrado fica vazio, e muita gente fica com dúvida.
É justamente por isso que quero colocar essa informação.
Muitos clientes ficam em dúvida em relação ao boleto. Colocando essa informação já ajuda bastante.
É sempre bom colocarmos o máximo de informação para ajudar o cliente na hora da compra.
Principalmente na página do produto.
1 curtida
Boaa,
onde posso alterar?
abraço
Olá Pedro, boa noite. Já conseguiu resolver isso?
@Pedro, me envia a url dessa página que eu vejo se é possível fazer essa estilização via CSS, considerando as limitações de customização e te falo.
É para colocar na página dos produtos. Este é o link do meu site >> https://www.swanyslingerie.com.br É para aparecer essa informação ao lado da forma de pagamento boleto, conforme foto abaixo.
Olá Pedro, boa tarde.
Pelo que eu to vendo aqui da estrutura desses elementos na loja somente via CSS realmente fica muito difícil de inserir esse after ali, porque o elemento que aceitaria esse pseudo elemento (que é o elemento que tem o preço do produto), não tem uma classe ou um atributo específicos para ele. Além disso ele vem antes (semanticamente falando) do que a imagem do boleto. No CSS só é possível selecionar o elemento “irmão” que vem depois e não os que vem antes. A imagem do boleto é possível de selecionar com o seletor .parcelas-produto span.accordion-toggle img[alt=“Boleto Bancário”], mas esse elemento não aceita pseudos elementos.
Vejo duas formas de você resolver o seu problema:
-
Alterar a imagem que tem o código de barras e o boleto bancário com o texto que você deseja exibir;
-
Escolher outro local para inserir essa informação que tenha um seletor mais específico com um elemento que aceite pseudos elementos.
Caso não seja possível alterar a imagem, eu colocaria ali naquela parte que tem aquela mensagem “
Em caso de dúvidas fale conosco no chat ou WhatsApp 8199646-7764. 
Garantia total. Reembolso completo se você não receber o seu pedido. 
Ganhe Brinde!! Nas Compras acima de R$ 100,00 Ganhe um Par de Algemas de Renda.”, que é feito via CSS com o seletor .parcelas-produto .accordion::after.
Espero ter ajudado.
Pedro, simples de resolver… Jquery: , Append, Prepend, Insert, etc…
agora estou no trabalho, então não consigo parar pra ajudar, mas ainda hoje faço o códigozinho pra você, blz? 
Resolvido Pedro, ta na mão! 
CSS
.parcelas-produto img[alt^="Boleto Bancário"] {
float: left;
margin-top: 4px;
}
.parcelas-produto p {
float: left;
width: 70%;
line-height: 14px;
}
JS
$('<p>O boleto será gerado após a finalização de sua compra. Imprima e pague no banco, loteria ou pela internet.</p>').insertAfter('img[alt^="Boleto Bancário"]');
2 curtidas
@Michel_de_Moraes, sem querer abusar, dúvida de quem é leigo.
O CSS eu vou no “editar CSS” e acrescento os códigos indicados.
Mas e o JS? Como insiro?
Muito obrigado pela ajuda e disposição, incrível como os usuários da plataforma, com boa vontade, conseguem fazer coisas que a Loja Integrada jura serem dificílimas e impossíveis e não aplica, não faz, enrola, empurra com a barriga…
@RenatoRea o JS vai ser da seguinte forma:
Clica na engrenagem no topo do painel adm e escolhe a opção Incluir código HTML.
Clica no botão verde Adicionar código >> Descrição: Aqui você coloca a descrição do código >> Local publicação: Rodapé >> Página publicação: Página do Produto >> Tipo: JavaScript.
Seguindo esses passos você consegue. Se tive dúvida é só falar.
1 curtida
Hahaha estou me sentindo uma anta aqui, JS = JavaScript, essa me escapou! rs
Já fiz e deu certinho, ótimo! Muito obrigado à todos!
Agora fiquei com uma dúvida aqui, gostaria de colocar uma explicação também no PagSeguro e PayPal Plus.
É possível alterar o código da forma abaixo?
PagSeguro
.parcelas-produto img[alt^="PagSeguro"] {
float: left;
margin-top: 4px;
}
.parcelas-produto p {
float: left;
width: 70%;
line-height: 14px;
}
JS
$('<p>Você será direcionado para o ambiente do PagSeguro para realizar o pagamento ./p>').insertAfter('img[alt^="PagSeguro"]');
E para o PayPal PLus:
.parcelas-produto img[alt^="PayPal Plus"] {
float: left;
margin-top: 4px;
}
.parcelas-produto p {
float: left;
width: 70%;
line-height: 14px;
}
JS
`$('<p>Até 5 vezes sem juros!</p>').insertAfter('img[alt^="PayPal Plus"]');`
Não manjo de programação e não sei se estes são os nomes corretos para inserir, é por aí mesmo? Cada um deve ser feito como uma entrada separada?
Agradeço!
@Michel_de_Moraes e @Pedro, a LI deve ter mudado algo e este código ficou todo truncado, vejam anexo (aqui já tinha excluído o texto via JS, estava só com a formatação CSS)…
Sabem o que pode ter ocorrido?
