Como criar um site de comércio eletrônico usando WordPress e Elementor 2020

Neste tutorial, estou ensinando como criar um site de comércio eletrônico usando o WordPress e o Elementor 2020 que você pode personalizar totalmente.

O WordPress é a plataforma CMS mais usada para construir todos os tipos de sites, incluindo sites de comércio eletrônico. Além disso, você aprenderá a usar o construtor de páginas Elementor para criar páginas da Web incríveis, que agora é o construtor de páginas número 1 e mais popular do WordPress. O WordPress controla mais de 1/3 da internet. A maioria das grandes empresas de comércio eletrônico como Sony, Bata, eBay e muitas outras, estão usando if para desenvolvimento e manutenção de seu site E a melhor parte de usar um WordPress é que você não precisa aprender nenhum tipo de linguagem de codificação ou qualquer outra jargão técnico para fazer seu site. É uma plataforma simples de arrastar e soltar que oferece muitos modelos e layouts embutidos que ajudam a criar um site atraente e fácil de usar. Além disso, fornecerei modelos pré-fabricados que você pode importar facilmente e colocar seu site de comércio eletrônico em funcionamento em questão de minutos.

Basta passar por todo este tutorial para deixar você pronto para criar seu próprio site e funcionar sem qualquer ajuda externa. Este tutorial tem ajudado muitas pessoas a criar seu site e fazer com que seus negócios tenham uma vantagem sobre a concorrência neste brutal setor de comércio eletrônico. Então, passe por este tutorial fácil e autoexplicativo e adquira uma habilidade que o ajudará em toda a sua vida. Todo o processo foi ensinado em uma abordagem passo a passo e todos os infográficos e representações pictóricas são fornecidos para torná-lo o mais fácil de entender possível.

Então, vamos começar a criar um site de comércio eletrônico usando WordPress e Elementor 2020

Introdução a um site de comércio eletrônico

A imagem acima é um exemplo de uma página inicial ou página de destino de um site de comércio eletrônico típico. As páginas de destino são muito cruciais para conversões e vendas no site de comércio eletrônico. Assim, a página de destino deve ser atraente contendo banners e notificações de vendas e preços reduzidos ou de novidades especialmente para sites de comércio eletrônico. Para obter conversão, você precisa enfatizar seus produtos mais vendáveis ​​na página de destino e fornecer uma ligação fácil a esses produtos. Você pode exibir suas categorias de produtos na página de destino e fornecer um link para elas.

Na parte superior, temos um cabeçalho que contém nossa localização, telefone, nossos números de contato à esquerda e à direita, temos nossos ícones de páginas de mídia social do Facebook, Twitter, YouTube, etc. Abaixo disso, temos uma loja botão que liga à página de compras de produtos do nosso site. Além disso, temos um botão Conta, clicando no qual os usuários podem acessar seu próprio painel pessoal para acessar e gerenciar suas informações e compras. Também temos o logotipo do nosso negócio no próprio cabeçalho. No meio, temos nosso link para nossas páginas viz. Home, Sobre Nós, Loja, Minha Conta e Fale Conosco.

Depois disso você tem todos os seus produtos e banners, que aprenderá a criar neste tutorial, mostrado de forma bem atrativa . Depois disso, temos também uma seção de Newsletter, onde os usuários podem se inscrever em seu site e não notificações e e-mails sobre produtos, ofertas, cupons, etc. Abaixo disso temos nosso rodapé, fornecendo informações sobre nós e um botão de assinatura de e-mail.

Como você pode ver na imagem, a página da loja lista todos os produtos disponíveis em nosso site, onde os usuários podem conferir qualquer produto clicando neles. Na barra lateral, temos um filtro de Preços, lista de categorias, resenhas e anúncios em vídeo de nossos produtos. Abaixo de cada produto, há também formulário de avaliação e produtos relacionados. Em seguida, temos a página Sobre nós exibindo a descrição do seu negócio e informações sobre sua equipe. E então temos uma página de contato onde os usuários podem entrar em contato conosco usando um formulário de contato. Em seguida, temos um painel Minha conta que terá um painel pessoal para cada cliente que contém suas informações pessoais, de compra e pagamento.

Você pode ver a página do carrinho depois de comprar algo como você pode ver na imagem, onde você pode alterar os detalhes da sua compra, verificar o valor total e proceder ao pagamento. Em seguida, os visitantes podem fazer o check-out preenchendo os dados de envio e pagando pela compra. Aprenderemos a criar todas essas páginas passo a passo neste tutorial para que seu site esteja completamente pronto para iniciar negócios.

Obtenha hospedagem e instale o WordPress e Elementor

• Compra de domínio NameHero

A primeira coisa que precisamos fazer para criar um site é obter um nome de domínio e hospedagem para seu site. Você precisa selecionar uma boa hospedagem, pois todo o seu site será baseado e suportado em seu site de hospedagem, portanto, você precisa verificar e comparar várias hospedagens com base em critérios como confiabilidade, suporte técnico, espaço, títulos, design, oportunidades de SEO etc.

Existem vários provedores de hospedagem no mercado e a maioria deles tem ofertas diferentes. Eu tentei muitos deles e finalmente decidi o NameHero para todos os meus sites. Eu o uso pessoalmente e o comparei com 22 outras hospedagens e as achei as melhores. Como você pode ver na imagem, eles têm 4 opções diferentes e eu recomendo a opção Plus Cloud para um site de comércio eletrônico. Você pode usar meu link para obter um desconto. www.namehero.com/darrelwilson

Depois de solicitar seu plano, você poderá escolher o nome do seu domínio, ou seja, o nome do seu site. Você pode escolher o nome que quiser. Você pode selecionar seu domínio de acordo com sua necessidade de gostar de .net, .biz etc. O próximo e último passo é preencher suas informações sobre a conta e detalhes de pagamento. É altamente recomendável obter a Proteção de ID na caixa de seleção do complemento, pois ela protege você contra spammers. Finalize a compra clicando nas próximas páginas e passando pelo processo de pagamento.

