Categoria: Instruções

O post é um tipo de conteúdo que normalmente é exibido no blog do site, logo, a publicação de posts costuma ter uma comunicação mais simples e costuma ter maior frequencia.

Continuar lendo Como adicionar posts no blog?

Definir a cor da estampa é algo importante principalmente se você tem uma loja que vende roupas, infelizmente não é possível representar um tecido com uma cor, até mesmo algumas cores são complicadas de reproduzir no computador, imagina então, como é dificil representar estampas…

Vou apresentar como utilizar imagens para representar cores especificas ou estampas para produtos variáveis no WooCommerce.

Continuar lendo Definir Cores de Variações dos Produtos Variáveis

Para adicionar imagem destacada na home do seu site WooCommerce, siga estes 5 passos simples. Você poderá customizar e adicionar animações as imagens para dar um destaque visual ainda mais interessante.

O que é uma imagem destacada?

Imagens destacadas são representações visuais do post, exemplo, se você tem um post sobre raquetes de tennis, muito provavelmente você queira facilitar para o usuário do seu site saber sobre que tipo de raquete o post está falando, certo?

Neste ponto, é interessante que a imagem destacada do post sobre raquete de beach tennis apresente uma foto de alguém praticando o esporte, a questão aqui é que a imagem destacada tem um contexto, quem joga beach tennis, normalmente está numa quadra de areia e isso ajuda a pessoa a entender o post sem precisar ler.

Imagem destacada na página principal?

Sim, apesar de citar que a imagem destacada representa um post, ela também pode representar várias coisas como uma categoria de produto, um grupo de produtos e até mesmo produtos de uma promoção na sua loja virtual.

É muito comum um ecommerce ter algumas imagens destacadas na página inicial que levam para uma categoria especifica, e é exatamente aqui que entram as imagens destacadas no ecommerce!

Como adicionar uma imagem destacada no WooCommerce?

Por padrão, o WooCommerce permite que você defina uma imagem destacada para o produto, você pode fazer isso na tela de adicionar produto.

1. Acesse o painel de administração do WooCommerce
2. Clique em Posts -> Adicionar novo
3. Você irá encontrar a opção Imagem do produto no menu à direita
4. Na aba Imagem destacada clique em Definir imagem do produto
5. Você verá a janela Biblioteca de Mídia
6. Selecione a imagem desejada diretamente da biblioteca de mídia do WooCommerce
7. Clique no botão Definir imagem do produto
8. Pronto, agora você definiu uma imagem destacada para o produto.

É esta imagem que será exibida sempre que este produto estiver sendo listado na busca, na sessão de produtos, na página do produto ou no carrinho de compras.

Como adicionar imagem destacada na página principal?

Diferente da imagem destacada do post ou do produto, a imagem destacada na página inicial é adicionada na página inicial, ou seja, na página principal do seu site e é bem simples de fazer, veja:

Todas as instruções abaixo levam em consideração que você está logado na administração do seu site, ok?

Acesse a página inicial do seu site e clique no botão Editar página (normalmente está no topo da tela ou ao lado do título)

Agora clique numa área vazia do editor para marcar onde você quer trabalhar e em seguida clique no botão “+” no topo da tela

Você verá uma caixa de pesquisa, utilize ela para localizar blocos específicos, digite Colunas e clique no ícone “Colunas”

Agora que você selecionou o bloco Colunas, você precisa escolher quantas colunas quer adicionar na página, selecione a primeira opção

Perfeito, agora você tem uma coluna vazia, note que ela tem um “+”, clique nele para exibir a caixa de pesquisa de blocos.

Esta é a caixa de pesquisa de blocos, digite “imagem” para localizar o bloco de imagem, em seguida clique no ícone “Imagem” para escolher o bloco.

Ao adicionar o bloco Imagem, você tem a possibilidade de enviar uma imagem do seu computador ou escolher uma imagem da galeria, esta parte do processo é sempre o mesmo para enviar imagens.

