Atualizações do Botiga e do Botiga Pro: novas amostras de produtos, opções de estilo, campos de preenchimento automático, etc.

Publicados: 2023-05-18

É utilizador do Botiga ou do Botiga Pro? Temos boas notícias para você!

Os últimos lançamentos incluem muitas novidades que o ajudarão a melhorar ainda mais o design e a funcionalidade da sua loja Botiga.

O Botiga 2.0.0+ vem com um novo painel de desempenho, opções extras de estilo e uma página de pesquisa de produtos aprimorada, enquanto o Botiga Pro 1.1.5+ apresenta controles de etapa de quantidade personalizados, integração do Google Autocomplete para a página de checkout, novos tipos de amostras de produtos e mais.

Visão geral: Botiga 2.0.0+ e Botiga Pro 1.1.5+

Para começar, aqui está um resumo dos novos recursos mais importantes:

Novas características Botiga 2.0.0+ Botiga Pro 1.1.5+
Seção Produtos populares na página Pesquisa de produtos
Tipos de amostras de produtos gradientes e multicoloridos
Novas opções de estilo para amostras de produtos
Opções de estilo para o cabeçalho do catálogo de produtos
Opções de estilo adicionais para os construtores de cabeçalho e rodapé
Menu suspenso do rodapé
Integração do preenchimento automático do Google
Controle de etapas de quantidade do WooCommerce
Alterações na página de configurações do tema
Capacidade de adicionar novos campos de produtos usando o plug-in ACF
Capacidade de adicionar vídeos às variações do produto
Opções de estilo para a barra lateral do filtro da loja e tabelas de tamanhos
Opções de estilo para o aviso da loja
Capacidade de mostrar o nome da variação abaixo do título do produto
Novos sites para iniciantes empolgantes
Barra de progresso “Frete grátis”
Adicionar às notificações do carrinho

Agora, vamos ver os recursos um por um!

Seção de produtos populares na página de pesquisa de produtos (Grátis + Pro)

Quando os visitantes do seu site pesquisam por um produto e não encontram o que procuram, é provável que saiam da sua loja e provavelmente nunca mais voltem.

Para evitar que abandonem seu site, agora você pode mostrar produtos populares de sua loja se nenhum produto for encontrado.

Seção de produtos populares em Botiga e Botiga Pro

Esse recurso está desabilitado por padrão. Você pode ativá-lo no menu Aparência > Personalizar > Pesquisar > Ativar produtos populares .

Ativar a seção de produtos populares no WordPress Customizer

Tipos de amostras de produtos gradientes e multicoloridos (Pro)

Adicionamos dois novos tipos de amostra ao Botiga Pro:

  • Gradiente – permite misturar duas ou mais cores de forma que uma cor se desvaneça na próxima.
  • Multicor – permite que você mostre várias cores próximas umas das outras.
Amostras de produtos gradientes e multicoloridos

Para adicionar suas novas amostras de cores a qualquer página de produto, você precisa:

  1. Crie as novas amostras na página de administração Produtos > Atributos > Configurar termos (agora você pode escolher entre uma única cor, gradiente e várias cores).
  2. Vá para a página do produto onde deseja adicionar a nova amostra e clique em Editar produto .
  3. Role para baixo até o menu Dados do produto > Atributos > Cor na página de administração do produto.
  4. Selecione e ative a nova amostra no menu suspenso na opção Valor(es) .
  5. Adicione a nova opção de cor ao front-end no menu Dados do produto > Variações .
Amostras de novos produtos do Botiga Pro em uma página de produto WooCommerce

Novas opções de estilo de amostra de produto (Pro)

O Botiga Pro 1.1.5+ permite que você estilize suas amostras de produtos - por exemplo, você pode alterar suas cores, dimensões, bordas, espaçamento e muito mais.

Para acessar as novas opções de estilo de amostras de produtos, vá para Aparência > Personalizar > WooCommerce > Amostras de produtos > painel Estilo e defina suas configurações.

Opções de estilo de amostras de produtos no WordPress Customizer

Opções de estilo para o cabeçalho do catálogo de produtos (Pro)

Com o Botiga Pro 1.1.5+, você pode adicionar uma imagem de plano de fundo ao cabeçalho da página do Catálogo de Produtos e estilizá-la da maneira que desejar. Você tem a opção de alterar a cor, o tamanho da borda, o espaçamento e muito mais.