• Instalar o WordPress

Para instalar o WordPress em sua hospedagem, acesse sua 'Área de Cliente' na sua página de hospedagem, clique em 'Cloud Web Hosting'. Em seguida você tem Meus Produtos e Serviços, onde você verá o pacote Plus Cloud com seu nome de domínio, clique no botão Ativo ao lado dele como você pode ver na imagem. Em seguida, à esquerda, você verá o botão 'Ir para o cpanel' e clique nele. Na próxima página, como você pode ver na imagem, role para baixo até a categoria de software e clique em 'WordPress Manager by Softaculous'.

Isso abrirá um instalador do WordPress, clique no botão Instalar agora. Uma página de configuração será aberta contendo a versão, seu nome de domínio e diretório como você pode ver na imagem. POR FAVOR, REMOVA QUALQUER COISA ESCRITA NO DIRETÓRIO. TAMBÉM NO PROTOCOLO ESCOLHA 'https:/'. Nas configurações do site, você pode alterar o nome e a descrição do site. Podemos fazer isso mais tarde também. Coloque seus detalhes de administrador, como nome de usuário, senha e e-mail, que serão seus detalhes de login do WordPress. Na próxima página, role para baixo os modelos, pois não os estamos usando e clique em 'Instalar'. Clique no link do URL do administrador fornecido na próxima página e seu novo WordPress será criado e estará disponível na internet. Agora você está no seu painel do WordPress como na imagem onde você pode editar seu site.

• Configurações gerais do WordPress

Antes de projetar seu site, vamos aprender a alterar suas configurações no painel do WordPress. No seu painel do WordPress, você verá várias abas à esquerda da página, como você pode ver na imagem. Uma das mais importantes é a guia 'Configurações', onde você encontrará as configurações gerais do WordPress. Você deve alterar seu link permanente de 'Dia e nome' para 'Nome da postagem' para facilitar a compreensão do endereço do seu site. Isso também é muito importante para o seu SEO. Outra guia no seu painel do WordPress é a 'Usuários', onde você personaliza seu perfil e a aparência do seu painel do WordPress. Clique em 'Salvar alterações' para atualizá-lo.

Para fazer login no WordPress novamente depois de sair, você precisa digitar seu URL na barra de endereço seguido de '/ wp-admin', que o levará à página de login do WordPress, onde você pode colocar seu nome de usuário e senha para fazer login.

Criando páginas e Menu

Você criou um site funcional agora, ainda não está completo. Agora você precisa adicionar páginas ao seu site. No seu painel do WordPress, clique na guia 'Páginas' e selecione a opção 'Adicionar novo'. Você também pode fazer isso clicando no botão 'Adicionar novo' na parte superior da página. Ao fazer isso, o painel abrirá um editor de páginas, conforme mostrado na imagem abaixo, onde você poderá criar sua nova página. Aqui, você pode colocar o nome da página e projetar o layout da página. Clique no botão 'Publicar' e sua página da web é criada. Aqui neste tutorial vamos criar páginas básicas como Home, About Us e Contact que são exigidas por cada site. Por enquanto, não estamos entrando no conteúdo das páginas que faremos mais tarde. Você pode visualizar essas páginas clicando em visualizar abaixo do nome da página no painel do WordPress.

Depois de criar páginas separadas, você precisa criar um menu para poder navegar por essas páginas. Criar um menu é muito fácil usando o WordPress. Basta navegar até o seu painel, encontrar a guia 'Aparência' e clicar em 'Menus'. Isso abrirá um editor de menus, onde você poderá criar e nomear seus menus como você pode ver na imagem abaixo. Depois de criar um menu, você pode atribuir diferentes páginas do seu site ao menu. Você sempre pode reatribuir a cronologia dos itens de menu e criar um menu suspenso colocando um item sob o outro arrastando e soltando.

Agora o que você deve fazer é clicar em 'Personalizar' no canto superior esquerdo como mostrado na imagem e ir em 'Configurações da página inicial' e alterar sua página inicial para 'Uma página estática' e escolher sua página inicial como a página estática, que você deve selecione na lista suspensa. Você faz isso para que toda vez que alguém visitar seu site, ele seja sempre direcionado para sua página inicial. Entrar diretamente em alguma outra página, como sua página Sobre nós, página de contato ou suas postagens mais recentes, não fará sentido para os espectadores.

Baixar Elementor

Agora precisamos comprar nosso construtor de páginas Elementor pro, que usaremos para criar as páginas da web do nosso site de comércio eletrônico. Você pode comprá-lo usando meu link.www.darrelwilson.com/elementor.Na página deles, você pode conferir vários pacotes disponíveis. Não podemos usar a versão gratuita, pois precisamos do construtor de temas e dos serviços do construtor Woocommerce. Depois de comprar o seu pacote, ele será aberto na sua conta, conforme mostrado na imagem, onde você deve clicar em 'Download Plugin' e um zip while será baixado.

Em seguida, você precisa enviá-lo para o seu site WordPress. Vá para o seu painel no seu WordPress, clique em 'Plugins' na barra de ferramentas à esquerda, clique em 'Adicionar novo' e seu plugin de adição será aberto como mostrado na imagem. Clique em 'Upload Plugin' e selecione seu arquivo zip Elementor e instale-o. Clique em 'Ativar plugin' e um novo botão 'Elementor' será criado na barra de ferramentas do WordPress. Vá até lá e clique em 'Conectar e Ativar'.

Instale temas do WordPress

Agora vamos instalar um tema WordPress em nosso site. O WordPress oferece vários temas pré-projetados para você escolher, para a aparência do seu site. Na guia "Aparência" do painel do WordPress, você encontrará o botão "Tema" a partir do qual poderá instalar um tema. Você pode selecionar qualquer tema entre as opções disponíveis. Para o propósito deste tutorial, vamos usar o tema Astra que você pode encontrar no menu popular. Clique em 'Ativar' abaixo do nome do tema. 'A melhor parte de usar este tema é que ele inclui toda a configuração e funcionalidade básicas necessárias para a execução de um site e é muito compatível com o construtor de páginas Elementor.

