woocommerce-barra de pesquisa personalizada
woocommerce-barra de pesquisa personalizada
woocommerce-barra de pesquisa personalizada
,

21 dicas para design de sites WooCommerce

Gostou deste artigo?
Share it on social media!
Conteúdo

A maneira como você faz o layout do design do seu site WooCommerce ajudará você a converter clientes. Você deve levar em consideração que as pessoas compram e compram de maneiras diferentes em seu site. Você tem muito pouco tempo para convencer os visitantes por que eles devem confiar e comprar de sua marca. Neste post, daremos sugestões sobre como aproveitar ao máximo os segundos críticos que você tem para atrair seu cliente com essas 21 dicas para design de sites WooCommerce.

woocommerce-barra de pesquisa personalizada

Dicas para design de sites WooCommerce

1) Caixa de pesquisa personalizada do WooCommerce

Mantenha a barra de pesquisa disponível o tempo todo. Seus visitantes querem uma maneira fácil de encontrar exatamente o que estão procurando sem precisar rolar para encontrar um lugar para pesquisar. Certifique-se de que haja uma ferramenta de pesquisa exibida com destaque a cada passo.

  • Don't forget about mobile:A maioria das pessoas não percebe que a maioria dos sites de pesquisa do site agora é móvel. Torne-o compatível com dispositivos móveis
  • Filter the results:Faça com que sua pesquisa seja inteligente. Se os usuários digitarem madeira, por exemplo. Ele puxará todos os produtos marcados como pisos de madeira.
  • Tools:Recomendamos usar a extensão Product Finder do WooCommerce:https://woocommerce.com/products/product-finder/
  • Be prominent:Faça com que sua barra de pesquisa se destaque. Projete para que ele possa ter uma cor de destaque diferente para o layout e/ou botão.

To Enhance your WooCommerce Search, try this plugin: https://docs.woocommerce.com/document/woocommerce-product-search/


Navegação Organizada WooCommerce

2) Navegação organizada

Online shoppers come to your site looking for speed and convenience of shopping. Make navigation as simple but detailed as possible to get them where they need to be. Always place your navigation bars where visitors expect to see them. The standard positions are vertically down the left of the page and horizontally at the top. It’s even better if you can make the horizontal navigation bar remain at the top of the screen as you scroll down the page. You will also need to ensure that your navigation menus will work with any screen size or device. With users shopping from phones, tablets, desktops and a number of other devices, you want the site to react the same and provide the same easy navigation across all platforms.

Práticas recomendadas de navegação

  • Categorization is key:Ao olhar para sua navegação, certifique-se de que a maneira como você categoriza é compreensível para os produtos ou serviços que você oferece. Você tem nomes de especialidades que os novos usuários não sabem o que significam. Isso pode tornar as coisas frustrantes para eles, porque você tem apenas alguns segundos para fazê-los reagir e seguir em frente no processo de compra. Ter uma estrutura clara e hierárquica é importante.
  • Make things sticky:Gostamos de ter a navegação principal fixa para quando há rolagem. Os links principais estão sempre visíveis. Se você tem toneladas de produtos, tente fazer uma mega navegação com navegação pegajosa.
  • It ok to have several types of navigation:A navegação principal horizontal funciona na maioria das vezes. No entanto, horizontal às vezes se encaixa dependendo da quantidade de informações que você tem. Lembre-se de que você pode ter vários tipos de navegação com base em diferentes áreas do site. Por exemplo, uma barra superior acima do logotipo pode ser considerada mais links e ícones relacionados ao atendimento ao cliente e compras, a navegação principal pode ser os principais serviços e/ou seções do site e o rodapé pode ter todos os itens acima.

Erros de navegação:

  • Non-standard style navigation:O design pode parecer legal, mas para um usuário experiente que é treinado. Eles gostam de ver os mesmos padrões na interface do usuário porque estão lá para comprar e aprender sobre seu produto, não ficar impressionados com o quão bem você acredita que seu design é. Em caso de dúvida e quiser experimentar algo diferente, teste e meça com estilos diferentes.
  • Using generic links:Se você está vendendo produtos em seu site e só tem "Produtos" na navegação principal. Você está se vendendo um pouco porque o usuário precisa encontrar o que você está vendendo. Experimente uma pequena navegação superior acima do logotipo e, em seguida, a navegação principal com categorias de produtos ou os próprios produtos.
  • Don't miss the breadcrumb:Uma das ferramentas mais simples e eficazes para usabilidade e SEO são os sites deixados de fora.