Você pode estilizar o cabeçalho do catálogo de produtos em Aparência > Personalizar > WooCommerce > Catálogo de produtos > Estilo > painel Layout .

Opções de estilo do cabeçalho do catálogo de produtos

Novas opções de estilo nos construtores de cabeçalho e rodapé (Grátis + Pro)

Os construtores de cabeçalho e rodapé do Botiga já forneceram muitas opções de estilo - mas agora você pode adicionar imagens de fundo personalizadas e alterar os preenchimentos também.

Construtores de cabeçalho e rodapé do Botiga, novas opções de estilo no Customizer

Como você pode ver abaixo, agora cada componente nos construtores de cabeçalho e rodapé tem seu próprio preenchimento, margem e visibilidade opções.

Opções de preenchimento e margem nos construtores de cabeçalho e rodapé

Menu suspenso no rodapé (Pro)

O menu do rodapé agora tem um design suspenso, o que significa que você pode adicionar várias páginas ao rodapé sem preenchê-lo.

Para ativar o recurso, primeiro você precisa criar o menu na página de administração Aparência > Menus . Em seguida, você pode adicioná-lo ao rodapé no painel Aparência > Personalizar > Rodapé > Criador de rodapé .

Vale a pena notar que o menu de rodapé tem um design dinâmico, o que significa que:

  • Se houver espaço abaixo do menu, o submenu será suspenso.
  • Se não houver espaço suficiente para o menu suspenso, o submenu será expandido para cima.
Menu suspenso do rodapé do Botiga Pro

Integração de preenchimento automático do Google para campos de endereço de checkout (Pro)

Para acelerar o processo de checkout, você pode integrar seu site ao Google Autocomplete.

Agora você pode permitir que seus clientes preencham automaticamente o campo de endereço na página de checkout usando a funcionalidade da plataforma Google Maps.

Para ativar o novo recurso de preenchimento automático do Botiga Pro, vá para Aparência > Painel de temas > Recursos do tema e ative o módulo de preenchimento automático do Google .

Módulo de preenchimento automático do Google no Botiga Pro

Em seguida, crie uma chave de API do Google Autocomplete no Console do Google Cloud (veja como) e vá para Aparência > Personalizar > WooCommerce > painel Checkout .

Aqui, habilite a opção Distraction Free Checkout e adicione a chave API clicando no botão Google Autocomplete Settings .

Check-out sem distrações e configurações de preenchimento automático do Google no Botiga Pro

Comportamento de incremento de quantidade WooCommerce (Pro)

O WooCommerce não possui opções de incremento de quantidade prontas para uso - então adicionamos a capacidade de definir valores mínimos, máximos e padrão e etapas de incremento personalizadas para qualquer produto.

Para definir valores de estoque e adicionar regras de quantidade avançadas, acesse Temas > Painel de Temas e ative o módulo Controle de Etapas de Quantidade .

Em seguida, navegue até Produtos > Todos os produtos e abra a página do produto que deseja modificar.

Role para baixo até o painel Dados do produto > Inventário e você poderá ver as opções nas quais pode alterar os valores de estoque e adicionar regras de quantidade avançadas.

Opções de incremento de quantidade em uma página de produto WooCommerce

Alterações na página de configurações do tema (Grátis + Pro)

Há duas mudanças importantes no Painel de Temas.

Primeiro, movemos a licença de ativação do tema opção para um novo local. Agora, você pode acessá-lo na página Aparência > Painel de temas > Configurações > Administração geral .

Em segundo lugar, você notará uma nova seção de desempenho na página de configurações . Tem uma opção chamada Load Google Fonts .

As fontes do Google são frequentemente sinalizadas para reduzir o tempo de carregamento da página se forem baixadas da CDN (rede de entrega de conteúdo) do Google.

No entanto, o Botiga agora permite que você opte por carregar o Google Fonts localmente para aumentar a velocidade do seu site.

Guia de desempenho no painel do tema do Botiga

Capacidade de adicionar novos campos de produtos usando o plug-in ACF (Pro)

Usando o plug-in Advanced Custom Fields (ACF), agora você pode adicionar campos personalizados às páginas do catálogo de produtos e lojas.