Editar páginas com Elementor

Agora vamos aprender como editar nossas páginas com o Elementor. Vá para a página inicial do seu site WordPress e clique em 'Editar página' na linha preta superior que abrirá o editor de páginas. Primeiro vamos alterar as configurações da página no lado direito, conforme mostrado na imagem. Altere o layout do conteúdo para 'Full Width Stretch' e selecione 'Disable Title', pois queremos essa configuração para nossa página inicial.

Agora clique em 'Editar com Elementor' para abrir o Elementor Editor como mostrado na imagem. Vamos ter um tutorial rápido do editor Elementor aqui. Para adicionar uma nova seção à página, clique no botão Mais e selecione o padrão de coluna desejado. Para adicionar os elementos, clique nos 9 pontos na barra de ferramentas do lado esquerdo que lhe dará uma lista de elementos como na imagem. Você pode arrastar e soltar qualquer um desses elementos que desejar na página e editá-los.

Depois de clicar em qualquer módulo na página, sua barra de ferramentas de edição aparecerá à esquerda. Aqui na imagem, estamos editando o título, então apareceu 'Editar título' que contém 3 abas. 1 ^º é o conteúdo que dá várias opções para o conteúdo do elemento. ^2º é Estilo onde você pode desenhar o estilo como cor, tamanho, fonte etc. do elemento. E o ^3º é Avançado onde você pode colocar animações e outras coisas. Da mesma forma, você pode adicionar, editar e estilizar uma caixa de texto da mesma maneira abaixo do título.

Você pode adicionar um botão e fornecer um link para qualquer outro site que será aberto ao clicar nele. Você pode alterar a configuração para 'Abrir uma nova janela', para que os usuários não saiam do nosso site. Você também pode selecionar um ícone para seu botão na Galeria de ícones. Tudo isso estará na barra de ferramentas 'Editar botão' à esquerda, conforme mostrado na imagem.

Agora, em vez de projetar cada elemento separadamente, podemos usar os modelos pré-fabricados e bloquear clicando no ícone da pasta no Elementor. Na biblioteca, você pode selecionar uma página inteira ou seções ou blocos específicos. Existem todas as categorias de Blocos disponíveis conforme sua necessidade. Para a página de destino, selecione qualquer bloco da categoria Hero. Selecionei o som do futuro no exemplo.

Construindo a página inicial

Agora vamos criar uma página parecida com a Homepage, que vimos na seção de introdução, usando este bloco. Primeiro vamos mudar o plano de fundo para toda a seção. Para editar a seção inteira, clique nos seis pontos na parte superior da seção, conforme mostrado na imagem. Agora você verá a barra de ferramentas 'Edit Section' de onde você pode usar Style to tab para alterar o plano de fundo. Aqui está um LINK PARA AS IMAGENS DE DEMONSTRAÇÃO GRATUITAS que você pode usar em seu site de comércio eletrônico. Carregue essas imagens no Elementor em seguida e selecione a imagem para plano de fundo. Você pode alterar a sobreposição do plano de fundo se parecer escuro.

Agora você pode editar os elementos do bloco como fizemos anteriormente. Altere o texto, cor, fonte, topografia etc. Você pode usar duplicado clicando no botão azul no canto superior direito de um elemento. Você pode adicionar divisor entre caixas de texto e estilizá-lo da maneira que quiser usando o 'Editar divisor'. Agora edite o botão de acordo com nosso design, como adicionar ou reduzir o preenchimento para alterar o espaço ao redor dele. Vamos vincular este botão à nossa página da Loja mais tarde, você também pode adicionar um ícone a ele. Você pode alterar o estilo e a animação para quando passar o mouse sobre tudo na barra de ferramentas 'Editar botão', conforme mostrado na imagem.

Em seguida, coloque o título animado das Seções Pro Elements rolando para baixo na barra de ferramentas do elemento. Você pode alterar o estilo do título, forma, cor, topografia etc. usando a barra de ferramentas 'Editar título animado' como mostrado na imagem. Você pode verificar todos os elementos e estilos e projetar as coisas da maneira que desejar. Há muitas tentativas e erros envolvidos em encontrar o design perfeito. Clique no botão 'Atualizar' para aplicar essas alterações ao seu site.

Em seguida, na página de destino, temos que criar seções com links para várias categorias, como seção feminina, seção masculina e recém-chegados. Adicione uma nova seção de 3 colunas, adicione cabeçalho, texto e botão nelas. Você pode criar um e duplicar duas vezes para economizar tempo e esforços. Novamente, você terá que editar o texto, estilos, plano de fundo etc. desta seção, como fizemos na seção acima. Você pode usar as imagens fornecidas por mim para o plano de fundo para todas as 3 categorias. Ao usar o editor de texto, para finalizar a linha e ir para a próxima linha, como aqui estamos fazendo com a seção feminina, use <br> como mostra a imagem.

Aqui não temos nenhum modelo ou bloco nesta seção, então você terá que criar e estilizar cada seção do zero, o que pode parecer uma tarefa longa pela ^primeira vez, mas você pode usar todo o arrastar e soltar e truques como duplicação, como copie o botão 'Comprar agora' feito na seção acima e apenas mude o estilo do botão ou passe o mouse em vez de fazer do zero. Você terá que ver todas as opções na barra de ferramentas Editar para cada elemento para descobrir qual se adapta melhor ao seu gosto. Este será um ótimo exercício para o seu senso artístico. Para alterar o espaçamento do conteúdo dentro de uma coluna, clique no ícone Editar Coluna no canto superior esquerdo da coluna para abrir a barra de ferramentas 'Editar Coluna' onde você pode alterar o preenchimento na seção avançada como você pode ver na imagem abaixo.

