Como criar uma caixa de luz WooCommerce

Publicados: 2019-06-05

Um dos maiores obstáculos que os consumidores enfrentam ao fazer compras online é encontrar rapidamente as informações sobre os produtos. Na verdade, de acordo com um relatório da Forrester, 45% dos adultos on-line dos EUA abandonarão suas compras on-line se não conseguirem encontrar uma resposta rápida para sua pergunta .

Ao adicionar um lightbox WooCommerce com funcionalidade de visualização rápida à sua loja online, você poderá criar fluxos de usuários suaves e oferecer uma experiência de compra online sem atritos aos seus clientes. Em outras palavras, seus clientes poderão encontrar tudo o que precisam – produtos, detalhes de produtos e informações de preços – sem precisar clicar em páginas de produtos únicos.

Neste artigo, aprofundaremos o motivo pelo qual você pode considerar o uso de um plug-in de lightbox do WooCommerce em sua loja online. Também o guiaremos por um tutorial passo a passo para mostrar como você pode criar uma lightbox WooCommerce com visualização rápida em quatro etapas fáceis.

Vamos começar!

Por que você precisa de um plug-in WooCommerce Lightbox

Como proprietário de uma loja WooCommerce, você provavelmente já sabe que os clientes precisam visitar páginas de produtos individuais para saber mais sobre cada produto. No entanto, isso nem sempre contribui para uma experiência de compra intuitiva e fácil de usar.

Com um plug-in de lightbox do WooCommerce, você pode permitir que os clientes:

  • Visualize imagens, galerias e detalhes de produtos em um lightbox.
  • Selecione as opções do produto (por exemplo, variações e quantidades) e adicione-as ao carrinho de compras.

E a melhor parte é que eles podem fazer tudo isso diretamente da página principal da loja ou das páginas da categoria. Você pode optar por incluir informações como a imagem ou galeria do produto, variações e atributos, seletores de quantidade, botões para adicionar ao carrinho e detalhes adicionais do produto, como preço, avaliações e categorias.

Ao contrário do fluxo de usuário padrão do WooCommerce, ter um plug-in de lightbox do WooCommerce que também possui recursos de galeria permite melhorar a experiência de compra online do seu cliente. Facilita a visualização de imagens e galerias de produtos e encontra rapidamente todos os detalhes importantes do produto WooCommerce. Isso é especialmente útil para lojas online que vendem produtos centrados na imagem, como roupas, joias, fotografia ou itens de presente.

Aqui estão alguns dos principais benefícios de usar um plugin para criar um lightbox com funcionalidade de visualização rápida:

  • Não precisa editar nenhum arquivo php. Depois de instalar e ativar o plug-in, ele criará automaticamente uma lightbox de visualização rápida. Não há necessidade de editar o arquivo functions.php .
  • Estilo personalizado com CSS. Você pode personalizar sua lightbox para combinar com sua marca sem precisar editar arquivos CSS.
  • Apoiar. Você também obtém acesso ao suporte ao cliente dos desenvolvedores do plugin, ou seja, Barn2 Media.

Como usar o WooCommerce Quick View Pro para criar uma caixa de luz de visualização rápida

Aqui está o que você precisa para criar uma lightbox WooCommerce com funcionalidade de visualização rápida:

  • Uma loja movida a WooCommerce com alguns produtos adicionados a ela.
  • WooCommerce Quick View Pro — um plug-in de lightbox WooCommerce responsivo.

Passo #1: Instale e ative o WooCommerce Quick View Pro

Depois de comprar o plug-in WooCommerce Quick View Pro, faça login no seu site WordPress e instale-o e ative-o. Em seguida, vá para a página de configurações do plugin ( WooCommerce > Configurações > Produtos > Visualização rápida ) no painel do WordPress.

Ative a chave de licença do plug-in

Insira a chave de licença que você recebeu no e-mail de confirmação de compra na opção Chave de licença . Clique no botão Salvar alterações na parte inferior da tela para continuar.

Se você visitar a página principal da sua loja virtual, notará que os botões Quick View foram adicionados diretamente nas imagens do produto. Dependendo do tema que você está usando, pode ser algo assim:


E quando você clica nele, ele inicia uma caixa de luz WooCommerce que exibe a imagem, galeria, nome, preço, descrição, SKU e categoria do produto.

