Duas colunas na vitrine mobile - Tema Padrão

Opa amigo tudo bem, então eu coloquei o código porém não aparece coisa alguma, só o topo, será
que estou fazendo algo errado??? Tem que mudar algo na listagem dos produtos??? Poderia me ajudar?

Olá DanielP. Use o código a seguir:

Descrição: A seu critério
Local de publicação: Rodapé
Página de publicação: A seu critério
Tipo: JavaScript

$(document).ready(function(){
// script exibir banner tarja no mobile
$('.row-fluid.banner.hidden-phone').removeClass('hidden-phone');
});
5 curtidas

Boa noite, @douglaswp!

Usei o código no meu site para deixar dois produtos por linho no mobile, deu certo, porém entre a imagem do produto e a sua descrição ficou um espaço bem grandinho e em relação ao preço tbm. Poderia me ajudar??Vlw!!
meu site: www.fricotesdeluxo.com.br

Douglas, é possivel colocar 5 colunas?

Douglas, bom dia.

tem como estabelecer o tamanho e altura da caixa do produto deixando os dois alinhados?

poderia me passar o codigo?

Galera, usei o código disponibilizado aqui, mas aconteceu comigo o que aconteceu com algumas pessoas, de em uma linha aparecerem 2 produtos e na outra linha aparecer 1, mesmo na plataforma da LI eu tendo setado para 4 produtos por linha, no desktop! Então fiz uma alteração no código que deu certo! Ficaram exatamente 2 por linha e alinhados. Segue o código:

@media (max-width: 768px){#listagemProdutos > ul{display:block;justify-content:center;align-items:center}#listagemProdutos > ul li.listagem-linha ul{display:inline-block;align-items:center;justify-content:center}#listagemProdutos > ul li.listagem-linha ul li{box-sizing:border-box;float:left;width:50% ;margin:0 0 15px}.listagem.com-caixa .listagem-item{border:0;min-height:368px}.listagem.com-caixa .listagem-item .imagem-produto{border:0;padding:0}.listagem .listagem-item .info-produto{border:none!important;padding:5px 0}.listagem .listagem-item .info-produto a.nome-produto{min-height:110px;display:flex;align-items:center}.busca .botao-busca{padding:5px 14px!important}.listagem .listagem-item .acoes-produto-responsiva,#btn-top{display:none!important}.preco-produto s.preco-venda{display:block;font-size:14px}.preco-produto .desconto-a-vista, .preco-produto strong.titulo{font-size: 11px !important}.preco-venda {display:block;font-size:12px !important;}}

6 curtidas

Douglas, estou inserindo esse codigo no “Editar CSS” e não está funcionando, poderia me ajudar?
www.griffistore.com.br

Muito Obrigado !

Estava procurando esta opção para em mobile os produtos carregarem na pagina e não em rolagem !

Ajudou muito !

Olá @Wolf, blz? Sua loja está muito show de bola cara, parabéns!
Seria muito te pedir os códigos que vc usou na pagina principal, para tentar ir trabalhando alguma coisa aqui? Não fazer igual mais ter uma noção e aprender um pouco. Valeu abs!

1 curtida

Opa, obrigado.
Me passa seu email q eu te envio um doc c os códigos, ai vc muda as cores,
link dos banners, etc…
Abraço

1 curtida

Agradeço muito @Wolf !
contato.richardson@gmail.com
Muito sucesso pra você! E assim que tiver alguma coisa pronta te envio o link, pra ver como ficou…
Abraço

Enviei amigo, use e seja feliz!!!
Obs: Muda a cor ai pelo menos rsrsrsr

Ola!
Preciso de ajuda para criar a coluna para aparecer dois produtos por linha via CSS
se algum puder me ajudar, minha loja é na plataforma tray…
se algum poder me contate
dou gratificação ou pagamento por esse codigo

email
pontocomirati@hotmail.com

aguardo contato de algum para geração do codigo (y)
att

Cara, me ajuda! Preciso deixar ao inves de duas, apenas 1, ou seja 1 produto por rolagem. Apenas no mobile e nas categorias . me ajuda? Clinkz.lojaintegrada.com.br

meus parabens, perfeito esse codigo ai

1 curtida

Boa noite! Inseri esse código no css mas sumiu todos os produtos na versão mobile. Eu copiei e colei no css. Oque sera que fiz de errado.

Obs: no css já havia um código do ícone whatssap que funciona bem, em seguida desse código colei o código informado, o ícone do whatssap continuou funcionando mas, os produtos do mobile sumiu.

Olá! Esta solução se aplica também para o WooCommerce? Estou montando miha loja e percebi que 1 coluna no mobile deixa a página de produtos bem cansativa. Desde já agradeço a atenção.

att,
Claudio

@douglaswppoderia me ajudar… Quando utilizo esse código disponibilizado as imagens somem.

Coloquei este código em minha loja e ficou muito bom no Mobile. Porém liberou rolagem para o lado direito com tudo em branco, ou seja a pagina não ficou fixa, é como se tivesse extensão para direita. Como posso resolver? Muito obrigado

2 curtidas

Boa noite, tenho uma dúvida,
onde colocar esse código para ter 2 colunas de produtos no móbile

@media (max-width: 768px){#listagemProdutos > ul{display:block;justify-content:center;align-items:center}#listagemProdutos > ul li.listagem-linha ul{display:inline-block;align-items:center;justify-content:center}#listagemProdutos > ul li.listagem-linha ul li{box-sizing:border-box;float:left;width:50% ;margin:0 0 15px}.listagem.com-caixa .listagem-item{border:0;min-height:368px}.listagem.com-caixa .listagem-item .imagem-produto{border:0;padding:0}.listagem .listagem-item .info-produto{border:none!important;padding:5px 0}.listagem .listagem-item .info-produto a.nome-produto{min-height:110px;display:flex;align-items:center}.busca .botao-busca{padding:5px 14px!important}.listagem .listagem-item .acoes-produto-responsiva,#btn-top{display:none!important}.preco-produto s.preco-venda{display:block;font-size:14px}.preco-produto .desconto-a-vista, .preco-produto strong.titulo{font-size: 11px !important}.preco-venda {display:block;font-size:12px !important;}}

1 curtida