Para este exemplo, escolha “Biblioteca de mídia”, vamos usar imagens que já existem no seu site.

Agora você consegue ver todas as imagens que existem no seu site, você pode usar qualquer uma delas, vou usar as mais recentes mas, você pode escolher a imagem que preferir, de preferencia, utilize uma imagem criada para esta finalidade.

Escolha a imagem que você quer usar, basta clicar sobre ela, apenas a imagem que estiver com o ícone de “seta” será usada. Clique na imagem e do lado direito inferior, haverá um botão Selecionar, clique nele.

Quando você adiciona um item a barra de ferramentas aparece e te dá algumas opções de customização, neste caso, permite alinhar a imagem, recortar, aplicar efeitos e adicionar legenda.

Se você precisar, você pode substituir a imagem por outra. No final da barra de ferramentas existe um ícone de “3 pontos”, ele te dá algumas opções extras relacionadas ao bloco que está selecionado.

Neste exemplo adicionei apenas uma coluna, mas na verdade preciso de 4, então, tudo que preciso fazer é selecionar a coluna e duplicar tudo que existe nela, assim, podemos configurar apenas uma coluna e ainda assim teremos a mesma formatação e configuração em todas.

Clique no ícone de “3 pontos” e clique novamente na opção Selecione o bloco ascendente (Coluna).

Agora você verá a barra de ferramentas um pouco menor, clique novamente no ícone “3 pontos” e escolha Duplicar

Para fazer 4 colunas você precisará repetir o processo 3 vezes. Note que ao adicionar uma nova coluna, o tamanho da imagem é reduzido para caber tudo na tela, porém, o tamanho do arquivo da imagem não é alterado, por isso, é importante que você utilize imagens de no máximo 350 pixels de altura ou largura.

Você pode adicionar links para estas imagens, para isso, basta clicar na imagem e clicar também no botão link, como na imagem abaixo.

Note que você pode digitar parte do nome de uma categoria, página, post e nome de produto, uma lista com sugestões dos conteúdos que existem no seu site será exibida e você pode escolher um deles, o link é criado automaticamente.

Digite o nome de uma categoria e selecione ela, o link será aplicado. O ideal é que você adicione uma categoria diferente para cada imagem, mas mantenha o foco em categorias estratégicas, não adianta colocar ali categorias que seus clientes não estão procurando.

No final de tudo você pode ter algo parecido com esse modelo

Você pode criar imagens especificas para utilizar como destaque, adicionar o nome da categoria na arte da imagem e até mesmo fazer o mesmo processo para adicionar banners, neste ponto, sua criatividade é o limite.

Para migrar da plataforma Tray para WooCommerce você precisa saber como exportar produtos tray ecommerce, é um processo fácil de fazer mas, você precisa acesso a sua conta Tray.

Para simplificar a migração dos seus produtos cadastrados por meio de planilha da plataforma Tray eCommerce para sua loja na WooCommerce, siga as instruções abaixo

Acesse sua conta Tray Ecommerce

1. Acesse o painel da Tray;
2. Clique em Produtos > Produtos Cadastrados > Ao lado da opção “Cadastrar novo produto”, clique na seta e escolha “Exportar todos os produtos para Excel”.

Exportar produtos Tray Ecommerce

1. Clique na opção “Exportar todos os produtos para Excel”;
2. Aguarde até que a operação seja concluída e, em seguida, clique em “Baixar Arquivo”.

Observação: Se o arquivo for baixado no formato “CSV” ou outro formato, abra o arquivo e salve-o como formato “XLS” para evitar possíveis erros ao importar a planilha para a plataforma WooCommerce.

Relação de campos Tray Ecommerce e WooCommerce

Entenda algumas das colunas da Tray e a correspondência com os campos na planilha da WooCommerce. É importante que os campos tenham uma correlação para a importação ocorrer corretamente.