WooCommerce Personalize usando o histórico de navegação

3) Produtos relacionados, up-sells e cross-sells

Personalizar a experiência de seus visitantes dá a eles a sensação de que você está prestando atenção às suas necessidades e desejos. Ter produtos relacionados exibidos na página do produto. Você também pode mostrar a eles o que outras pessoas compraram em relação aos itens que visualizam.

Up-sells: This could be a large quantity, better version, or the same product bundled with another which is displayed in the buying experience to push a higher sale.

Related Products: You can have products appear in the product info page, but they are products that are meant to be purchased in addition to the one that the customer is viewing.

Cross-sell: You can have items appear on the product page and in the shopping cart to help encourage an impulse to buy.

Check out built in features of WooCommerce: https://docs.woocommerce.com/document/woocommerce-widgets/

Here is a great extension for Upselling and Cross Selling: https://docs.woocommerce.com/document/related-products-up-sells-and-cross-sells/

Código de produtos visualizados recentemente pelo WooCommerce

Você também pode usar plug-ins pagos para obter determinados recursos, como o YITH

https://yithemes.com/themes/plugins/yith-woocommerce-recently-viewed-products/


Salvar e compartilhar carrinho para WooCommerce

4) Torne os carrinhos de compras persistentes

Salvando o carrinho de compras:

Estabelecer um cookie de longo prazo quando seus visitantes estiverem comprando, para que eles possam voltar mais tarde e continuar de onde pararam. A vida é cheia de interrupções e você não quer perder uma venda simplesmente porque eles esqueceram o que estava no carrinho na última visita. Eles podem ir direto para o checkout para concluir o pedido ou com uma barra de pesquisa útil à vista, e imagens de outros possíveis interesses à vista, eles podem decidir ficar e comprar um pouco mais.

Checkout: https://codecanyon.net/item/save-share-cart-for-woocommerce/5568059

 

WooCommerce Cookies

WooCommerce Cookies

O WooCommerce faz três tipos diferentes de cookies e já possui isso integrado. Os dois primeiros cookies contêm informações sobre o carrinho como um todo e ajudam o WooCommerce a saber quando os dados do carrinho são alterados. O cookie final (wp_woocommerce_session_) contém um código exclusivo para cada cliente para que ele saiba onde encontrar os dados do carrinho no banco de dados de cada cliente.

  • woocommerce_cart_hash
  • woocommerce_items_in_cart
  • wp_woocommerce_session_

Listas de desejos do WooCommerce

Wish Lists:

Você também pode considerar adicionar Listas de Desejos ao menu. As listas de desejos salvarão um item para o comprador sem removê-lo do inventário em seu site. Usar o carrinho de compras como uma lista de desejos de longo prazo pode causar problemas com seu estoque. Apresentar uma alternativa pode aliviar um pouco disso.

Lista de desejos do WooCommerce

Try the WooCommerce Wishlists Plugin: https://woocommerce.com/products/woocommerce-wishlists/


5) Exiba com destaque seus links de atendimento ao cliente e número de telefone

Todos os compradores on-line querem se sentir seguros e protegidos em seu site. Suas credenciais podem ser fortes, mas um comprador que visualiza seu site pela primeira vez estará procurando sinais de que você é realmente confiável. A melhor maneira de se apresentar a novos clientes é ser transparente sobre suas informações de contato. Exibir seu número de telefone e links de atendimento ao cliente em um local de destaque no site ajudará a deixá-los à vontade e garantir que as informações do cartão de crédito estejam seguras com você.


6) Parceiros e associados de destaque

In establishing your credibility nothing is off limits. If you have partners or associates that your guests will recognize, drop those names. If you can show that you are associated with well established and successful companies they are more likely to feel safe shopping on your site. Somos especialistas certificados em WooCommerce e temos orgulho disso!


WooCommerce - Carrosséis rotativos estão fora

7) Os carrosséis rotativos estão fora