Você pode duplicar as colunas da linha e depois editar o texto e o plano de fundo para as outras duas categorias da seção Masculina e Novidades para não precisar estilizá-las novamente. Você deve estilizar a imagem de fundo e a cor do texto de cada seção de forma diferente para que cada categoria seja visível distintamente. Se o primeiro tiver uma imagem de fundo escura com uma cor de texto clara, o próximo deve ser o oposto. Todas essas técnicas, você aprenderá quando começar a projetar e ver esses efeitos por conta própria. Use forlay de fundo para enfatizar o texto acima da imagem, também ajuste a posição do texto usando arrastar e soltar ou a opção Alinhamento para que não cubra os rostos na imagem de fundo. Você também pode alterar a posição da imagem de fundo usando 'Editar coluna' como anteriormente. Clique no botão azul no topo da seção para abrir 'Edit Section' e você pode esticar a largura da seção para 100%.

Em seguida, abaixo disso, adicionaremos ícones. Para isso, primeiro adicione uma nova seção e insira uma caixa de imagem na barra de ferramentas do Elementor. Escolha a imagem do ícone para as imagens que eu forneci conforme mostrado na imagem. Estas caixas de ícones são para incentivar a compra para dar títulos atraentes como 'Frete Grátis' e escrever a descrição e condição no texto abaixo. Estilize a caixa de imagem como quiser alterando a posição da imagem, tamanho, cor do título e descrição e texto, etc. na barra de ferramentas 'Editar imagem'. Duplique-o após o design para que você não precise projetar todos os ícones novamente. Depois disso, você pode editar o texto de cada caixa para a finalidade desejada. Na seção avançada, você pode adicionar margens usando Preenchimento para que a página não pareça muito congestionada.

Você pode adicionar bordas às colunas, para torná-lo cativante. Clique no botão 'Editar coluna' e na categoria 'Estilo', você pode adicionar bordas e desenhar as bordas. Você pode selecionar o tipo de borda, largura, posicionamento, raio etc. Você pode selecionar a borda apenas em um ou mais lados específicos como aqui fizemos a borda direita. Verifique todas as ferramentas de design disponíveis na barra de ferramentas e selecione você mesmo. Quanto mais você fizer isso sozinho, mais se acostumará com todas as ferramentas e funções e ficará mais rápido e fácil para você.

Em seguida, adicionaremos a seção 'Nova chegada'. Mas antes vamos adicionar um divisor entre essas linhas para que elas fiquem claras e distinguíveis. Novamente, adicione uma nova seção, adicione 'Divisor' na barra de ferramentas Elementor e projete-a usando a barra de ferramentas 'Editar divisor', conforme mostrado na imagem. Adicione um texto 'New Arrival' no divisor que será usado como cabeçalho para a próxima seção, então altere o tamanho, fonte etc. conforme mostrado na imagem para torná-la atraente.

Criando produtos

Temos que criar produtos para vender em nosso site de comércio eletrônico agora. Os produtos podem ser Simples ou Variáveis, os Produtos Simples não têm opções de seleção como tamanho, cor ou estilo, enquanto os produtos Variáveis ​​têm várias opções disponíveis, como tamanho ou cor das roupas. Vamos aprender a criar os dois.

Woocommerce

Para criar produtos, precisaremos adicionar um novo plugin. Então vamos ao seu painel do WordPress, clique em 'Plugins' na barra de ferramentas e depois clique em 'Adicionar novo' como fizemos anteriormente. Na biblioteca de plugins, pesquise 'Woocommerce'. Woocommerce é o melhor plugin de comércio eletrônico na minha experiência pessoal. Clique em 'Instalar' e clique em Ativar. Agora o plugin Woocommerce será aberto conforme mostrado na imagem. Preencha o formulário e clique em 'Continuar'. Em seguida, selecione sua indústria, neste tutorial estamos criando um site de moda e vestuário. Em seguida temos o tipo de produtos onde são dadas 2 opções – Físico e downloads, selecione ambos e clique em 'continuar'. Em seguida, você receberá algumas perguntas, responda-as e clique novamente em 'Continuar'.

Em seguida, você terá que selecionar um tema para o seu plugin, selecione o tema 'Astra'. Em seguida, você terá a opção de ativar os Serviços do Jetpack, o que será útil para nós, então selecione 'Sim, por favor', que levará sua página de conta do Jetpack, preencha seus dados e crie uma conta. Você será redirecionado para o seu painel do WordPress, mas um novo 'Woocommerce' estará disponível em sua barra de ferramentas conforme mostrado na imagem. Todas essas configurações de impostos, faremos mais tarde.

Agora vamos começar a criar produtos. Primeiro vamos criar um produto simples de Woman Green Shirt como mostra a imagem.

Clique em 'Produtos' na sua barra de ferramentas, que abrirá a página 'Adicionar novo produto', conforme mostrado na imagem abaixo. Preencha o nome e a descrição do produto. Abaixo, em Dados do produto, selecione 'Produto simples', pois primeiro criaremos um produto simples. Coloque o preço normal e o preço de venda, que você pode agendar abaixo, conforme mostrado na próxima imagem abaixo. Nestas datas, o preço de venda será aplicado automaticamente.

Em seguida, clique nas configurações de 'Inventário' abaixo do Geral, onde você pode colocar a Disponibilidade de estoque. Você também pode permitir ou não pedidos em atraso aqui, se você colocar 'Não permitir', nenhum pedido será feito se o produto estiver fora de estoque. Coloque o 'Limite de estoque baixo' para ser notificado quando o estoque estiver baixo.

Em seguida, na categoria 'Envio', coloque os detalhes de peso e dimensões do produto para fins de envio. Nos produtos 'Linked', você pode 'Upsells' que mostrará produtos relacionados e Cross-sells que mostrarão produtos relacionados no carrinho depois que o usuário comprar o produto original. Adicione os produtos relacionados que você deseja mostrar aos compradores quando eles estiverem comprando esse produto específico. Na categoria 'Avançado', você pode dar uma nota aos compradores e ativar as avaliações.