Etapa 2: escolha como os clientes iniciam o Lightbox WooCommerce

Com o WooCommerce Quick View Pro, você pode escolher como os clientes lançam a lightbox do produto. Vá para WooCommerce > Configurações > Produtos > Visualização rápida mais uma vez e encontre a seção Opções .

Você pode permitir que os clientes iniciem o lightbox:

  • Mostrar botão de visualização rápida na loja. Clicando no botão Visualização rápida diretamente abaixo de cada imagem do produto. Você também pode alterar o texto do botão e optar por mostrar/ocultar o ícone do botão.
  • Abra a Visualização Rápida clicando no nome ou imagem do produto na loja. Clicando no nome ou imagem do produto.

Você pode optar por habilitar uma das opções ou ambas! Também é importante ter em mente que, por padrão, clicar no nome ou na imagem do produto levará os clientes à página do produto único. Ativar a opção Abrir Visualização Rápida clicando no nome do produto ou na imagem na loja permite desativar esta opção.

Etapa 3: exibir imagens do produto na caixa de luz (com visualização rápida)

Um dos recursos interessantes oferecidos pelo WooCommerce Quick View Pro é que ele permite que você escolha o que deseja exibir na caixa de luz.

  • Produtos centrados na imagem. Se você estiver vendendo produtos centrados em imagens (como roupas, sapatos ou joias), você deve permitir que os clientes visualizem imagens e galerias de produtos na lightbox com zoom de imagem.
  • Produtos com especificações e detalhes. Se você estiver vendendo produtos por atacado, peças de computador ou música, talvez queira exibir apenas os detalhes do produto na lightbox.
  • Produtos personalizáveis. Se você estiver vendendo produtos personalizáveis ​​ou produtos com variações, convém exibir a imagem e os detalhes do produto na caixa de luz.

Na tela de configurações do plug-in, localize a opção de exibição Quick View e decida se deseja exibir apenas a imagem , apenas detalhes do produto ou detalhes da imagem e do produto na visualização lightbox.

Por exemplo, se você decidir exibir apenas os detalhes do produto, sua lightbox do WooCommerce pode ser algo assim:


E se você decidir exibir imagens na lightbox, também poderá optar por exibi-las como Miniaturas ou Marcadores . Aqui está a aparência da sua lightbox WooCommerce se você exibiu imagens e detalhes do produto com a opção de estilo de miniatura da Galeria definida como Balas :

Observação: se você quiser exibir uma galeria de produtos, certifique-se de adicionar imagens à galeria de produtos na tela Editar produto do produto. Você pode fazer isso para cada produto WooCommerce para o qual deseja exibir várias imagens.

Adicione imagens da galeria de produtos na tela Editar produto.

Etapa 4: decida quais detalhes de produtos exibir

Se você optar por exibir detalhes do produto (ou imagem e detalhes do produto) na lightbox do WooCommerce, também terá a opção de decidir quais detalhes do produto incluir na lightbox de visualização rápida.

Na página de configurações do plug-in, você pode usar a opção Detalhes do produto para marcar quais detalhes do produto aparecem na lightbox:

  • Avaliações
  • Preço
  • Pequena descrição
  • Botão adicionar ao carrinho
  • Metainformações (como SKUs e categorias)

Se, por exemplo, você não quiser exibir as opções de compra, basta deixar a caixa de seleção do botão Adicionar ao carrinho desmarcada. Sua lightbox do WooCommerce pode ser algo assim:

Conclusão

Uma lightbox WooCommerce com visualização rápida permite que os clientes:

  • Encontre rapidamente os detalhes do produto que eles estão procurando
  • Veja as imagens do produto
  • Selecionar variações
  • Adicionar produtos ao carrinho

… sem ter que visitar a página de um único produto primeiro.

O WooCommerce Quick View Pro permite que os usuários adicionem uma caixa de luz com funcionalidade de visualização rápida às páginas principais da loja e às páginas de categorias. Também facilita a personalização da aparência da lightbox e de como os clientes interagem com ela.

Você concorda que uma lightbox WooCommerce com funcionalidade de visualização rápida melhora a experiência de compra online dos clientes? Compartilhe seus pensamentos na seção de comentários abaixo!