Como criar um controle deslizante de produto WooCommerce (2 plugins gratuitos)
Quanto maior o seu catálogo de produtos, mais difícil fica para os visitantes encontrarem o que desejam. Navegar página após página na esperança de localizar o item certo pode se tornar uma tarefa árdua. É aí que um controle deslizante de produto pode ser útil.
Com os controles deslizantes do produto, você pode exibir quantos itens desejar em uma única página e facilitar a navegação no seu catálogo. O controle deslizante pode ocupar o espaço necessário, dependendo do design escolhido.
Neste artigo, mostraremos alguns de nossos exemplos favoritos de controles deslizantes de comércio eletrônico. Em seguida, mostraremos como criar um controle deslizante de produto WooCommerce usando dois plugins diferentes, os quais oferecem uma versão gratuita.
Vamos começar!
Contents
Os benefícios de usar um controle deslizante de produto em sua loja
Os controles deslizantes estão em toda parte na web. Muitos sites agora usam galerias deslizantes como parte de suas seções de heróis:
Se você deseja exibir comentários ou depoimentos de clientes, os controles deslizantes também podem ser uma excelente opção:
No entanto, poucos tipos de sites podem obter tanta quilometragem dos controles deslizantes quanto as lojas on-line. Dependendo do tamanho do seu catálogo de produtos, os visitantes podem precisar navegar por muitas páginas para localizar o que desejam:
Existem várias maneiras de contornar esse problema. Você pode segmentar itens por categoria, adicionar uma melhor funcionalidade de pesquisa e, é claro, usar controles deslizantes de produtos:
Com as ferramentas certas, você pode criar facilmente controles deslizantes de produtos que chamam a atenção que ajudam a exibir seus itens mais vendidos. Vamos falar sobre quais são suas opções.
Duas maneiras simples de adicionar controles deslizantes de produtos à sua loja online do WordPress
Existem muitos plugins que você pode usar para adicionar controles deslizantes ao WordPress. No entanto, para uma loja online, você desejará uma opção compatível com o WooCommerce pronta para uso. Com isso em mente, vamos ver como usar duas das melhores opções de plug-in de controle deslizante.
1. Use o plug-in Product Slider for WooCommerce
O Product Slider for WooCommerce é um desses plug-ins que informa quase tudo o que você precisa saber exatamente em seu nome. Com este plugin, você pode pegar seus produtos WooCommerce e colocá-los dentro de um controle deslizante.
Você pode configurar quantos controles deslizantes desejar e inseri-los em qualquer página, postagem ou modelo personalizado usando códigos de acesso configuráveis. Cada controle deslizante de produto que você cria é totalmente personalizável. Isso significa que você pode mudar sua aparência, como se comporta, se está definido para reprodução automática, se suporta deslizar em dispositivos móveis e muito mais.
Para tornar sua vida ainda mais simples, este plug-in inclui três temas para escolher, tornando seus controles deslizantes únicos. Existem também dezenas de outras opções se você comprar uma licença premium.
Para qualquer novo controle deslizante criado, você precisa escolher um tema em vez de começar do zero. No tutorial a seguir, ajustaremos nossa opção para torná-lo único e, no processo, mostraremos como o plugin se sai quando se trata de personalização.
Antes de começar, você precisará de uma loja WooCommerce com pelo menos alguns produtos. Aqui está o nosso:
Agora confira nosso controle deslizante pronto e mostraremos como chegamos lá:
Configurando o Slider do Produto para WooCommerce
A primeira coisa que você precisa fazer é configurar e ativar o plug-in Product Slider for WooCommerce. Assim que você faz, um novo Controle deslizante do produto A guia aparecerá no seu painel.
Se você clicar em Adicionar novo, a primeira coisa que você verá é uma visão geral das maneiras de adicionar um novo controle deslizante ao seu site:
Vá em frente, defina um título para o controle deslizante e role para baixo até o Configurações Gerais área. Lá, você pode configurar o tipo de controle deslizante que deseja criar, juntamente com o layout e o tema que usará:
O Theme One oferece um estilo limpo e minimalista, por isso vamos seguir essa escolha.
Em seguida, você pode configurar quais produtos exibir no seu controle deslizante. A desvantagem da versão gratuita deste plug-in é que ele só permite criar controles deslizantes para os itens mais recentes:
Vamos seguir em frente e configurar nosso controle deslizante para exibir quatro colunas em dispositivos de desktop e uma em dispositivos móveis, além de mostrar 12 produtos no total.
Passando para o Controles deslizantes Na guia, desativaremos a reprodução automática e, em seguida, ativaremos as setas de navegação e a paginação:
Como essas configurações facilitam a navegação, recomendamos que você as mantenha ativadas. Você também pode ativar o toque e arrastar o mouse, o que torna a navegação ainda mais intuitiva:
Passando para Opções de exibição, definimos o texto do nosso controle deslizante para preto. Também definimos uma cor diferente para os preços com desconto, para tornar a diferença mais evidente:
As opções de tipografia não estão disponíveis na versão gratuita do plug-in. Então, neste ponto, nosso controle deslizante está pronto para ser usado. Para publicar um controle deslizante do produto, você pode salvá-lo e copiar e colar o código abreviado na parte superior da tela de configuração em um Código curto bloco em qualquer página:
No geral, a criação de um controle deslizante totalmente funcional usando o Controle deslizante do produto para WooCommerce leva apenas alguns minutos. Você é um pouco limitado quando se trata de opções de estilo, mas esse plug-in é ótimo se você procura algo minimalista.
2. Crie um controle deslizante de produto usando o PickPlugins Product Slider for WooCommerce
Em seguida, o Slider do produto PickPlugins para WooCommerce é uma ótima alternativa se você estiver procurando por mais funcionalidades nos sliders do seu produto. Este plug-in oferece um conjunto completo de opções quando se trata de animações de slider, incluindo um recurso de reprodução automática com velocidades personalizadas, efeitos de foco e muito mais.
Uma área em que esse plug-in tropeça é que ele não oferece muitas opções de personalização para os estilos dos sliders. Inclui vários elementos que você pode adicionar aos produtos que estão à venda ou que têm descontos. No entanto, você tem menos controle sobre a aparência do texto para seus produtos.
Por outro lado, a vantagem desse plug-in é que ele permite adicionar CSS personalizado ao controle deslizante do produto. Isso significa que você lata personalize todos os aspectos do design do slider, desde que você se sinta confortável com o CSS.
Com isso em mente, decidimos usar esse plug-in para criar um controle deslizante de produto simples. Nosso objetivo era criar algo semelhante ao controle deslizante na última seção, para demonstrar algumas diferenças importantes entre os dois plugins:
Configurando o Plug-in
O processo foi bastante simples. Depois de ativar o plug-in, você pode ir para o WCPS> Novo WCPS guia para criar um novo controle deslizante. A primeira coisa que você deseja fazer é definir um título, e o plug-in mostrará os códigos de acesso do seu controle deslizante:
Para iniciar o processo de personalização, vá para o Opções aba. Lá, você pode escolher quantas colunas devem ser exibidas para as versões para desktop e móvel do elemento. Mais uma vez, optamos por quatro e uma coluna, respectivamente:
Seguindo em frente, desativamos a reprodução automática e ativamos o “loop”, que permite que os visitantes deslizem diretamente do último elemento para o primeiro e vice-versa. Esse é um recurso útil que o plug-in anterior não incluiu:
Além disso, ligamos o mouse e tocamos nas opções de arrastar. Um recurso útil que este plug-in também oferece é o “carregamento lento”, que carrega elementos no seu controle deslizante progressivamente para aumentar a velocidade da página:
Agora, estamos prontos para selecionar quais produtos o controle deslizante deve exibir, usando o Produto de consulta aba. Você perceberá imediatamente que este plug-in inclui muitas opções além dos seus produtos mais recentes. Para este exemplo, no entanto, manteremos essa configuração:
Se você rolar para baixo, verá opções para ocultar produtos esgotados e incluir itens que estão à venda. Então em Estilo, você pode selecionar um dos quatro temas para usar como base do controle deslizante:
Esta seção também inclui ‘fitas’, que são sobreposições exibidas acima das imagens do produto para exibir descontos e ofertas. Por fim, vamos pular para o Elementos guia, onde podemos selecionar quais elementos seu slider deve incluir:
Como queríamos criar algo semelhante ao nosso último controle deslizante, desativamos o Categoria e Contagem de vendas elementos. Quando seu próprio trabalho de personalização estiver concluído, você poderá salvar seu controle deslizante, copiar seu código de acesso e publicá-lo usando um Código curto quadra.
Para resumir, pensamos que o PickPlugins Product Slider para WooCommerce oferece opções de personalização mais práticas para sliders. No entanto, a personalização do estilo e a própria interface estão ausentes. Nosso conselho é experimentar a versão gratuita de ambos os plugins, para ver qual deles melhor se adapta às suas necessidades exclusivas.
Conclusão
Os controles deslizantes do produto podem parecer simples, mas podem oferecer muitas funcionalidades interessantes. Você pode adicionar efeitos de transição aos seus controles deslizantes, configurá-los para navegar por categorias específicas de produtos, usar o design que desejar e muito mais.
Se você deseja um plug-in que ofereça uma gama decente de opções em termos de estilo e funcionalidade, o Product Slider for WooCommerce é uma boa aposta. O Slider do produto PickPlugins para WooCommerce, por outro lado, oferece muito mais opções de animação e mais controle sobre quais produtos exibir (na versão gratuita), mas não permite que você ajuste tanto o estilo do seu controle deslizante.
Por fim, se você estiver procurando outras maneiras de aprimorar a experiência de compra em sua loja, consulte nosso guia sobre como otimizar a página do produto WooCommerce e nossa coleção de plug-ins essenciais do WooCommerce.
Você tem alguma dúvida sobre como usar controles deslizantes de produtos em sua loja online? Vamos examiná-los na seção de comentários abaixo!