Abaixo dessas configurações, se você rolar para baixo, você tem 'Descrição curta do produto' como na imagem. Aqui escreva a descrição completa de acordo com o nosso produto de exemplo. Você também pode criar a fonte e o estilo da descrição aqui. No lado direito, se você vir a imagem, há uma opção 'Imagem do produto'. Clique em 'Definir Imagem do Produto' que abrirá a página 'Imagem do produto' onde você pode selecionar e fazer upload da imagem do seu produto. Abaixo da 'Imagem do Produto', está a 'Galeria de Produtos' onde você pode colocar outras imagens do seu produto de diferentes ângulos para melhor compreensão dos espectadores conforme mostrado na imagem.

Acima você tem 'Categorias de produtos' na barra de ferramentas do lado direito, conforme mostrado na imagem. Aqui você pode categorizar seus produtos. Então vamos criar uma nova categoria clicando em 'Adicionar Nova Categoria'. Digite o nome 'Mulheres' e clique em Publicar. Agora você pode visualizar seu produto clicando no botão 'Visualizar Produto'. Ele mostrará como o produto será exibido para os espectadores quando eles clicarem nele. Um novo pop-up de produto será aberto onde você poderá visualizar o produto e até ampliar as imagens para obter uma melhor visualização. Você pode editar o que quiser novamente.

Se você não gostar do estilo e do tema da página de exibição, poderá alterá-lo com 'Configurações do Astra' na barra de ferramentas do lado direito, conforme mostrado na imagem . Por exemplo, se você deseja remover a barra lateral, clique em 'Barra lateral' e selecione 'Sem barra lateral'. Clique em 'Atualizar' para salvar as alterações e você pode clicar novamente em Visualizar produto para ver as alterações. Então este foi um exemplo de como criar um produto simples. Você pode adicionar quantos produtos e categorias desejar usando este mesmo procedimento. Se você clicar no botão Categoria na página Produto, abrirá uma Nova Página da categoria onde serão mostrados todos os produtos desta categoria. Neste ponto, isso será muito sem graça, mas mais tarde projetaremos esta página também.

Em seguida, vamos aprender como criar um produto variável. Novamente, temos que ir para a página 'Adicionar novo produto' como anteriormente. Desta vez vamos criar um produto variável Masculino. Dê o título e a descrição do produto como fizemos anteriormente. Lembre-se que esta não é a descrição principal, mas a pequena descrição adicional que é mostrada abaixo, a descrição principal deve ser escrita em 'Descrição resumida do produto'. Aqui vamos alterar os 'Dados do produto' para 'Produto variável'. Todas as outras configurações, como Estoque, Frete, Produtos vinculados, etc. são semelhantes ao Produto Simples que criamos anteriormente, para que você possa preencher esses detalhes por conta própria.

Agora clique em 'Atributos' onde adicionaremos novos atributos ou características ao nosso produto. Clique em 'Adicionar' para fazer isso. Em seguida, conforme mostrado na imagem, vamos criar novos atributos do produto como tamanho, cor, etc. Primeiro, vamos colocar Tamanho na caixa 'Nome'. Na caixa 'Valores', escreva Pequeno primeiro, seguido do símbolo '|' (sem os colchetes). Pressione a tecla 'Shift' + a tecla acima do botão Enter para escrever este símbolo como mostrado na imagem, depois escreva Médio e novamente o mesmo símbolo e depois Grande. Você pode adicionar quantas variáveis ​​quiser, como S, M, L, XL etc. usando esse símbolo. Marque a caixa de seleção 'Usado para todas as variações' e clique em 'Salvar atributo'.

Em seguida, adicionaremos outro atributo. Clique novamente no botão 'Adicionar', escreva 'Cor' na caixa Nome e na caixa Valor, adicione os nomes das cores que deseja separados pelo símbolo que usamos no atributo Tamanho. Aqui estamos escrevendo 'White|Blue' como as duas opções disponíveis. Novamente, marque a caixa Usado para variações e clique em 'Salvar atributos'.

Agora, vamos aplicar esses atributos aos nossos produtos. Clique em 'Variações' abaixo de 'Atributos' e selecione 'Criar variações de todos os atributos' e clique em 'Ir'. Clique em 'Sim' no pop-up para verificar esta opção. Que irá abrir as opções como mostrado na imagem. Você pode ver que 6 variações foram adicionadas combinando 3 tamanhos com 2 cores viz.Small White, Small Blue, Medium White, Medium Blue, Large White e Large Blue.

Clique no primeiro para abrir suas configurações de edição, conforme mostrado na imagem. Primeiro, temos que fazer upload da imagem dessa variação. Clique em 'Upload Image' e selecione a imagem da galeria. Em seguida, você deve colocar o preço normal dessa variação. Este é um campo obrigatório, portanto, mesmo que os preços sejam os mesmos, você deve escrevê-los aqui. Novamente você pode adicionar o Preço de Venda e agendá-lo como fizemos no Produto Simples. Você pode preencher os detalhes do estoque e os detalhes de envio como fizemos no Produto Simples.

Novamente, você terá que fazer o mesmo processo para outras variações também. Então clique no Variationname, faça o upload da imagem e coloque o preço Small Blue e assim por diante. Aqui estamos colocando apenas a imagem e o preço de todas as variações necessárias, mas você pode colocar todos os outros detalhes em seu site conforme seus próprios termos. Acima do nome das variações, você pode ver a opção de colocar 'Valor Padrão do Formulário' onde você pode selecionar qual variação será mostrada como padrão na Caixa do Produto quando os usuários visualizarem o produto.

Outras configurações, como a descrição resumida do produto, serão semelhantes ao produto simples que fizemos anteriormente, portanto, preencha os detalhes de acordo com seu produto. O mesmo para a imagem do produto, onde você deve colocar a imagem para a variação padrão, pois isso será mostrado aos espectadores primeiro quando virem o produto. Você deve colocar sua variação mais vendável como o produto padrão. Você não precisa colocar uma galeria de produtos para produtos variáveis, pois as visualizações poderão ver diferentes imagens da variação. Crie uma nova categoria 'Men's' e marque sua caixa de seleção como fizemos para o Simple Product. Clique em Publicar para aplicar essas alterações no site.