Carousels have their positive points but they are not SEO friendly. They do help you to show more products and promotions, but they slow your site down and users find them annoying. They move too fast for any real chance to process what is in them. If you must use a carousel, incorporate one that will stop the autorotation when the cursor hovers over it. This gives the customer the opportunity to see the item without actually going to the page with a full description. The best practice is just using static images. Your visitors aren’t interested in bells and whistles. They want great products at the best possible price.


Faça sua seção de vendas se destacar

8) Faça sua seção de vendas se destacar

Make them feel hungry. The majority of online shoppers will not buy a product until it goes on sale. Prominently display a link to your discounted products so these shoppers will have a direct route to the items they seek. Use a different color for the link or use lettering that draws attention. Bargain shoppers are a great audience to target because they like to tell others what they found at an amazing price. That is free advertising after the sale.

Área dedicada na navegação principal:

Site Wide Sale:

On Product Lists:

Exemplo de listas de produtos WooCommerce

 


Exemplo de frete grátis WooCommerce

9) Exibir frete grátis

Announcing your free shipping in a prominent place on the homepage will help to cut way down on the number of abandoned shopping carts you encounter.Many shoppers will fill their cart only to leave it when they see the insanely high shipping charges. Some will look for your shipping policy before ordering, so make sure you have it in a good position on your page. You will want to offer other shipping options for those customers wanting faster delivery as well.

Estatísticas de frete grátis do WooCommerce

Retail study: 9 out of 10 consumers say free shipping No. 1 incentive to shop online.


Exemplo de página de vendas do Woocommerce

10) Reúna as opções de economia de dinheiro em uma página de vendas

Forneça um link da sua página inicial para uma área dedicada a economizar dinheiro. Isso inclui frete grátis, códigos de cupom, pontos de fidelidade, descontos e quaisquer brindes que você possa oferecer. Você pode descobrir que esta é a área mais visitada do seu site. Os caçadores de pechinchas provavelmente lhe darão amor por isso sozinho.

Add a dedicated sales page: Popular ideas could be the deal of the month/week/day or just creating a page for a one-time holiday special.


woocommerce-modal-janela

11) Use uma caixa modal

Avoid clutter on your WooCommerce homepage by using a modal window. Showcase a message of importance without making it a part of the homepage. This frees up space on your storefront for more products. These boxes are only helpful if used properly. They have a bad reputation for containing advertising that was nothing more than annoying. Ensure that you do not overuse them and make the button to close the box readily available. Make sure you have a cookie in place so that a user will not see more than one box per visit and they will not see a box at every visit.


Software de bate-papo ao vivo

12) Suporte por chat ao vivo

Live chat is a great way to immediately address questions, concerns or general doubt that a customer may be having on your WooCommerce store. Very few shoppers will actually call a customer support line and many will leave in frustration. Live chat software is a worthwhile investment to stop buyers doubt in its tracks. Customers get the feeling of a personal touch. Live chat can provide efficient customer service and prevent lost sales.


13) Crachás de confiança excessivos lançam bandeiras vermelhas

Os crachás de confiança são uma coisa boa, mas o uso excessivo deles pode deixá-los com a sensação de que têm uma falsa sensação de segurança. Limite o número de crachás que você usa e certifique-se de que eles sejam amplamente reconhecidos. O uso excessivo pode minar o conforto que eles deveriam estar projetando.


14) Teste seu produto WooComerce e página de categoria

A execução de testes A/B é uma ótima maneira de decidir a maneira mais eficaz de exibir seus produtos. Isso fornece duas exibições diferentes para seus clientes e, com o tempo, fornece estatísticas sobre qual funciona melhor para o seu site. Experimentar testes A/B pode melhorar muito a experiência do visitante, bem como seus resultados.

A couple tools we use with our clients: Otimizador Visual Web and Jarra quente.

See some case studies here: https://vwo.com/blog/10-kickass-ab-testing-case-studies/


15) Prenda os visitantes com escassez

Displaying messages that convey urgency is one way to hook visitors into a sale. If you show them that there are only limited quantities of an item left or make them feel as though their size may disappear soon, they are more likely to go ahead and purchase the item before it’s too late. The trick is to make these messages subtle so they feel like you are doing them a favor when you are ultimately urging them to buy now rather than later or not at all.