TRAY	WOOCOMMERCE
Produto	Nome
Descrição Simples	Breve Descrição
Descrição completa	Descrição
Preço	Preço Normal
Preço da Oferta	Preço Promocional
Peso do Produto	Peso
Estoque Atual	Estoque
ID	SKU

Importar planilha de produtos Tray Ecommerce no WooCommerce

Agora, para importar a planilha para sua loja na WooCommerce.

Criar um slideshow no WordPress é uma tarefa fácil, no WooCommerce você pode alterar o slide em apenas 5 passos simples, veja Como alterar slide.

WooCommerce Slider

É importante entender que existem várias formas de adicionar um slide no seu site, algumas pessoas também chamam de banner rotativo mas, no final das contas, é a mesma coisa, uma imagem que fica trocando de tempo em tempo.

Neste tutorial, vou apresentar como adicionar slider usando o editor Gutenberg, nativo do WordPress, logo, se você assinou qualquer um dos planos de assinatura WooCommerce BR, você tem este recurso disponível no seu site, basta seguir este tutorial.

Como alterar slide

Faça login na administração seu site WooCommerce, vá até a página inicial e localize a barra de tarefas no topo da página, é uma barra preta, nela há um botão “Editar página”, clique nele.

Você verá a tela de edição da página principal do seu site, também verá o slide (ou banner como preferir chamar), clique sobre o slide. Ao clicar, você verá uma barra de ferramentas do lado esquerdo superior do slide.

Obs.: Algumas vezes é necessário clicar 2 vezes no slide para aparecer a barra de ferramentas.

Não precisa clicar em nada nesta barra de ferramentas.

Do lado direito do slide, você verá outra barra de ferramentas, nela você notará que existe uma miniatura do slide clicado.

Partindo do ponto que nosso objetivo é alterar o slide, basta clicar no botão “Remove image” (ou remover imagem dependendo do seu idioma).

Após remover a imagem, automaticamente você verá um botão “Enviar” na cor azul, este botão permite que você envie uma imagem do seu computador, já o botão “Biblioteca de mídia”, permite que você escolha uma imagem que já está no site.

Neste exemplo, estamos alterando o slide para uma imagem que já está salva na biblioteca de mídia, portanto, clique em “Biblioteca de mídia”.

Agora que você pode selecionar a imagem para exibir no seu slide, basta clicar nela, note que a imagem ficará marcada com um ícone de seta (certo). É possível selecionar mais de uma imagem de uma vez só.

Selecionou todas as imagens? Top, agora olhe do lado direito inferior da tela e perceba que há um botão “Selecionar”, basta clicar nele e seu slide estará pronto.

Por fim, você precisará clicar no botão “Atualizar” da sua página para salvar as alterações realizadas. Agora basta acessar seu site e ver como ficou seu novo slideshow.

Tamanhos recomendados

É importante que as imagens não tenham tamanhos exagerados, por isso, recomendamos sempre utilizar imagens no tamanho no máximo de 1920 pixels de largura e altura de 400 pixels, a altura pode até ser maior ou menor, mas é importante que a largura não seja superior 1920, nem menor que 1600 pixels.

As medidas da imagem podem ter vários tamanhos diferentes desde que sigam as regras em relação a largura.

Meus banners estão ficando desfocados

Este é um problema comum e bem simples de resolver, você precisa alterar o tamanho da mídia no WordPress. Siga estas instruções:

No painel administrativo siga para Configurações -> Mídia

Agora localize a entrada “Tamanho grande” e altere a largura para 1920 e altura deixe o valor que estiver, em todo caso, 600 a 1000 é um ótimo tamanho para imagens.

Após definir a largura, basta clicar em Salvar alterações.

Observação: Apenas as imagens enviadas antes desta configuração, continuarão como estão, ou seja, apenas as novas imagens serão afetadas por esta configuração. Você pode enviar novamente a imagem original (o banner) para melhorar a qualidade dele no slide.