Agora você pode clicar em Visualizar produto para ver como os espectadores o verão. Como você pode ver na imagem, o produto será aberto. Aqui como este é um produto variável, você terá uma lista de atributos e seus valores em sua caixa suspensa. Você pode clicar nessas caixas para ver várias variações deste produto. Você verá a imagem e os preços que definiu para a variação quando clicar neles. Novamente, você também pode alterar o tema da página do produto, se não gostar, usando as configurações do Astra. Vamos alterar as configurações e remover a barra lateral e alterar o layout do conteúdo para largura total, como fizemos com o produto único para consistência. Você pode fazer quantos produtos variáveis ​​quiser com quantas variações quiser, mas terá que preencher os detalhes de cada variação como fizemos aqui. Assim, com mais atributos e mais valores deles, você terá muito mais variações. Uma coisa a notar é que o Preço do produto é mostrado como uma faixa porque mostra os preços de menor variação de preço e a variação mais cara como uma faixa. Então, aprendemos agora como criar produtos simples e variáveis.

Agora vamos adicionar esses produtos à nossa página inicial. Vá para sua página inicial e clique em 'Editar com Elementor'. Role para baixo até o final onde criamos o divisor New Arrivals. Na barra de ferramentas Elementor à direita, clique na barra 'Pesquisar widgets' e digite produto. Selecione o elemento Produto e arraste e solte-o na caixa em sua página abaixo do divisor de Novidades e você verá os produtos lá.

Na barra de ferramentas 'Editar produtos' como você pode ver na imagem, você tem o número de colunas e linhas do produto que deseja mostrar aqui para que nem todos os seus produtos sejam mostrados nesta página. Você também pode usar a categoria de estilo para alterar a lacuna da coluna e a lacuna da linha, alinhamentos, borda da imagem. Você pode estilizar o título do nome do produto aqui também, como sua cor, fonte, espaçamento, topografia, etc. A mesma coisa para as estrelas de classificação, tanto preenchidas quanto vazias. Da mesma forma para o preço também, você pode alterar a fonte, cor, topografia, etc. tanto para o preço normal quanto para o preço de venda. O próximo é o botão, você pode projetar o botão da maneira que quiser, como a cor de fundo, cor do texto, cor da borda e assim por diante. Usando o Elementor, torna toda essa edição tão fácil. Você só precisa usar todas as ferramentas de edição disponíveis e brincar com isso e todos os resultados estarão na frente de seus olhos.

Você também tem a opção 'Flash de vendas' que você pode projetar para aparecer quando você tiver uma venda, que mostrará um banner em flash acima do seu produto quando houver uma venda do produto. Use isso para atrair clientes para seus produtos quando eles visitarem sua página inicial. Todas as opções de design são semelhantes ao que aprendemos até agora, para que você possa crescer em todas elas e selecionar o design que melhor combina com você.

Na opção Consulta, você pode selecionar os produtos que deseja que sejam exibidos nesta seção. Por exemplo, se você deseja que apenas o Produto Feminino seja exibido nesta seção, na caixa Origem, selecione 'Últimos produtos', pois é uma seção de novidades da caixa suspensa e clique em 'Incluir'. Em seguida, na caixa 'incluir por', escreva termo e selecione a opção Termo que irá assim a caixa de termo. Na caixa do termo, escreva 'Mulheres' e selecione 'Categoria de produto: Feminino' conforme mostrado na imagem. Clique em Atualizar para dar efeito em seu site. Dessa forma, você pode criar seções de exibição de produtos em qualquer parte do seu site.

Modelo de comércio eletrônico Elementor

Eu dei a você o modelo do site de comércio eletrônico que preparamos agora mesmo layout preparado por nós aqui gratuitamente no meu site neste linkhttps://darrelwilson.com/product/elementor-ecommerce-template-package. Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

Theme Customizer

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

Plug-ins

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

• Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

• Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

• Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

• Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

• Página de produto personalizada

Agora vamos personalizar nossa página de produto usando a mesma técnica. Se você clicar em qualquer produto agora, ele mostrará a página do produto no tema padrão, como vimos quando criamos os produtos. Novamente, vá para o construtor Elementortheme e adicione um novo tema de produto único clicando no ícone + ao lado dele. Você pode usar os modelos fornecidos aqui, mas vamos construir um do zero para este tutorial. Então, primeiro adicione uma seção de 2 partes e clique na guia de elementos. Aqui você pode ver todos os elementos que são feitos especificamente para Produtos, conforme mostrado na imagem, que não vemos ao criar uma página.

Primeiro adicione uma migalha de pão que é como a categorização do produto. Agora você pode editar o estilo do breadcrumb como cor, tamanho, preenchimento etc. usando a barra de ferramentas como você pode ver na imagem. À direita, adicione o elemento 'Título do produto' da barra lateral e crie o estilo disso também usando a barra de ferramentas como antes. Em seguida, vamos adicionar a imagem do produto da mesma maneira. Clique no elemento Imagem do produto e edite o estilo usando a barra de ferramentas. Em seguida, adicione a breve descrição da mesma forma. Você pode adicionar um divisor entre o título e a descrição. Em seguida, temos que colocar a categoria do produto. Para isso, selecione o elemento 'Product Meta' e solte-o na descrição e estilize-o também. Em seguida, adicione o elemento 'Preço' abaixo dele e você também poderá alterar o estilo dele novamente. Em seguida, coloque um botão 'Adicionar ao carrinho' abaixo do preço. Por se tratar de um produto variável, ele dará automaticamente as opções de variação. Em seguida, você pode adicionar ícones sociais e formulários de revisão, informações adicionais etc. elementos que você deseja. Clique em 'Publicar' depois de terminar de adicionar e projetar os elementos que deseja na página do seu produto. Na condição na página de exibição, inclua 'Todos os produtos' para dar efeito deste modelo a todos os produtos que você criou. Você pode criar diferentes temas para diferentes categorias de produtos, se desejar, basta alterar a condição para incluí-lo apenas nessa categoria específica. Todas as nossas páginas de produtos serão atualizadas para este modelo à medida que o aplicamos a todos os produtos.

