Não há widget de carrossel de produtos Master Addons WooCommerce Essa é a resposta honesta na frente, e isso economiza uma instalação.
O que funciona são três rotas O Loop Carousel da Elementor Pro é o único que executa uma consulta de produto ao vivo, então escolha se a tira deve seguir seu catálogo O design gratuito do Quadrant Paged Catalog oferece uma vitrine de nove itens com curadoria manual e sem consulta por trás E o widget Featured Product da Master Addons destaca um produto, com o Image Carousel gratuito cobrindo a fotografia do produto Todos os três ficam dentro do mais amplo Widget carrossel elementor família; se você está cuidando de uma loja inteira, o melhores complementos Elementor para WooCommerce o Roundup cobre o resto.
Abaixo: como cada um é construído, então a parte que a maioria dos tutoriais pula, que é onde um carrossel de produtos custa ativamente suas vendas.
Qual método escolher
- Você tem o Elementor Pro e a faixa deve acompanhar o estoque, o preço e as novidades → Carrossel de Loop. é a verdadeira resposta.
- Você quer nove cartões manuscritos que controla até a última linha de cópia → Catálogo Paginado por Quadrante, grátis.
- Você quer empurrar um produto com força → Produto em destaque, Pro.
- Você só precisa de fotos de produtos em uma faixa → Carrossel de Imagens, grátis.
Método 1: Carrossel Loop da Elementor Pro
Elementor Pro resolve isso nativamente, então comece aqui. O Carrossel Loop pega um modelo de Item Loop, um cartão de produto que você desenha uma vez, e aponta para uma consulta WooCommerce Adicione um produto, altere um preço, venda fora de um tamanho, e o carrossel reflete sem que ninguém abra o editor Nenhum addon envolvido.
- Construa o modelo de item de loop. Modelos → Construtor de temas → Item de loop, fonte definida como Produto. Exponha imagem, título, preço, classificação e botão usando tags dinâmicas.
- Solte o widget Loop Carousel na página e selecione esse modelo.
- Defina a consulta. Fonte é onde o trabalho real acontece: todos os produtos, uma categoria, uma etiqueta, à venda, em destaque, ou seleção manual Em seguida, ordem por data, preço, popularidade ou ordem do menu.
- Defina quantos carregar. Este é o total que o carrossel detém, não quantos são visíveis Oito a doze se adequa a uma tira de produtos relacionados Carregue quatro com quatro visíveis e não há nada para rolar.
- Exclua o que não deveria estar lá. Itens fora de estoque e em uma única página do produto, o produto atual. Uma tira de produtos relacionados que inclui o produto que você já está vendo é lida como quebrada.
- Defina slides por visualização por ponto de interrupção. Quatro no desktop, três no tablet, um e meio no celular.
Esse “one e meio no mobile” não é um erro de digitação Um cartão completo mais metade do próximo é o sinal mais forte que uma tira rola Um cartão preenchendo a largura parece um bloco estático e a maioria das pessoas nunca desliza.
A captura é a licença. Loop Carousel é apenas Pro, sem equivalente gratuito no núcleo Elementor. o resumo do plugin do carrossel passa pelos controles de consulta e pelas soluções alternativas gratuitas em detalhes.
Método 2: curadoria manual com Catálogo Paginado por Quadrante (gratuito)
Uma consulta ao vivo às vezes é exatamente errada Uma coleção de página inicial onde você quer escrever cada linha sozinho, ou uma vitrine de produto em um site que não executa WooCommerce em tudo, quer cartões escolhidos a dedo.
O Catálogo Paginado por Quadrante é um dos oito importados gratuitamente Construtor de widgets designs: uma grade de nove caixas de itens paginadas três de cada vez, com um trilho de segmento que mostra onde você está e salta entre as páginas Cada caixa contém uma imagem, um rótulo de categoria, um título, uma linha de cópia e uma estatística, tudo digitado à mão, que é o ponto.
Demonstração ao vivo Baixar Widget JSON
Ele importa no plugin livre através de Master Addons → Widget Builder → Import Widget, em seguida, aparece em Elementor sob Favoritos O resto do conjunto, vinte projetos com oito deles livres, está no modelos de controle deslizante Elementor grátis arredondar.
A advertência honesta: nove itens, corrigidos Não é uma consulta de produto Nada rastreia o estoque, nada atualiza um preço, e um item esgotado fica lá até que você edite a caixa Use-o para um conjunto selecionado que você raramente muda Para qualquer coisa que tenha que seguir o catálogo, volte para o Método 1.
Método 3: Produto em destaque e carrossel de imagens para fotos
Master Addons tem exatamente um widget WooCommerce, e não é um carrossel O Widget de produto em destaque é Pro e faz um trabalho diferente: um produto, com espaço, com imagem, título, preço, descrição e um botão de compra dispostos em bloco, em vez de um cartão em tira.
Isso é muitas vezes a melhor forma de qualquer maneira Um único produto com espaço em torno dele converte mais difícil do que o mesmo produto como um dos quatro cartões alguém tem que rolar passado Use-o para um lançamento, um best-seller, ou o único item uma página de destino é construído em torno.
Para fotografia de produto em uma pista (seis ângulos da mesma jaqueta, um lookbook, uma tira de materiais) o grátis Carrossel de Imagem lida com isso Lightbox, legendas, slides por dispositivo-per-view Se alguns desses ângulos são clipes em vez de fotos, o vídeo carrossel e guia deslizante galeria abrange os widgets que lidam com a reprodução.
Seja claro sobre o que não é: você mesmo adiciona as imagens e elas não vinculam aos produtos, a menos que você defina os links à mão É um carrossel de fotos, não um feed de loja.
Onde um carrossel de produtos pertence
Seja qual for o método que você usar, quatro posições funcionam de forma confiável:
- Produtos relacionados em uma única página do produto. O visitante já está interessado nesta categoria Uma faixa deslizante de quatro alternativas é um serviço.
- Vendas cruzadas e “completar o look.” Acessórios sob um produto principal Ninguém precisa ver todos os doze; eles precisam saber que existem doze.
- Uma coleção em destaque ou sazonal na página inicial. Com curadoria, não exaustiva.
- Visualizado recentemente. Pequeno, pessoal e um carrossel é a forma natural para isso.
O que eles compartilham: os produtos são opcional. A página ainda funciona se ninguém tocar na tira.
Onde isso custa vendas
Nunca coloque um carrossel em uma loja ou página de categoria.
Este é o que acertar Existe uma página de categoria para que as pessoas possam comparar: digitalizar uma grade, localizar a que desejam, clicar Um carrossel mostra quatro produtos e esconde o resto atrás de uma seta, o que transforma a comparação em um exercício de memória O visitante tem que segurar o produto dois na cabeça enquanto olha para o produto seis.
Há um custo de apresentação também Um carrossel e uma grade podem produzir a mesma marcação, mas uma página de categoria que mostra visivelmente seis itens lê como uma categoria fina, tanto para os compradores quanto para qualquer pessoa que julgue a profundidade da página Sua página de loja deve parecer uma loja.
Segunda posição ruim: acima da dobra no celular. Um carrossel de produtos é uma consulta, uma renderização de modelo e uma inicialização de controle deslizante antes que qualquer coisa pinte No topo de uma página de telefone, essa é a sua maior tinta contenciosa gasta em um spinner Coloque um herói estático lá e comece o carrossel abaixo dele.
Adicionar ao carrinho: no carrossel ou não?
Mostrar o botão para produtos simples Esconda - o para os variáveis.
Um produto simples com AJAX add-to-cart na tira é um atalho real: um toque, sem carga de página, atualizações de carrinho Vale a pena ter.
Um produto variável não pode ser adicionado sem escolher um tamanho ou cor, então o botão não faz nada ou salta o comprador para a página do produto Ambos se sentem quebrados Para produtos variáveis, faça do cartão inteiro um link e pule o botão.
Se o seu catálogo misturar ambos, execute dois carrosséis com consultas diferentes, em vez de um layout de compromisso.
Crachás de venda e exibição de preços
Mostre o crachá de venda É a coisa de maior contraste em um cartão de produto e é a razão pela qual as pessoas param de rolar.
Mostre o preço, incluindo os itens originais à venda, porque a comparação é a persuasão.
Os produtos variáveis exibem uma faixa (“£ 20 a £ 45”).Alinhamento de cartas de quebra e quebra de faixas longas e cartas desalinhadas em uma faixa horizontal são muito mais visíveis do que em uma grade. Defina uma altura fixa na linha de preços ou mostre “A partir de £ 20.”
Design de cartão que não parece amador
Três coisas importam mais que o resto.
Alturas iguais do cartão. Os títulos dos produtos variam muito em comprimento, e um título de duas linhas ao lado de um título de uma linha empurra a linha de preços para diferentes alturas Defina uma altura de título fixa com truncamento ou ative a altura automática para que a linha se nivele.
Uma proporção de imagem. Retrato e fotos quadradas de produtos na mesma tira é a única razão mais comum pela qual um carrossel de produtos parece barato Defina uma proporção e deixe-o cortar.
Lacuna entre as cartas. 16 a 24 px. Zero gap faz os produtos sangrarem juntos; muito e quatro cartas param de ler como um conjunto.
Reprodução automática de produtos?
Não, e este não é uma preferência O regra autoplay é diferente para um controle deslizante de herói, onde nada é clicável e a rotação não custa nada.
Os cartões de produto são clicáveis O jogo automático significa que um cartão pode se mover à medida que alguém o alcança, e um comprador que toca no produto errado geralmente não volta e tenta novamente Eles saem O Pause-on-hover cobre a área de trabalho; no toque não há nenhum hover, e o celular é onde a maioria de seus compradores está.
Desligue-o.
Desempenho: quanto custa realmente um carrossel de produtos
Cada produto na consulta é uma leitura de banco de dados mais uma renderização de modelo, e o script do controle deslizante não pode inicializar até que essa marcação exista. Três limites práticos:
- Limite a consulta em doze. Além disso, você está renderizando cartões que ninguém alcança.
- Carregue tudo com preguiça, exceto a primeira linha de imagens visíveis. O carregamento de slides fora da tela é a causa usual de uma página lenta do produto.
- Sirva a imagem do cartão no tamanho do cartão. Uma foto de produto de 2000 px dimensionada em um cartão de 300 px é o download desperdiçado mais comum em um site WooCommerce.
Um carrossel por seção de página é um teto razoável Três carrosséis empilhados em uma página inicial são três controles deslizantes competindo pelo tópico principal em um telefone.
Esquema: não o role à mão
O WooCommerce já gera dados estruturados do Produto em páginas únicas de produtos, e é aí que o Google quer Um carrossel de cartões de produtos em uma página inicial ou página de destino não precisa de sua própria marcação de Produto, e adicioná-lo à mão é uma boa maneira de acabar com dados de preço ou disponibilidade que contradizem a página real do produto.
Se os cartões carrossel se ligam às páginas do produto, e eles deveriam, o caminho de rastreamento está intacto e os dados estruturados vivem onde pertencem Deixe isso em paz.
Perguntas frequentes
Master Addons tem um widget de carrossel de produtos WooCommerce?
No. Master Addons tem um widget WooCommerce, Featured Product, e destaca um único produto em vez de deslizar através de vários Para um carrossel de produtos reais, use o Loop Carousel da Elementor Pro com um modelo de Loop Item de produto Para uma vitrine com curadoria manual no plugin gratuito, importe o design do Catálogo Paginado do Quadrante e preencha você mesmo as nove caixas.
WooCommerce tem um carrossel de produtos?
Não nativamente WooCommerce outputs produtos em grades: página da loja, arquivos de categoria, produtos relacionados Um carrossel deslizante precisa ou Carrossel Loop do Elementor Pro com um modelo de produto, ou um widget de terceiros que adiciona um.
Como faço um carrossel de produtos no Elementor gratuitamente?
O Elementor Livre não possui carrossel de produtos dinâmico, então o caminho livre honesto é um curado à mão: importe o design do Catálogo Paginado por Quadrante por meio de Complementos Mestres → Construtor de Widgets → Importar Widget e digite os nove itens, ou use o Carrossel de Imagens gratuito para fotografia de produtos com links manuais Qualquer coisa que consulte o catálogo precisa automaticamente do Elementor Pro.
Devo usar um carrossel de produtos na página da minha loja?
Não. As páginas de categoria e loja existem para que as pessoas possam comparar produtos de relance, e um carrossel esconde a maioria delas atrás de uma seta Use uma grade nas páginas de listagem e salve carrosséis para produtos relacionados, vendas cruzadas e coleções selecionadas.
Um carrossel de produtos pode mostrar botões de adicionar ao carrinho?
Sim, se você mesmo construir o cartão em um modelo de Item de Loop Coloque o add-to-cart no modelo e cada slide ganha um Mostre-o para produtos simples com AJAX add-to-cart; oculte-o para produtos variáveis, que precisam de uma variação selecionada primeiro, para que o botão falhe ou redirecione.
Quantos produtos devem estar em um carrossel?
Oito a doze carregados, quatro visíveis no desktop Menos de oito e quase não há nada para rolar; mais de doze e a cauda nunca é vista Se você precisar de mais do que isso, o conteúdo quer uma grade.
Por que meus cartões de produto têm alturas diferentes?
Títulos de produtos de diferentes comprimentos empurrar o preço e linhas de botão para diferentes posições Definir uma altura de título fixo com truncamento, ou ligar auto-altura para que a linha corresponde ao cartão mais alto Definir uma proporção de imagem fixa também, porque retrato misto e fotos quadradas causam o mesmo problema.
Próximo
Filmar um produto de seis ângulos em vez de listar seis produtos? é isso tutorial carrossel imagem, que cobre o lado da caixa de luz e da legenda.
Tudo em forma de carrossel, gratuito e Pro, está no hub widget carrossel, e a repartição livre versus Pro mostra exatamente o que uma licença acrescenta.
O Catálogo Paginado por Quadrante importa gratuitamente. Os outros doze projetos precisam de licença e o página preços mostra em qual nível cada um se enquadra.
