runningaroundnormal.com
  • Home
  • WordPress
  • WordPress-tutorials
  • WordPress-plugins
  • Blogging

Como criar um controle deslizante de produto WooCommerce (2 plugins gratuitos)

WooCommerce

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

  • 1 Os benefícios de usar um controle deslizante de produto em sua loja
  • 2 Duas maneiras simples de adicionar controles deslizantes de produtos à sua loja online do WordPress
    • 2.1 1. Use o plug-in Product Slider for WooCommerce
      • 2.1.1 Configurando o Slider do Produto para WooCommerce
    • 2.2 2. Crie um controle deslizante de produto usando o PickPlugins Product Slider for WooCommerce
      • 2.2.1 Configurando o Plug-in
  • 3 Conclusão

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:

Uma seção de herói com um controle deslizante.

Se você deseja exibir comentários ou depoimentos de clientes, os controles deslizantes também podem ser uma excelente opção:

Os depoimentos deslizantes são uma ótima maneira de reunir uma tonelada de informações em um espaço pequeno.

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:

Várias páginas de produtos.

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:

Um exemplo de um controle deslizante de produto.

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

Controle deslizante de produto para WooCommerce Controle deslizante de produto para WooCommerce

Autor (es): ShapedPlugin

Versão Atual: 2.1.16

Ultima atualização: 23 de abril de 2020

woo-product-slider.zip

88%Avaliações 10.000+Instala WP 4.3+Requer

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:

Uma nova loja WooCommerce.

Agora confira nosso controle deslizante pronto e mostraremos como chegamos lá:

Um exemplo de um controle deslizante de produto.

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:

Adicionando um novo controle deslizante.

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á:

Selecionando um tema para o seu controle deslizante.

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:

Escolhendo quais produtos exibir no seu controle deslizante.

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:

Definindo suas configurações de paginação e navegaçã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:

Ativando deslizar e arrastar o mouse.

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:

Configurando as opções de texto do seu controle deslizante.

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:

Adicionando o controle deslizante do produto usando um bloco Shortcode.

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

Slider do produto PickPlugins para WooCommerce Slider do produto PickPlugins para WooCommerce

Autor (es): PickPlugins

Versão Atual: 1.13.11

Ultima atualização: 10 de abril de 2020

woocommerce-products-slider.zip

92%Avaliações 20.000+Instala WP 3.8+Requer

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:

Um exemplo de um controle deslizante de produto.

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:

Definir um nome para o seu novo 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:

Configurando quantas colunas exibir para seu controle deslizante.

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:

Ativando o loop para seu controle deslizante.

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:

Ativando carregamento lento para o controle deslizante do seu produto.

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:

Configurando quais produtos seu slider deve exibir.

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:

Selecionando um modelo para o controle deslizante do seu produto.

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:

Configurando 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!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Documentación de Zelle Lite Penaのドキュメント

    Related Posts

    WooCommerce

    Kas ir WooCommerce? WooCommerce 101, izskaidrots iesācējiem

    WooCommerce

    比较3个WooCommerce产品表插件:哪个最适合您?

    WooCommerce

    5 najboljših vtičnikov WpsCommerce Dropshipping leta 2020: AliExpress + More

    Follow Us

    • Facebook
    • Twitter
    Tweets by DB Tech Society

    Promo

    banner

    Recent Posts

    • Why-build-business-websites-with-WordPress-1920x768[1]Sådan importeres fra Google Dokumenter til WordPress (Brug af Jetpack)
    • best-wordpress-quiz-plugins[1]Hvad er det bedste WordPress Quiz-plugin? 5 indstillinger sammenlignet
    • your-company-needs-a-blog-05[1]20 måder at tænke op blogindlæg til dine WordPress-blog
    • Crear un nuevo formulario Typeform.Cómo usar Typeform con WordPress (Formularios fáciles de conversación)
    • WordPressの最高のイベント/会議テーマ:Neve2020年のWordPressの20以上の最高のイベント/会議テーマ

    Promo

    banner

    Related Posts

    1. Como criar um formulário de pagamento WordPress com formulários de gravidade
    2. Como criar um site WordPress: Guia passo a passo para iniciantes
    3. Como importar imagens para o WordPress (em 3 etapas simples)
    4. Documentação de Neto
    5. Documentação do GymPress
    6. Documentação do MedicPress


    runningaroundnormal.com