• Check-out personalizado e página do carrinho

Agora vamos projetar as páginas de Checkout e Carrinho personalizadas. As páginas de checkout e carrinho não estão com o construtor de temas, então vamos editá-las com o Elementor. Vá para a página Carrinho e clique em Editar com Elementor. Assim como qualquer outra página, você pode editar e estilizá-la da maneira que desejar com os elementos Elementor. Você pode editar o texto, ícones, botões de cupom etc. e estilizar a fonte, cor, topografia etc. por conta própria agora. Mas editar a parte do tema real, como o título Carrinho aqui, não é possível com o Elementor. Para editar isso, você terá que editá-lo no próprio WordPress, então clique em 'Editar página' e no canto inferior direito, marque a caixa de seleção 'Desativar título' na seção de desativação, como mostrado na imagem, como fizemos anteriormente ao projetar o tema do wordpress.

Você pode editar e projetar a página de checkout e usá-la da mesma maneira. Da mesma forma, você pode criar a página 'Minha conta' de seus clientes, pois o tema padrão dessa página não é muito bonito. Você pode editá-lo com o Elementor. E também dei um link anteriormente no qual também coloquei o arquivo zip para os modelos de todas essas páginas para você projetar rapidamente.

Configurações do Woocommerce

Você já aprendeu a criar páginas usando o Elementor e o Theme Builder e a construção do seu site está concluída. Agora temos que aprender sobre as configurações do Woocommerce para que este site funcione. Vá para o painel do WordPress, clique em Woocommerce e selecione 'Configurações', que abrirá a guia de configuração geral do Woocommerce, conforme mostrado na imagem.

• Configurações Gerais

Aqui você pode colocar seu endereço e selecionar os países para os quais deseja vender, habilitar impostos, habilitar códigos de cupom. Marque todas essas caixas para habilitá-las. Abaixo disso, você pode alterar sua moeda de acordo com seu país.

• Guia do produto

A próxima guia é a guia Produto na linha superior de Configurações, onde você encontrará muitas configurações, a maioria das quais muito específicas para aqui que não usaremos, exceto a seção de revisão, onde você pode ativar revisões e classificações de estrelas nos produtos, Além disso, você pode mostrar a tag de usuário verificada para compradores reais em comentários, conforme mostrado na imagem. Você também pode colocar os detalhes de envio dos produtos como peso, dimensão, etc.

• Aba Imposto

Em seguida, na guia de impostos, onde você pode ativar ou desativar o cálculo automático de impostos. O cálculo de impostos pode ser muito complicado dependendo do seu país e empresa, portanto, o cálculo automático pode não funcionar para você. No entanto, você tem a opção de definir impostos para diferentes endereços de entrega e com base no item do carrinho. Eu dei um link para www.taxjar.com onde você pode obter serviços gratuitos e pagos para ajudá-lo com o cálculo de impostos. Você também pode selecionar para exibir preços com ou sem impostos em vários pontos como na loja, você deve mostrar o preço sem impostos e no carrinho e checkout, deve incluir impostos em geral.

• Aba de envio

A próxima guia é 'Envio'. Primeiro clique em 'Adicionar uma zona de envio', adicione o nome da Zona, regiões específicas da zona e configure suas taxas de envio em vários métodos de envio, conforme mostrado na imagem. Aqui, usamos um método de taxa fixa em que colocamos uma taxa fixa de US $ 5 e outro é o método de frete grátis. Clique no botão Editar abaixo para adicionar uma condição de valor mínimo do pedido ou requisito de cupom. Aqui temos um requisito mínimo de pedido de $ 50 selecionado. Você pode adicionar várias zonas e vários métodos de envio e taxas para cada um deles. Você também tem um padrão para os locais não cobertos por nenhuma de suas zonas para as quais não fornecemos taxas específicas. Então aqui nós colocamos uma taxa padrão de $ 10 para essas zonas por padrão.

• Aba Contas e privacidade

Aba 'Contas e Privacidade' onde você pode selecionar a opção de criar uma conta dos clientes antes de comprar ou permitir que eles comprem sem conta primeiro e depois criar conta no momento do Checkout e também várias outras opções na criação de conta como nome de usuário, senhas, etc. que você pode verificar por si mesmo, pois são muito auto-explicativos. Além disso, você pode adicionar uma política de privacidade conforme exigido por lei aqui. Você também tem opções sobre o tempo em que os dados pessoais dos usuários serão excluídos em Retenção de Dados Pessoais.

• Guia E-mail

Também temos a guia 'E-mail' onde as configurações sobre todos os e-mails automatizados que você receberá e enviará aos clientes do site, por exemplo, em um novo pedido ou pedido cancelado. Você pode editar o formato do e-mail que receberá ou enviará ao cliente em todas essas situações aqui. Você pode adicionar um plugin para esta finalidade para receber e-mails de melhor qualidade. Vá para Plugins e instale 'Kadence Woocommerce Email designers' e. Usando este plugin, você pode projetar o conteúdo do e-mail, cabeçalho, rodapé, texto etc. usando seus estilos personalizados que são editáveis ​​aqui, acessando o plugin na barra lateral do Woocommerce, conforme mostrado na imagem.

• Pagamentos

Agora iremos para a aba 'Pagamentos' onde podemos selecionar os métodos de pagamento permitidos aos nossos clientes. Existem muitas opções disponíveis para selecionar, mas vamos habilitar 'Stripes' e 'PayPal' aqui clicando no botão habilitar como mostrado na imagem abaixo.

1. PayPal

Agora vamos definir as configurações de pagamento para o PayPal primeiro, então clique em 'Configurar' para abrir a página de configurações do PayPal, onde você pode colocar o título, a descrição da caixa de pagamento e sua conta de e-mail do PayPal e clique em 'Salvar alterações ' para integrar seu site com o PayPal. Se você não tiver um PayPal, poderá criar um acessando o site deles e se inscrevendo gratuitamente. Você só terá que se inscrever com um endereço de e-mail que você colocará na caixa de e-mail do PayPal, conforme mostrado na imagem. É um dos métodos de pagamento mais populares disponíveis.

