Como editar aviso da loja, catálogo, imagens dos produtos e finalização da compra no Personalizar WooCommerce

O Personalizar WooCommerce faz parte do WordPress > Personalizar e permite selecionar opções que se aplicam em todo o site para aviso de loja, catálogo de produtos, imagens de produtos e finalização de compra, sem tocar em nenhum código.

Onde encontrar o Personalizar WooCommerce

Do painel WordPress, vá para: Aparência > Personalizar.

where to find woocommerce customizer 4.3

No menu Personalizar, selecione WooCommerce:

No WooCommerce estão cinco opções:

  • Aviso da Loja
  • Catálogo de Produtos
  • Imagens do produto
  • Finalizar compra

Cada um está coberto em detalhes abaixo.

Aviso da Loja

O Aviso da Loja permite que você insira uma mensagem em todo o site mostrada a todos que visitam sua loja. A mensagem pode ser:

  • Informativo – Uma nota que informa aos clientes sobre atrasos no transporte devido às condições climáticas. Um aviso de “fora” se de férias.
  • Promocional – Uma nota anunciando um evento, um especial de feriado, um pacote, uma venda em todos/alguns itens ou frete grátis.

Exibir um aviso de loja

Para mostrar aos clientes um aviso de loja em todo o site:

  1. Ir para: Aparência > Personalizar > WooCommerce > Aviso de loja
  2. Digite uma mensagem na área de texto.
  3. Marque a caixa para ativar o aviso da loja.
customizer storenotice enable
  1. Veja como o Aviso da Loja está no seu site/loja.
customizer storenotice preview
  1. Publique quando estiver satisfeito e pronto para que seu Aviso de Loja entre em operação.
customizer storenotice publish

O que os visitantes veem

É assim que o Aviso da Loja é exibido na parte frontal da sua loja/site. Os visitantes podem optar por descartar o aviso depois de vê-lo uma vez.

storenotice display usage

*A localização e a aparência do Aviso da Loja variam, dependendo do tema que você está usando. A captura de tela acima está com o tema gratuito Storefront.

Editar ou remover um aviso da loja

Para alterar um aviso de loja em todo o site é só seguir o mesmo processo descrito acima.

Para deixar de exibir um aviso de loja em todo o site:

  1. Ir para: Aparência > Personalizar > WooCommerce > Aviso de loja.
  2. Desmarque a caixa para Ativar aviso de loja para parar de exibir aos visitantes.
customizer storenotice disable
  1. Publicar para salvar alterações.

Catálogo de Produtos

Todas as opções para Catálogo de Produtos podem ser encontradas em: Aparência > Personalização > WooCommerce > Catálogo de Produtos.

O catálogo de produtos permite que você escolha:

  • O que exibir na página principal da loja.
  • O que exibir nas páginas da categorias
  • Como classificar produtos em uma categoria
  • Quantos produtos mostrar em uma única linha
  • Quantas linhas de produtos para exibir em uma página
customizer productcatalog option

Página de loja

Sua página de loja pode exibir produtos, categorias ou ambos. Recomendamos selecionar um para um visual limpo.

  1. Selecione Produtos ou Categorias do dropdown.
customizer shoppage options

Ao realizar sua edição é possível pré-visualizar ao vivo. Você deve estar visualizando a página da Loja.

customizer shoppage products
  1. Publique para salvar e ir ao ar.

Páginas de categoria

Suas páginas de categoria podem exibir produtos ou subcategorias dentro de uma categoria ou ambos. Recomenda-se selecionar um.

Se você tem apenas alguns produtos, ou não tem subcategorias, pode não haver diferença na aparência.

  1. Selecione Produtos ou Subcategorias do dropdown.
categorypages display

Ao realizar sua edição é possível pré-visualizar ao vivo. Você deve estar visualizando a página de Categoria.

categorypage display preview
  1. Publique para salvar e ir ao ar.

Classificação padrão do produto

A classificação padrão do produto permite controlar a ordem em que os produtos são exibidos, o que influencia a forma como os produtos são visualizados por padrão nas páginas loja e categoria. Os visitantes ainda têm a opção de classificar o produto de uma forma diferente, se desejar.

Para escolher uma Ordem de Classificação Padrão:

  1. Selecione uma opção a partir do dropdown.
  2. Publique para salvar e ir ao ar.

Produtos por linha

Os produtos por linha permitem que você escolha o número de itens que aparecem em uma única linha nas páginas Loja e Categoria.

Seja sensível a:

  • Tamanho de uma imagem de produto
  • Espaço em um computador/laptop, tablet ou dispositivo móvel
  • A experiência ideal para um cliente visualizar e comprar seus produtos
  1. Use setas para aumentar/diminuir o número de produtos.