Here is a free plugin to try out: https://wordpress.org/plugins/woo-custom-stock-status/


16) Não há problema em rolar

Clients sometimes mention about wanting items above the fold. We respond by asking "Which fold are you referring too?". With so many different size monitors scrolling has become irrelevant. Mobile has also completely changed this game by dominating the statistics making desktops a very small percentage when trying to target a fold. Tony Haile from Batida de gráfico has posted numerous amounts of data to back this up. Do not sell yourself short, give your visitors more on the homepage to support SEO, usability, and merchandising of your products

Check out more statistics here at Time.com: http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/


17) Incentive-os a compartilhar

Dê aos compradores muitas oportunidades de compartilhar seus produtos com amigos e familiares. Disponibilize botões de compartilhamento, bem como solicite diretamente que eles compartilhem. Isso não apenas coloca seu produto na frente de mais pessoas, mas também sua marca e um link para seu site. Oferecer oportunidades de compartilhamento melhorará muito o tráfego e as conversões do seu site.


18) Instale um mapa de calor na página inicial do WooCommerce

Don't take our word for things. Analyze your homepage before making any change to understand where your click saturation, visitor scrolling, and interest is per channel (Bing, Google, Facebook, Etc.). Keep in mind your best-converting channel can be entirely different than your least. You want to make sure you understand first what is going on with your site prior to doing any changes.


19) Perguntas Frequentes

Existem usuários obstinados de perguntas frequentes por aí procurando suas perguntas frequentes. Forneça um link e responda às perguntas como se estivesse explicando as coisas para uma criança de 5 anos. Informações sobre envio, garantia e devoluções devem ser incluídas. Além disso, adicione perguntas e respostas que você recebe regularmente para manter suas perguntas frequentes atualizadas. Isso também evita que você tenha que responder às mesmas perguntas repetidamente.

A great example is at Weber: https://consumer-care.weber.com/hc/en-us/categories/360001489471-FAQs


Site WooCommerce Anuncie sua cobertura da imprensa

20) Anuncie sua cobertura da imprensa

If you’ve been mentioned in the news or have press releases available, include them on the site. Display the logos of the media outlets to be readily recognized by visitors. Most will never read the press release but having it there lends credibility that will foster trust in your site. If you do have media attention, link the logos to any articles about your company.

Check out the FLYTE homepage: https://flyte.se/


WooCommerce Google Comentários


21) Incorpore o feedback do usuário

O feedback do usuário pode ser uma ferramenta útil para construir credibilidade com seus clientes. Análises de produtos, pequenas citações, notas de agradecimento ou fotos de clientes com seu produto podem aumentar drasticamente suas vendas. Você pode colocá-los com as descrições de seus produtos ou em barras laterais em todo o site.

Para exibir avaliações sobre sua empresa:

We like using rich plugins for business listings - https://richplugins.com

Plugin de avaliações do Google

To get reviews:

We Recommend trying out: Revisão do produto WooCommerce Pro


Using these WooCommerce Web Design tips for your homepage will go a long way toward improving the user experience of your customers while solidifying your credibility and landing more sales. Placing all the vital information where it belongs and displaying the right products can dramatically increase your conversions. Social media shares and good product reviews will improve SEO and drive traffic. Bright Vessel is a certified Especialista em WooCommerce which can help you build, promote, and improve your storefront. Entre em contato conosco hoje.

Obtenha sua auditoria gratuita de SEO

Formulário de auditoria de SEO gratuito

"*" indicates required fields

Este campo é para fins de validação e não deve ser alterado.
Conteúdo
Gostou deste artigo?
Share it on social media!
Obtenha sua auditoria gratuita de SEO

Formulário de auditoria de SEO gratuito

"*" indicates required fields

Este campo é para fins de validação e não deve ser alterado.
Obtenha sua auditoria gratuita de SEO

Formulário de auditoria de SEO gratuito

"*" indicates required fields

Este campo é para fins de validação e não deve ser alterado.
Gostou deste artigo?
Share it on social media!

Deixe uma resposta

Confira outra postagem do blog!

Voltar para todas as postagens do blog
© 2024 Bright Vessel. Todos os direitos reservados.
chevron para baixoseta para a esquerda