2. Listra

Em seguida, vamos configurar os pagamentos com listras. Então clique no botão 'Gerenciar' ao lado dele. Da mesma forma que as configurações do PayPal, coloque primeiro o título, a descrição da caixa de pagamento. Em seguida, você tem a chave publicável de teste e a chave secreta de teste. Você pode acessar www.stripe.com e criar uma conta gratuita lá, basta ter uma conta bancária para criar uma conta. Você pode integrar sua conta Stripe ao seu site depois de criá-la, que é um serviço gratuito. Para isso, após fazer login na sua conta stripe, clique em 'Desenvolvedores' e selecione 'Chaves de API' como mostra a imagem. Copie a chave publicável que aparece aqui em seu site na caixa de chave publicável e a chave secreta na caixa de chave secreta. Clique em 'Salvar alterações' e agora seu site está pronto para aceitar pagamentos com cartão de crédito de qualquer lugar do mundo com uma taxa de transação muito baixa. Aqui estamos fazendo isso, ainda temos o botão Visualizando dados de teste ativado em nossa conta de distribuição e na página de configurações do Woocommerce, marcamos a caixa 'Ativar modo de teste', mas quando você estiver pronto para entrar em operação com seu sistema de pagamento, desative-o .

Agora você pode testar seu site fazendo um pedido e comprando algo e também pode fazer o pagamento para verificar se está tudo em ordem. Na Página Minha Conta, os clientes terão seu próprio painel pessoal onde poderão verificar, editar ou cancelar seus pedidos, editar o endereço de envio e cobrança, configurar os métodos de pagamento e os detalhes da conta. Todas as visualizações de pedidos anteriores também são mostradas na lista de pedidos com seus status.

Otimização para dispositivos móveis

Otimização para dispositivos móveis significa tornar o site amigável para dispositivos móveis. A otimização para celular é muito importante no cenário atual porque a) muitas pessoas usam dispositivos móveis para navegar na internet e b) De acordo com o novo algoritmo do Google, se seu site não for otimizado para celular, eles diminuirão sua classificação, o que pode ser catastrófico para seu tráfego do site e SEO.

A otimização para dispositivos móveis é simples e silenciosa usando o editor Elementor. Vamos voltar novamente ao painel Elementor. Na parte inferior da barra de ferramentas, você encontrará o botão 'Modo responsivo', clicando no qual abrirá uma lista suspensa mostrando 3 opções viz. Desktop, Tablet e Celular. Até agora, estávamos projetando nosso site com base em como ele ficaria para os visualizadores de desktop. Agora clique em 'Tablet' para obter uma prévia de como ficaria em um navegador de tablet. Da mesma forma, você também pode verificar o modo 'Mobile'. Você pode editar a página da Web se algo parecer fora de ordem ou se não parecer visualmente atraente.

Aqui como você pode ver na imagem, o primeiro título é muito grande para o modo tablet e o '50% OFF' é muito pequeno, então você terá que ajustá-lo. Confira todos os elementos das páginas para ver se alguma coisa precisa ser redesenhada. Todas essas alterações serão aplicáveis ​​ao modo Tablet quando você clicar em Atualizar. O mesmo será aplicável ao modo móvel. Ajuste o tamanho dos textos dos títulos, o alinhamento dos botões, banners e títulos.

Você pode desativar algumas das seções necessárias na versão para celular ou tablet, se achar que não é importante para elas. Para isso, selecione a seção que deseja ocultar, vá até a categoria avançada na barra de ferramentas 'Edit Section', clique em 'Responsive' e em Visibility, você pode optar por ocultar a seção na versão desktop, tablet ou mobile conforme mostrado em a imagem. A mesma coisa que você pode fazer com outras seções ou elementos. Você pode criar tudo diferente para o modo tablet ou celular, como imagens de fundo, tamanho da fonte ou qualquer coisa.

Formulário de Contato

Agora vamos seguir em frente e aprender como criar uma página de 'Contato' onde os visitantes podem preencher as informações de contato e elas irão diretamente para o seu e-mail. O design básico da página, você pode fazer por conta própria usando o editor Elementor ou o personalizador de temas. A única coisa importante é o formulário de contato como mostrado na imagem. Então, você pesquisa o formulário na barra de ferramentas do Elementor e arrasta e solta na seção e pode editar o texto e o design do formulário usando a barra de ferramentas 'Editar formulário', que agora acho que você poderia fazer por conta própria. Existem muitas configurações avançadas na barra de ferramentas Editar formulário que não estão passando aqui, mas o formulário básico que você pode criar.

Cupons

Para adicionar cupons ao seu site, clique em '+ Novo' na barra superior ao lado do botão personalizar e selecione Cupons. Os cupons na barra de ferramentas lateral do WordPress estão localizados na seção 'Marketing', conforme mostrado na imagem. Aqui, você pode adicionar um novo código de cupom, selecionar o tipo de desconto como desconto percentual, desconto fixo no carrinho ou desconto fixo no produto, colocar o valor ou percentual do desconto e a data de validade do cupom. Em 'Restrições de uso', você pode colocar condições como gasto mínimo, uso individual ou conjunto com outros cupons, incluir ou excluir produtos ou categorias de produtos do cupom. No limite de uso, você pode selecionar o número de vezes que este cupom pode ser usado ou limitá-lo a um produto específico e limitar o uso por cliente único. Clique em Publicar para aplicar este cupom no site e teste-o na página Carrinho aplicando o código do cupom ao fazer uma compra.

Eu realmente espero que este tutorial tenha sido benéfico para os leitores e agora você pode criar um site do zero por conta própria. Se precisar de ajuda, você pode visitar meu site e minha página no Facebook e deixar um comentário. Eu tenho muitos outros recursos sobre a criação de sites e o uso do Elementor que você pode conferir. Obrigado por ler este tutorial e seus comentários e perguntas são sempre bem-vindos.