products row select
  1. Pré-visualize sua seleção ao vivo. Você pode estar visualizando a página da Loja ou uma página de categoria.
products row preview
  1. Teste em diferentes dispositivos. Abaixo está um exemplo de diferentes visualizações, usando as mesmas configurações.
  • Em uma tela de computador/laptop
products row screen
  • Em um tablet
products row tablet
  • Em um dispositivo móvel
products row mobile

*O dimensionamento do tamanho e aparência da imagem vai variar, dependendo do tema que você está usando. As capturas de tela acima são do tema gratuito Storefront.

  1. Publique para salvar e ir ao ar.

Linhas por página

As linhas por página permitem que você escolha o número de linhas que aparecem nas páginas Loja e Categoria.

Seja sensível a:

  • Tamanho das imagens do produto
  • Número de produtos que você vende
  • Espaço em um computador/laptop, tablet ou dispositivo móvel
  • A experiência ideal para um cliente visualizar e comprar seus produtos
  1. Use setas para aumentar/diminuir o número de linhas.
rows page select
  1. Pré-visualize sua seleção ao vivo. Você pode estar visualizando a página da Loja ou uma página de categoria.
rows page preview
  1. Teste em diferentes dispositivos. Abaixo está um exemplo de diferentes visualizações, usando as mesmas configurações.
  • Em uma tela de computador/laptop
rows page screen
  • Em um tablet
rows page tablet
  • Em um dispositivo móvel
rows page mobile

*O dimensionamento do tamanho e aparência da imagem vai variar, dependendo do tema que você está usando. As capturas de tela acima são do tema gratuito Storefront.

  1. Publique para salvar e ir ao ar.

Imagens do produto

O Imagens do produtos tem duas características:

  • Permite selecionar como as imagens de catálogo e miniatura são dimensionadas e cortadas
  • Redimensiona automaticamente imagens de catálogo e miniatura em toda a sua loja quando uma alteração publicada é feita*

Isso economiza tempo e energia no corte manual e redimensionamento de cada um.

Tipos de imagem

  • Imagens de catálogo. São imagens de médio porte que aparecem na página da Loja, páginas de categoria e para produtos relacionados, Up-sells e Cross-sells.
  • Imagens em miniatura. São as menores imagens usadas nas imagens da Galeria do carrinho, Widgets e (opcional) abaixo da imagem do produto único nas páginas de detalhes individuais do produto.
  • Imagem de produto único é a maior imagem e refere-se à imagem principal/em destaque. As configurações de imagens do produto no Personalizar WooCommerce não se aplicam a elas. Para adicionar, editar ou excluir a imagem do produto único ou a galeria de imagens do produto, consulte: Como adicionar/editar imagens de produtos e galerias de produtos no WooCommerce.

Entendendo Recorte do thumbnail

Vá para: Aparência > Personalizar > WooCommerce > Imagens de Produtos.

customizer thumbnail cropping

É possível selecionar entre as seguintes opções:

  • 1:1 – Imagem quadrada
cropped square
  • Customizado. Você seleciona a razão em que as imagens são cortadas. Neste exemplo, o 1:2 é inserido; e uma imagem não pode ser ampliada para atender a essa exigência.
cropped custom
  • Não cortado. As imagens aparecem como foram enviadas, o que pode resultar em todas serem diferentes, a menos que você tenha usado fotos uniformes em tamanho e resolução. A captura de tela abaixo é um exemplo disso: Um é perfeitamente quadrado, o próximo é um quadrado menor, e o último é um retângulo.
image uncropped

Teste em diferentes dispositivos. Abaixo está um exemplo de diferentes visualizações, usando as mesmas configurações.

  • Em uma tela de computador/laptop
squarecrop screen
  • Em um tablet.
squarecrop tablet
  • Em um dispositivo móvel.
squarecrop mobile

Após concluir a edição, clique em Publicar.

Finalizar compra

As opções para a página Finalizar comprapodem ser encontradas em: Aparência > Personalizar > WooCommerce > Finalizar compra.

checkout customizer

Agora você pode definir se determinados campos são necessários ou opcionais, dependendo dos dados que deseja coletar. Você também pode optar por destacar os campos necessários com um asterisco, que é o padrão.

Recomenda-se criar páginas de Política de Privacidade e Termos e Condições e, em seguida, você pode defini-las aqui. O conjunto de páginas está vinculado junto com o texto que você digita e aparece na página “Finalizar compra” assim:

terms

O link “política de privacidade” abre a página em uma nova janela, enquanto o link “termos e condições” abre uma caixa na página mostrando o conteúdo da página de termos e condições. Um pedido não pode ser feito sem verificar os termos e condições necessários.

Artigos do Blog

Solicite agora um contato para saber mais sobre os nossos serviços.

Preencha o formulário abaixo e entraremos em contato rapidinho.