Como adicionar visualização rápida no WooCommerce

Deseja incluir o recurso de visualização rápida em seu site? Saiba como adicionar e personalizar um botão de visualização rápida em sua loja WooCommerce .

Em todas as lojas WooCommerce, os clientes podem ver informações detalhadas sobre os produtos nas páginas dos produtos. No entanto, eles não podem ver a descrição, variações e outras informações anexadas ao produto na página padrão da loja. Quando os compradores estão na página da loja, eles precisam clicar na imagem do produto ou no link para acessar a página do produto e ver mais informações sobre esse produto. Isso não é ideal porque adiciona uma etapa ao processo de compra e se os clientes quiserem continuar navegando em seus produtos, eles precisam voltar para a página da loja.

No entanto, você pode adicionar um botão de visualização rápida na página da loja WooCommerce e melhorar a experiência dos usuários . Dessa forma, os compradores poderão ver todas as informações sobre um produto sem sair da página da loja. Vamos dar uma olhada mais de perto no que uma visualização rápida de botão faz e como adicioná-la à sua loja .

O que é um botão de visualização rápida?

Um botão de visualização rápida permite que os clientes vejam os detalhes de um produto diretamente na página da loja e sem precisar abrir a página do produto de cada item em que estão interessados. Dessa forma, os compradores podem navegar pelos produtos da página da loja melhorando o experiência de compra. Quando o usuário clicar no botão de visualização rápida, um pop-up será aberto exibindo todas as informações relevantes sobre o produto na mesma página. Não há necessidade de recarregar a página da loja ou redirecionar os usuários para outra página.

Como adicionar um botão de visualização rápida à página da loja WooCommerce

A maneira mais fácil de adicionar um botão de visualização rápida à sua loja é usar um plug-in. Para esta demonstração, usaremos o Direct Checkout, um dos melhores plugins de checkout para WooCommerce. Embora o Direct Checkout tenha uma versão gratuita, você precisará da versão premium para adicionar botões de visualização rápida. Você pode escolher qualquer um dos 3 planos premium que começam em apenas 19 USD (pagamento único).

Instalando e ativando o Direct Checkout

Primeiro, instale o Checkout Direto. Você precisa obter a versão gratuita aqui e uma das versões premium neste link. Lembre-se de que você precisa instalar e ativar a versão gratuita e premium do plug-in para desbloquear o recurso de visualização rápida. Depois de instalar ambos, vá para WooCommerce > Direct Checkout > Arquivos e ative a opção Adicionar botão de visualização rápida . Nesta seção, você também pode substituir o texto padrão do botão Adicionar ao carrinho. Observe que isso não afetará o comportamento do botão de visualização rápida de forma alguma. É isso! Você acabou de adicionar um botão de visualização rápida à página da sua loja WooCommerce ! Esta é a aparência do botão se você estiver usando o tema StoreFront: E quando você clicar no botão de visualização rápida, o pop-up modal aparecerá e será semelhante a este: Observe que todas as informações do produto são exibidas no pop-up de visualização rápida. Até o botão Adicionar ao carrinho está lá, o que permite que os clientes adicionem produtos aos seus carrinhos diretamente do pop-up. Agora, vamos dar um passo adiante e ver como personalizar o botão de visualização rápida com um pouco de CSS.

Como personalizar a visualização rápida do WooCommerce

Nesta seção, você aprenderá a personalizar o botão de visualização rápida e o pop-up modal de visualização rápida usando um pouco de CSS . Os scripts CSS são muito úteis para muitas tarefas, portanto, mesmo se você for iniciante, vale a pena aprender alguns conceitos básicos de CSS. Agora, vamos dar uma olhada em como personalizar diferentes elementos do botão de visualização rápida e do pop-up modal de visualização rápida.

Observe que você deve colar os seguintes códigos no arquivo style.css do tema filho ou na caixa CSS Adicional do personalizador de temas. Se você não tiver um tema filho, confira este post para criar um ou usar um desses plugins.

3.1 Edite o botão de visualização rápida

Alterar a largura do botão de visualização rápida

li.product .qlwcdc_quick_view.button{
width: 40%;
}

Edite a cor de fundo

li.product .qlwcdc_quick_view.button{
background: #79b0f7;
}

Edite a cor do ícone

li.product .qlwcdc_quick_view.button{
color:red;
}

Adicione bordas arredondadas

li.product .qlwcdc_quick_view.button{
border-radius: 5px;
}

Use uma imagem como um botão

li.product .qlwcdc_quick_view.button{
width:75px;
content:url('https://pbs.twimg.com/profile_images/476389199621275648/G6c2Zoe__400x400.jpeg');
}

Substituir ícone por texto

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
content: "quick view text";
color:white;
background:black;
padding:10px;
}

Adicionar efeito de foco

li.product .qlwcdc_quick_view.button:hover{
color:black;
background:yellow;
}

3.2) Edite o pop-up modal de visualização rápida

Agora, vamos ver algum código para personalizar o pop-up modal de visualização rápida.

Alterar a cor de fundo

#qlwcdc_quick_view_modal>div>div>div.modal-body{
background:greenyellow;
}

Ocultar meta do produto

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div .summary .product_meta{
display:none;
}

Ocultar quantidade e adicionar ao carrinho

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} #qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} Acabamos de dar uma olhada em diferentes scripts para personalizar diferentes aspectos do botão de visualização rápida no WooCommerce. Se você quiser saber mais sobre o que você pode fazer com CSS, confira este guia.

Scripts CSS de amostra

Agora que você aprendeu como adicionar e fazer personalizações básicas na visualização rápida no WooCommerce, vamos dar um passo adiante. Abaixo, você encontrará três exemplos para editar o botão de visualização rápida e adicionar um pouco de sabor à sua página de loja.

Botão de círculo com ícone personalizado

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
font-family: "Font Awesome 5 Free";
content: "\f002";
color:white;
background:black;
padding: 15px;
border-radius:50%;
}

Botão de texto estilizado

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
content: "view";
color:black;
background:#eeeeee;
padding:8px 18px;
border:3px solid brown;
border-radius:15px 3px;
}

Usando uma imagem como um botão

li.product > a.button.add_to_cart_button{
bottom:30px;
position:relative;
}
li.product .qlwcdc_quick_view.button{
background:transparent;
width:85px;
content:url('https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/Quick-Look-Droplet-icon.png');
}

Conclusão

Em suma, adicionando um botão de visualização rápida, você melhorará a experiência de compra de seus clientes. Eles poderão ver os principais detalhes do produto diretamente na página da loja sem precisar abrir a página do produto de cada item que desejam ver. A maneira mais fácil e conveniente de adicionar um botão de visualização rápida no WooCommerce é usar o plugin Direct Checkout. Esta ferramenta permite adicionar o botão de visualização rápida na página da loja em poucos cliques. Então, se você quiser dar um passo adiante e personalizar tanto o botão quanto o pop-up, você pode usar um pouco de CSS.

Você conhece outras maneiras de incluir um botão de visualização rápida em sua loja? Você teve algum problema ao seguir nosso guia? Deixe-nos saber na seção de comentários abaixo e faremos o nosso melhor para ajudá-lo.

Para obter mais informações sobre como personalizar sua loja, recomendamos que você confira os seguintes guias:

• Como personalizar a página da loja WooCommerce
• Como personalizar o botão Adicionar ao carrinho no WooCommerce
• Edite a página de checkout do WooCommerce