Inserir 2 colunas de produtos vitrine Tema Galeria

Código CSS/HTML
1

Olá!! Gostaria de saber se alguém tem o CSS/HTML para deixar em duas colunas os produtos da vitrine na versão mobile ao invés de uma coluna somente. Uso o Tema Galeria.

Agradeço muito a ajuda

1 curtida
2

image
image970×805 36.5 KB

$(document).ready(function () {
    if ($(window).width() >= 360 && $(window).width() < 768) {
        let qtd = typeof qtd_prod_mobile === 'number' ? qtd_prod_mobile : 2;

        if (qtd === 2) {
            $('.listagem-linha').addClass('listagem-linha-celular');

            if ($('.pagina-inicial').length) {
                setTimeout(function () {
                    if ($('.listagem-linha-celular').hasClass('flexslider')) {
                        let larguraItem = $('.produtos-carrossel').width() / 2;
                        $('.listagem .listagem-linha li').width(larguraItem);

                        $('.listagem-linha .flex-viewport ul').each(function (_, item) {
                            $(item).append($(item).html());
                        });

                        $('<style>')
                            .text('.listagem .listagem-linha li { width: ' + larguraItem + 'px !important; }')
                            .appendTo('body');
                    }
                }, 200);
            }
        }
    }
});

Na imagem abaixo verá que o botão de “VER MAIS” está desalinhado, afinal, os produtos estão um ao lado do outro e como possuem nomes e preços diferentes, geram esse desalinhamento. O código CSS abaixo corrige essa questão!

@media screen and (max-width: 768px) {
  .listagem .span3 .listagem-item .nome-produto, .listagem .produtos-carrossel[data-produtos-linha="4"] .listagem-item .nome-produto {
      min-height: 140px !important;
  }
}

image
image433×610 33.8 KB

image
image395×595 21.8 KB

1 curtida
3

Vi também que o menu está descentralizado e as setas também. Da uma olhada nesta solução.

1 curtida
4

Olá!! Muito obrigada por sua disponibilidade em ajudar!! Inseri o CSS das duas colunas e apresentou “ERRO DE SINTAXE” em algumas linhas. Vou anexar print.
Os de amis códigos não testei ainda, mas muito grata pela observação.

Captura de tela 2025-04-23 152058
Captura de tela 2025-04-23 1520581113×625 42 KB

1 curtida
5

O código tem que ser inserido como Javascript, conforme no primeiro print.

1 curtida
6

Perdão, não tinha atentado a isso!
E funcionouuuu! Nem estou acreditando!
O CSS do botão VER MAIS já inseri mas ainda não modificou. Talvez eu tenha que rever mesmo as nomenclaturas!
Mas muito, muito obrigada pela ajuda.

7

As vezes demora atualizar mesmo! Porém aqui já está funcional.

image
image1523×905 102 KB

1 curtida
8

Siim! Já deu certo aqui tb!! Muito obrigada!
Sabe se é possível ficar em duas colunas tb dentro das categorias, por exemplo: em brincos, colares, etc…ou somente na página inicial mesmo (vitrine)?

9

Verdade, o código está baseado em produtos com carrossel e na página da categoria não tem isso. O código em questão é CSS.

body:not(.pagina-inicial) .listagem-linha > ul {
  display: flex;
  flex-wrap: wrap;
}

body:not(.pagina-inicial) .listagem-linha > ul > li.span3 {
  width: 50%;
  padding: 10px;
}

body:not(.pagina-inicial) .listagem-item {
  width: 100%;
}
2 curtidas
10

Ninja!!! Funcionou perfeitamente.
Muito obrigada mais uma vez