Quando se trata de configurar uma loja online, WooCommerce é o plugin - plugin . É 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, assegure que ela tenha exatamente a estrutura que você tem em mente.
O Avada oferece a capacidade de personalizar a aparência do seu site, o que não é diferente com a integração com o WooCommerce. Usando nossa rede de opções avançadas populares, você pode selecionar entre uma ampla gama de personalizações para uma variedade de possibilidades de design, incluindo:
- O WooCommerce tem seu próprio Painel de opções globais do Avada, separado do painel de opções globais do Avada principal.
- As opções da página Avada estão disponíveis para cada produto.
- O Avada Builder permite que você crie designs de página de produto arrastando e soltando elementos.
Para construir seu site de comércio eletrônico com Avada.
Primeiro, devemos instalar o wooCommerce no Avada.
- Instalando o WooCommerce - Instruções passo a passo
- Como atribuir uma página da loja ao seu site
- Criando Seus Produtos
- Criando o efeito de zoom do produto
- Ajuste das configurações de tamanho da imagem do produto no WooCommerce.
Instalando o WooCommerce - Instruções passo a passo
Vá para Avada> Plugin - plugin / Complementos e procure o plugin WooCommerce , conforme mostrado na captura de tela abaixo.
Etapa 1 - Instale o plugin WooCommerce .
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 deve ser exibido. Se você estiver importando uma de nossas demos do Woo, como Modern Shop ou Classic Shop, você pode pular esta etapa sem o risco de perder seus dados. Para pular adiante, selecione 'Não agora' no menu suspenso. Se você não estiver importando uma de nossas demos do Woo, vá para a próxima etapa clicando no botão 'Vamos lá!' botão para iniciar o processo de configuração.
Passo 4 – Siga os prompts e instruções na tela para concluir o processo e insira as informações necessárias sobre sua loja. Ao clicar no botão 'Criar seu primeiro produto' quando terminar, você poderá continuar a criar seu primeiro produto. Como alternativa, você pode retornar ao seu painel do WordPress clicando no link localizado abaixo da janela de configuração.
Como atribuir uma página da 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 que o Assistente de configuração cria podem ser encontradas neste documento WooCommerce.
Como alternativa, se o Assistente de configuração não aparecer ou se você cancelá-lo por qualquer motivo, você pode sempre retornar ao assistente de configuração selecionando Assistente de configuração no menu Ajuda de qualquer página do WooCommerce, que pode ser encontrada 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. O WooCommerce exibirá seus produtos nesta página como resultado de sua ação.
As páginas restantes podem ser configuradas na guia Avançado, encontrada em WooCommerce > Configurações > Avançado .
Criando Seus Produtos
Passo 1 – Na barra lateral do WordPress Admin, navegue até a aba 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 Dados produto ' com todas as informações do produto. Por exemplo , preço, SKU e frete são todas as opções possíveis amp
Passo 5 – Na produto ', digite uma descrição sucinta do seu produto que aparecerá ao lado de suas imagens principais.
Isso deve ser preenchido para cada produto.
Passo 7 – Adicione mais imagens à Galeria produtos ' se você quiser usar uma galeria de imagens em vez de uma única imagem.
Passo 8 – Na Categorias 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 ' Product Tags '.
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 o efeito de zoom do produto
Se você estiver usando o Avada Layouts, precisará certificar-se de que a opção WooCommerce Product Images Zoom esteja habilitada em Avada > Options > WooCommerce > General WooCommerce > WooCommerce Product Images Zoom option aba Woo Product Images Element Imagens do produto Zoom se você estiver usando layouts WooCommerce.
Largura das imagens do produto WooCommerce – A largura da sua imagem principal (veja a configuração abaixo) e o tamanho real da imagem carregada precisarão ser maiores 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 sua 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 do que a configuração de largura da imagem principal no design do seu site.
Certifique-se de gerar novamente suas miniaturas após alterar os tamanhos de imagem do WooCommerce; Isso aplicará seus novos tamanhos de imagem a todas as imagens que já foram enviadas ao seu site. Você pode usar o plugin Regenerate Thumbnails para fazer isso.
Ajuste das configurações de tamanho da imagem do produto no WooCommerce.
O WooCommerce inclui opções para ajustar o tamanho das imagens de 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 por sua loja WooCommerce. Ao definir essas configurações de tamanho de imagem, é importante lembrar que as configurações das 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ê pode 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 de imagem. Qualquer coisa que caia abaixo do limite especificado não será redimensionado.
Ao configurar sua loja, certifique-se de que as configurações de tamanho de imagem do WooCommerce e o tamanho real de suas imagens sejam levados em consideração. Em resumo, suas imagens devem ser do mesmo tamanho ou maiores do 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 as miniaturas para que tenham efeito nas imagens que já foram enviadas ao seu site. Portanto, usar o plugin Regenerate Thumbnails é altamente recomendado. Além disso, os tamanhos das imagens podem ser ajustados usando as etapas abaixo:
Passo 1 – Na barra lateral do seu administrador, navegue na Aparência ' e depois na aba ' Personalizar ' para começar a personalizar seu site.
Passo 2 – Navegue até a WooCommerce ' na parte superior da página.
Passo 3 guia ' Imagens Produto ' da janela de configuração
Etapa 4 – Ao fazer upload de imagens para suas páginas de produtos únicos, selecione a opção de largura da imagem principal. 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 as miniaturas após alterar os tamanhos das imagens e salvá-las, você precisará usar o plugin , que pode ser encontrado na seção Plugin s. plugin Regenerate Thumbnails e, em seguida, navegue até a WP Admin > Tools , onde você pode optar por regenerar suas miniaturas de imagem, criando os novos tamanhos de imagem.
