Quando se trata de abrir uma loja online, WooCommerce é o plugin ideal. É ridiculamente simples abrir uma loja online e começar a vender seus produtos assim que terminar. Avada fornece suporte abrangente e integração de design para WooCommerce, permitindo que você crie a loja dos seus sonhos e ao mesmo tempo garante que ela tenha exatamente a moldura que você tem em mente.
O objetivo do Avada é dar a você a capacidade de personalizar a aparência do seu site, o que não é diferente com a integração do WooCommerce. Usando nossa popular rede de opções avançadas, você pode selecionar entre uma ampla variedade de personalizações para diversas possibilidades de design, incluindo:
- WooCommerce tem seu próprio painel de opções globais Avada, separado do painel principal de opções globais Avada.
- As opções de página Avada estão disponíveis para cada produto.
- Avada Builder permite criar designs de páginas de produtos arrastando e soltando elementos.
Para construir seu site de comércio eletrônico com Avada.
Primeiro, devemos instalar o wooCommerce no Avada.
- Instalando WooCommerce – instruções passo a passo
- Como atribuir uma página de loja ao seu site
- Criando seus produtos
- Criando efeito de zoom do produto
- Ajustando as configurações de tamanho da imagem do produto no WooCommerce.
Instalando WooCommerce – instruções passo a passo
Vá para Avada > Plugin /Add-ons e procure o plugin , conforme mostrado na imagem abaixo.
Passo 1 – Instale o plugin .
Passo 2 – Selecione ‘Instalar’ no menu suspenso.
O plugin será instalado e ativado automaticamente.
Passo 3 – Depois disso, o Assistente de Configuração do WooCommerce deverá ser exibido. Se estiver importando uma de nossas demos Woo, como Modern Shop ou Classic Shop, você pode pular esta etapa sem correr o risco de perder seus dados. Para avançar, selecione 'Agora não' no menu suspenso. Se você não estiver importando uma de nossas demos Woo, prossiga para a próxima etapa clicando no botão 'Vamos lá!' botão para iniciar o processo de configuração.
Passo 4 – Siga as instruções e 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á prosseguir com a criação de seu primeiro produto. Alternativamente, 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 sua loja aos clientes. Mais informações sobre as páginas criadas pelo Assistente de Configuração podem ser encontradas neste documento WooCommerce.
Alternativamente, se o Assistente de Configuração não aparecer, ou se você cancelá-lo por qualquer motivo, você pode retornar ao Assistente de Configuração selecionando Assistente de Configuração no menu Ajuda em qualquer página do WooCommerce, que pode ser encontrado no canto superior esquerdo do janela.
Você pode definir manualmente a página da loja acessando a guia 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. WooCommerce exibirá seus produtos nesta página como resultado de sua ação.
As demais páginas podem ser configuradas na aba Avançado, encontrada em WooCommerce > Configurações > Avançado .
Criando seus produtos
Passo 1 – Na barra lateral do administrador do WordPress, navegue até a guia Produtos > Adicionar produto.
Passo 2 – No topo da página, digite o nome do seu produto.
Passo 3 – Preencha o campo de conteúdo do post com o texto da descrição do produto. Todas as informações do produto serão exibidas nesta seção.
Passo 4 – Preencha a caixa ‘ 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 breve do produto ’, digite uma descrição sucinta do seu produto que aparecerá ao lado das imagens principais.
Passo 6 – A imagem principal em destaque deve ser colocada na caixa ' Imagem do Produto ' no lado direito da página; Isso deve ser preenchido para cada produto.
Passo 7 –Adicione mais imagens à caixa ‘ Galeria de Produtos ’ se quiser 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 espaços em branco com as tags apropriadas para o seu produto na caixa ‘ Tags de 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 do produto
Se estiver usando Avada Layouts, você precisará certificar-se de que a opção WooCommerce Product Images Zoom está habilitada em Avada > Options > WooCommerce > General WooCommerce > WooCommerce Product Images Zoom option ou na guia Woo Product Images Element General > Amplie as imagens do produto se você estiver usando layouts WooCommerce.
Largura das imagens do produto WooCommerce – A largura da imagem principal (veja a configuração abaixo) e o tamanho real da imagem carregada precisarão ser maiores do que Avada > Opções > WooCommerce > WooCommerce geral > Largura das imagens do produto WooCommerce ou a configuração Largura máxima das imagens do produto no elemento Woo Product Images. A largura da coluna do contêiner para uma única galeria de produtos será determinada pelas configurações que você escolher. Depois de fazer os ajustes necessários, você estará pronto para definir a largura da imagem principal do WooCommerce.
Largura da imagem principal do 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é Appearance > Customize > WooCommerce > Product Images , onde você encontrará a configuração Main Image Width; Isso determinará o tamanho real da imagem exibida na galeria.
Quanto mais detalhado for o efeito de zoom, maior será o tamanho da imagem que você definiu para sua imagem. 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 quando o mouse passar sobre a imagem na página. Além disso, o tamanho da imagem real que você carrega deve ser igual ou maior que a configuração Largura da imagem principal no design do seu site.
Certifique-se de gerar novamente suas miniaturas após alterar os tamanhos das imagens WooCommerce; Isso aplicará os novos tamanhos de imagem a todas as imagens que já foram enviadas para o seu site. Você pode usar o plugin Regenerate Thumbnails para fazer isso.
Ajustando as configurações de tamanho da imagem do produto no WooCommerce.
WooCommerce inclui opções para ajustar o tamanho das imagens dos produtos nas seções 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 definir essas configurações de tamanho de imagem, é importante lembrar que as configurações de opções globais do Avada também devem ser consideradas. Examinaremos 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 configurações do WooCommerce. Nesse caso, você poderá notar algumas discrepâncias de layout visual no front-end das páginas da sua loja; Isso não é um bug de forma alguma. É simplesmente porque suas imagens eram muito pequenas para que as configurações do WooCommerce as afetassem. Você pode pensar nessas configurações como a largura e altura máximas para suas imagens em termos de dimensões da imagem. Qualquer coisa que fique abaixo do limite especificado não será redimensionada.
Ao configurar sua loja, certifique-se de que as configurações de tamanho da imagem WooCommerce e o tamanho real de suas imagens sejam levados em consideração. Em resumo, suas imagens devem ser do mesmo tamanho ou maiores que as configurações de tamanho de imagem em sua loja WooCommerce.
Quaisquer alterações nas configurações de tamanho da imagem exigirão que você gere novamente suas miniaturas para que tenham efeito nas imagens que já foram enviadas para o seu site. Portanto, usar o plugin Regenerate Thumbnails é altamente recomendado. Além disso, os tamanhos das imagens podem ser ajustados seguindo as etapas abaixo:
Passo 1 – Na barra lateral do administrador, navegue na guia ‘ Aparência ’ e depois na guia ‘ Personalizar ’ para começar a personalizar seu site.
Passo 2 – Navegue até a aba ‘ WooCommerce ’ no topo da página.
Passo 3 Imagens de Produto da janela de configuração .
Passo 4 – Ao fazer upload de imagens para suas páginas de produtos individuais, 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 espaços em branco com o valor de largura desejado.
Passo 5 – Para regenerar miniaturas depois de alterar o tamanho das imagens e salvá-las, você precisará usar o plugin , que pode ser encontrado na Plugin . Primeiro, instale o plugin e depois navegue até a WP Admin > Ferramentas , onde você pode optar por regenerar suas miniaturas de imagens, criando os novos tamanhos de imagem.