Digamos que você venda camisetas em sua loja e queira adicionar as dimensões, o peso e o endereço do fabricante do produto à página do produto.

Com o Botiga Pro, tudo o que você precisa fazer é instalar e ativar o plug-in ACF e, em seguida, navegar até a página ACF > Grupos de campos na área de administração do WordPress e criar um campo personalizado para cada informação.

Novas opções de campos personalizados avançados no Botiga Pro

Em seguida, role para baixo até a seção Configurações e crie uma regra 'Tipo de postagem é igual ao produto' para o grupo de campos.

Regras do grupo de campos na página de configurações do plugin Advanced Custom Fields

Agora, se você abrir qualquer página de produto, os campos personalizados aparecerão logo abaixo da Descrição do produto .

Você simplesmente precisa adicionar os detalhes personalizados ao seu produto e atualizar a página.

Campos de produto personalizados em uma página de produto Botiga

Capacidade de adicionar vídeos às variações do produto (Pro)

O Botiga Pro agora permite que você adicione vídeos às variações do seu produto, enviando-os para o seu site ou incorporando-os a partir de uma plataforma de hospedagem de vídeo, como o YouTube.

Para fazer isso, abra a página de administração do produto e role para baixo até a seção Dados do produto . Aqui, vá para a opção Variações e clique no link Expandir .

Escolha a variação do produto onde deseja adicionar o vídeo e clique no botão Adicionar mídia .

Se você deseja incorporar um vídeo do YouTube, clique no botão Adicionar vídeo do URL .

Opção para adicionar vídeo às variações do produto em uma página de produto Botiga

Opções de estilo para a barra lateral do filtro da loja e tabelas de tamanhos (Pro)

Agora você pode modificar a cor e o espaçamento da barra lateral e das tabelas de tamanho da loja.

Como estilizar a barra lateral do filtro da sua loja com o Botiga Pro

Para estilizar a barra lateral do filtro da sua loja, abra o menu WooCommerce > Catálogo de produtos no Personalizador e navegue até o submenu Geral > Layout > Layout da barra lateral para verificar se a barra lateral está ativada.

Alternância da barra lateral da loja no Botiga Pro no WordPress Customizer

Em seguida, volte para a opção Catálogo de produtos e abra a guia Estilo .

Na seção Estilo da barra lateral , você pode alterar as cores do plano de fundo, do ícone e do divisor de widget da sua barra lateral. Você também pode aumentar ou diminuir o preenchimento da barra lateral e o espaço entre os widgets.

Opções de estilo detalhadas na interface do usuário do personalizador do Botiga Pro

Como estilizar suas tabelas de tamanhos com o Botiga Pro

Para estilizar suas tabelas de tamanhos, abra o Personalizador e vá para Produto único > Estilo > Tabela de tamanhos .  

A partir daí, você pode alterar as cores de texto e ícone, tamanho e outras configurações de estilo de suas tabelas de tamanho.

Opções de dimensionamento da tabela de tamanhos no WordPress Customizer

Opções de estilo para o aviso da loja (gratuito e profissional)

Com o novo lançamento do Botiga, você também pode customizar o banner de aviso de acordo com a sua necessidade.

Você tem a opção de alterar as cores do plano de fundo, do texto e do link, além de definir o tamanho do banner aumentando ou diminuindo o preenchimento.

Para estilizar o aviso da sua loja, abra o Personalizador e vá para Aviso da loja .

Certifique-se de que a opção Ativar aviso da loja esteja selecionada e, em seguida, vá para a guia Estilo e modifique as cores e o preenchimento do banner.

Opções de personalização de aviso da loja

Capacidade de mostrar o nome da variação abaixo do título do produto (Pro)

Agora você também pode mostrar o nome da variação abaixo do título do produto assim que alguém selecionar uma variação (por exemplo, cor, tamanho, etc.).

Digamos que um cliente queira comprar uma camiseta de sua loja e selecione a variação preta de tamanho médio na página do produto.

Com a opção habilitada, o nome da variação selecionada ('Black Medium' aqui) aparecerá abaixo do título do produto.

Nome da variação sob o título do produto, visualização do front-end

Para ativar nomes de variações nas páginas de produtos, abra o Personalizador , vá para Amostras de produtos > Geral e alterne a opção Nome da variação no título do produto .

