Quando se trata de criar uma loja online, o WooCommerce é o pluginideal. É extremamente simples configurar uma loja virtual e começar a vender seus produtos assim que terminar. O Avada oferece suporte completo e integração de design para o WooCommerce, permitindo que você crie a loja dos seus sonhos e garantindo que ela tenha exatamente a aparência que você imaginou.
O Avada tem como objetivo principal oferecer a você a capacidade de personalizar a aparência do seu site, e com a integração ao WooCommerce não é diferente. Usando nossa popular rede de opções avançadas, você pode selecionar entre uma ampla gama de personalizações para diversas possibilidades de design, incluindo:
- O WooCommerce possui seu próprio Painel de Opções Globais do Avada, separado do Painel de Opções Globais principal do Avada.
- As opções de página do Avada estão disponíveis para cada produto.
- O Avada Builder permite criar designs de páginas de produtos arrastando e soltando elementos.
Para criar seu site de comércio eletrônico com o Avada.
Primeiramente, precisamos instalar o WooCommerce no Avada.
- Instalando o WooCommerce – Instruções passo a passo
- Como atribuir uma página de loja ao seu site
- Criando seus produtos
- Criando efeito de zoom no produto
- Ajustando as configurações de tamanho da imagem do produto no WooCommerce.
Instalando o WooCommerce – Instruções passo a passo
Acesse Avada > Plugin /Complementos e procure o plugin , como mostrado na captura de tela abaixo.
Passo 1 – Instale o plugin .
Passo 2 – Selecione 'Instalar' no menu suspenso.
O plugin será instalado e ativado automaticamente.
Passo 3 – Em seguida, o Assistente de Configuração do WooCommerce será exibido. Se você estiver importando uma de nossas demonstrações do WooCommerce, como a Loja Moderna ou a Loja Clássica, pode pular esta etapa sem o risco de perder seus dados. Para prosseguir, selecione "Agora não" no menu suspenso. Se você não estiver importando uma de nossas demonstrações do WooCommerce, prossiga para a próxima etapa clicando no botão "Vamos lá!" para iniciar o processo de configuração.
Passo 4 – Siga as instruções na tela para concluir o processo e inserir as informações necessárias sobre sua loja. Ao clicar no botão "Criar seu primeiro produto" quando terminar, você poderá criar seu primeiro produto. Como alternativa, você pode retornar ao painel do WordPress clicando no link localizado abaixo da janela de configuração.
Como atribuir uma página de loja ao seu site
Como parte do processo normal de instalação do WooCommerce, o Assistente de Configuração deve ser iniciado, permitindo que você configure sua loja e atribua as páginas da loja aos clientes. Mais informações sobre as páginas criadas pelo Assistente de Configuração podem ser encontradas neste documento do WooCommerce.
Alternativamente, se o Assistente de Configuração não aparecer ou se você o cancelar por qualquer motivo, poderá sempre retornar ao Assistente de Configuração selecionando-o no menu Ajuda em qualquer página do WooCommerce, localizado no canto superior esquerdo da janela.
Você pode definir manualmente a página da loja acessando a aba Produtos nas Configurações do WooCommerce – WooCommerce > Configurações > Produtos – e selecionando a página que será a página principal da loja no menu suspenso. O WooCommerce exibirá seus produtos nessa página como resultado dessa ação.
As páginas restantes podem ser configuradas na aba Avançado, encontrada em WooCommerce > Configurações > Avançado .
Criando seus produtos
Passo 1 – Na barra lateral do painel de administração do WordPress, navegue até a aba Produtos > Adicionar Produto.
Passo 2 – Na parte superior da página, insira o nome do seu produto.
Passo 3 – Preencha o campo de conteúdo da publicação com o texto da descrição do produto. Todas as informações do produto serão exibidas nesta seção.
Passo 4 – Preencha o campo ' Dados do Produto ' com todas as informações do produto. Por exemplo amp preço, SKU e frete são opções possíveis.
Passo 5 – Na caixa ' Descrição curta do produto ', digite uma descrição sucinta do seu produto que aparecerá ao lado das imagens principais.
Etapa 6 – A imagem principal deve ser colocada abaixo da caixa ' Imagem do Produto ' no lado direito da página; isso deve ser feito para cada produto.
Passo 7 – Adicione mais imagens à caixa ' Galeria de Produtos ' se desejar usar uma galeria de imagens em vez de uma única imagem.
Passo 8 – Na caixa ' Categorias de Produtos ', insira as categorias que se aplicam aos seus produtos. Em seguida, preencha os campos em branco com as etiquetas apropriadas para o seu produto na caixa ' Etiquetas do Produto '.
Passo 9 – Depois de inserir todas as informações necessárias, clique no botão ' Publicar ' e o item aparecerá na página principal da sua loja.
Criando efeito de zoom no produto
Se você estiver usando o Avada Layouts, precisará garantir que a opção "Zoom das imagens do produto WooCommerce" esteja ativada em Avada > Opções > WooCommerce > Geral > Opção "Zoom das imagens do produto WooCommerce" ou na guia Geral do elemento Imagens do produto WooCommerce > Zoom das imagens do produto, caso esteja usando o WooCommerce Layouts.
Largura das imagens de produtos do WooCommerce – A largura da sua imagem principal (veja a configuração abaixo) e o tamanho real da imagem carregada precisam ser maiores que a definida em Avada > Opções > WooCommerce > Geral > Largura das imagens de produtos do WooCommerce ou a configuração Largura máxima das imagens de produtos no elemento Imagens de produtos do WooCommerce. A largura da coluna do contêiner para uma galeria de produto individual será determinada pelas configurações escolhidas. Depois de fazer os ajustes necessários, você estará pronto para definir a largura da sua imagem principal do WooCommerce.
Largura da imagem principal no WordPress – A configuração de Largura da imagem principal do WooCommerce pode ser encontrada no Personalizador do seu site WordPress. No painel do WordPress, navegue até Aparência > Personalizar > WooCommerce > Imagens do produto , onde você encontrará a configuração de Largura da imagem principal; isso determinará o tamanho real da imagem exibida na galeria.
Quanto mais detalhado for o efeito de zoom, maior deverá ser o tamanho da imagem definido. Para esclarecer, se o tamanho da imagem nas configurações do WooCommerce corresponder à largura da imagem nas opções globais do Avada, nenhum zoom será visível ao passar o cursor sobre a imagem na página. Além disso, o tamanho da imagem que você enviar deve ser igual ou maior que a configuração de Largura da Imagem Principal no design do seu site.
Certifique-se de regenerar as miniaturas após alterar os tamanhos de imagem do WooCommerce; isso aplicará os novos tamanhos a todas as imagens já carregadas no seu site. Você pode usar o plugin Regenerate Thumbnails para isso.
Ajustando as configurações de tamanho da imagem do produto no WooCommerce.
O WooCommerce inclui opções para ajustar o tamanho das imagens dos produtos nas seções de Catálogo e Imagens de Produto Único da loja. Além disso, existem configurações específicas do Avada que funcionam em conjunto com os tamanhos de imagem usados pela sua loja WooCommerce. Ao configurar essas opções de tamanho de imagem, é importante lembrar que as configurações globais do Avada também devem ser consideradas. Abordaremos cada uma dessas opções com mais detalhes posteriormente.
Suponha que as imagens que você carrega para seus produtos sejam menores na origem do que os tamanhos de imagem especificados nas suas configurações do WooCommerce. Nesse caso, você pode notar algumas discrepâncias visuais no layout da sua loja. Isso não é um bug. Simplesmente acontece porque suas imagens eram pequenas demais para que as configurações do WooCommerce pudessem afetá-las. Você pode pensar nessas configurações como a largura e altura máximas para suas imagens em termos de dimensões. Qualquer imagem que fique abaixo do limite especificado não será redimensionada.
Ao configurar sua loja, certifique-se de levar em consideração tanto as configurações de tamanho de imagem do WooCommerce quanto o tamanho real das suas imagens. Em resumo, suas imagens devem ter o mesmo tamanho ou serem maiores que as configurações de tamanho de imagem da sua loja WooCommerce.
Qualquer alteração nas configurações de tamanho de imagem exigirá que você gere novas miniaturas para que elas entrem em vigor nas imagens já carregadas no seu site. Portanto, o uso do plugin Regenerate Thumbnails é altamente recomendado. Além disso, os tamanhos de imagem podem ser ajustados seguindo os passos abaixo:
Passo 1 – Na barra lateral de administração, navegue até a aba ' Aparência ' e, em seguida, até a aba ' Personalizar ' para começar a personalizar seu site.
Passo 2 – Navegue até a aba ' WooCommerce ' na parte superior da página.
Passo 3 Imagens do Produto da janela de configuração .
Passo 4 – Ao carregar imagens para as páginas individuais dos seus produtos, selecione a opção de largura da imagem principal. A largura da miniatura é a largura das miniaturas dos seus produtos no catálogo. Preencha os campos em branco com o valor de largura desejado.
Passo 5 – Para regenerar as miniaturas depois de alterar os tamanhos das imagens e salvá-las, você precisará usar o plugin , que pode ser encontrado na Plugin . Primeiro, instale o plugin e, em seguida, acesse WP Admin > aba Ferramentas, onde você poderá escolher regenerar as miniaturas das imagens, criando os novos tamanhos de imagem.