Alternância de nome de variação no WordPress Customizer

Novos Sites Iniciantes Excitantes (Pro)

Dois novos sites iniciais, Wine e Plants, foram adicionados à crescente coleção de sites iniciais do Botiga Pro.

Ambos os sites iniciais são eficientes, com aparência profissional e bonitos. Eles também vêm com recursos focados na geração de leads para o seu negócio.

Novos sites iniciais para lojas de vinhos e plantas no Botiga Pro

Ambos os designs de página inicial contêm uma área principal bem projetada que chama a atenção do visitante imediatamente. Os itens mais vendidos da loja também são mostrados antecipadamente, juntamente com depoimentos de clientes e detalhes dos serviços oferecidos por sua empresa.

As demonstrações também incluem modelos projetados profissionalmente para as principais páginas do seu site - como a página sobre, catálogo de lojas, blog e página de contato - que têm uma ótima aparência e oferecem informações valiosas aos seus clientes.

Barra de Progresso “Frete Grátis” (Pro)

Para reduzir o abandono do carrinho e incentivar os visitantes a concluir os pedidos, você pode exibir uma barra de progresso e mostrar o quão perto o visitante está de receber a entrega gratuita.

Você pode habilitar a barra de progresso acessando Aparência > Painel do Tema > Recursos do Tema > Barra de Progresso de Envio Gratuito e pressionando o botão Ativar .

Ative a barra de progresso de frete grátis

Para usar o módulo, você também precisa configurar a barra de progresso.

Para fazer isso, vá para WooCommerce > Configurações > Envio e clique no botão Adicionar zona de envio .

Em seguida, role para baixo até a opção Métodos de envio e clique em Adicionar método de envio .

Adicionar botão de método de envio

Um pop-up aparecerá com um menu suspenso.

Selecione a opção Frete grátis e clique no botão Adicionar método de envio .

Adicionar pop-up de métodos de envio

Na página seguinte, clique no botão Editar abaixo de Frete grátis .

Editar métodos de envio

No pop-up que aparece logo após clicar no botão Editar , você pode definir os requisitos relacionados à barra de progresso do frete grátis.

Por exemplo, você pode definir o valor mínimo do pedido necessário para frete grátis, entre outras coisas.

Configurações de frete grátis

A barra de progresso será exibida automaticamente no carrinho, no minicarrinho e nas páginas de checkout.

Para remover a barra de progresso de qualquer uma dessas páginas, vá para Aparência > Personalizar > Barra de progresso de frete grátis > Geral e desmarque o ícone de olho pertencente à página da qual deseja remover a barra de progresso.

Remova a barra de progresso de frete grátis do carrinho ou das páginas de checkout

Para modificar o design da barra de progresso, vá para Personalizar > Frete Grátis Barra de Progresso > Estilo .

Você tem a opção de personalizar as cores do texto e do plano de fundo, além da capacidade de ajustar a altura e o raio da borda da barra.

Estilizando a barra de progresso de frete grátis

Notificação de Adicionar ao Carrinho (Pro)

Com o novo módulo Add To Cart Notifications, você pode mostrar uma notificação confirmando que um produto foi adicionado ao carrinho.

A notificação aparecerá como uma janela deslizante e mostrará um botão Exibir carrinho para permitir que os clientes acessem facilmente a página do carrinho.

Você pode ativar o módulo acessando Aparência > Painel do tema > Recursos do tema > Notificações de adição ao carrinho e pressionando o botão Ativar .

Ative o módulo Notificações de Adicionar ao Carrinho

Após a ativação, um slide-in aparecerá automaticamente sempre que um produto for adicionado ao carrinho.

Notificação de slide-in Adicionar ao carrinho

Obtenha o novo tema do Botiga hoje!

Isso encerra nossa atualização de produto.

As novas versões do Botiga e do Botiga Pro já saíram, e você já deve ter recebido uma notificação sobre o assunto.

Atualize ambos e experimente os novos recursos e melhorias!

Se você usa apenas o tema gratuito do Botiga, atualize para o Botiga Pro hoje — todas as suas configurações existentes permanecerão intactas e você terá acesso a todos os recursos acima.

Deixe-nos saber na seção de comentários se você tiver alguma dúvida ou sugestão também.