A página padrão do produto WooCommerce funciona bem e fica bem! No entanto, podemos fazer melhor, especialmente integrando o WooCommerce e o Elementor!
Neste guia, mostramos como criar uma página de produto WooCommerce personalizada (e bonita) para "impressionar" seus clientes e gerar mais vendas.
Do que você precisa
Além do que você já tem – a instalação do WordPress funciona e o WooCommerce foi adicionado – você precisa do plugin da página do desenvolvedor da Elementor.
Os elementadores são de dois tipos – gratuitos e pagos. Embora existam algumas personalizações disponíveis para o WooCommerce no Elementor gratuito, você precisa atualizar para a versão pro para obter coisas realmente boas. Isso custará US $ 49 por site.
Nota; A Elementor não é o único desenvolvedor de páginas que trabalha com o WooCommerce e permite criar páginas personalizadas de produtos do WooCommerce. Aqui estão algumas alternativas se você quiser explorar outras coisas. No entanto, Elementor é a nossa solução favorita para personalização do WooCommerce.
Antes de começar o trabalho, instale o plug-in gratuito Elementor e o Elementor pro em seu site:
- Instalar o Elementor gratuito é fácil. Apenas vá Complementos → Adicionar novo e digite Elementor na caixa de pesquisa. Instale e ative.
- Para instalar o Elementor pro, você deve primeiro concluir sua compra no Elementor.com. Você pode fazer o download do pacote Elementor pro do seu perfil de usuário – este é um arquivo ZIP. Vá para o seu endereço Complementos → Adicionar novo e clique Instalar Plugin Pressione o botão Selecione ZIP Elementor na área de trabalho e faça o upload para o seu site. Ativar complementos.
O item solicita que você confirme sua licença antes de tudo começar.
Crie uma nova página de produto WooCommerce com Elementor
Para começar, acesse: modelo e clique Adicionar novo,
da lista Produto único,
A Elementor mostrará alguns modelos de páginas de produtos WooCommerce pré-instalados, com os quais você pode começar. Escolher o que você mais deseja é a melhor maneira para a maioria dos usuários. Geralmente, leva mais tempo para criar um modelo de produto do zero. É mais fácil substituir os modelos existentes. clique aqui entrar modelo é trazido.
Você descobrirá que seu modelo foi adicionado à tela Elementor. Agora você pode personalizar o modelo como achar melhor – adicione novos itens à página, personalize os mais recentes, remova itens desnecessários etc.
Na barra lateral esquerda, você verá vários itens, como o WooCommerce. Título do Produto, Imagem do produto, Preço do produtoe outros dados que o WooCommerce exibe sobre seus produtos.
Você pode pegar cada um desses itens e arrastá-los para a tela onde você precisar.
Alguns ajustes que você pode fazer com antecedência são:
Adicione sua marca e cor
Os modelos de produtos Elementor parecem bons, mas podem não se adequar à sua marca. Uma mudança rápida que podemos fazer para melhorar isso é ajustar a cor do plano de fundo, a cor da fonte e várias configurações tipográficas em geral.
Para personalizar o bloco na página, clique no ícone de lápis no canto superior direito do bloco.
Em seguida, na barra lateral esquerda estilo guia. É aqui que você pode fazer todos os ajustes no seu estilo e aparência. Por exemplo, Título do Produto você pode alterar a cor do bloco, texto, tipografia e sombra.
Em seguida, clique tipografiaIsso mostra outra caixa onde você pode alterar a fonte e todos os seus parâmetros.
Revise todo o texto um por um e edite-o como achar melhor. Preste atenção à aparência do bloco de preços – deve ficar claro que os clientes não estão confusos.
Alinhar / mover a descrição do produto
O WooCommerce exibe as descrições dos seus produtos em vários lugares. No momento, não precisamos entender todos os recursos, mas vamos nos concentrar em duas coisas:
- breve descrição
- guia dos dados do seu produto
A breve explicação parece boa. WooCommerce este texto Breve descrição (um dos campos que você preencheu ao criar um novo produto). Recomenda-se exibir uma tela simples na parte superior da página do produto.
o Elementor Breve descrição bloqueie e arraste e solte onde precisar.
Uma guia de dados do produto eficaz é um bloco com informações importantes sobre um produto. Verifique se a nova página do produto WooCommerce está visível no seu modelo.
Não se esqueça de modelar a cor e a tipografia do bloco.
Altere o botão "Adicionar ao carrinho"
O botão "Adicionar ao carrinho" é o botão mais importante em qualquer site de comércio eletrônico. Você realmente quer que ele se destaque e atraia seus clientes.
Você pode usar dois tipos diferentes de blocos para o botão "adicionar ao carrinho" no Elementor. tem Adicionar ao Carrinho blocos e Adicionar ao Carrinho restrições.
Experimente com os dois para ver qual é o melhor na sua situação. Clique no ícone de lápis e veja o que acontece na barra lateral quando se trata de configurações específicas de blocos.
Com alguns cliques, seu botão ficará melhor.
Adicionar / remover classificações de produtos
Visualizar uma pontuação do produto pode ser uma ótima maneira de oferecer aos seus clientes o impulso final para comprar seus produtos. O único problema é que deve haver algumas classificações em primeiro lugar. 🤷♂️
Quando sua loja é nova e você ainda não tem uma classificação, é melhor não bloquear a classificação na página. Clique com o botão direito Avaliação do Produto Selecione e exclua.
Depois, você pode adicionar o bloco de volta e até personalizá-lo. Algumas coisas que você pode mudar são a cor das estrelas e a distância dos objetos.
Ajustar telas de celulares e tablets
Mais e mais pessoas estão acessando a web hoje smartphones de desktops e laptopsPortanto, sua loja precisa ser otimizada para visualização em dispositivos móveis, caso contrário você perderá suas vendas!
O WooCommerce é otimizado para dispositivos móveis do lado de fora, mas precisamos garantir que seus novos modelos de produtos tenham uma boa aparência ao criar páginas de produtos personalizadas.
Há um botão rotulado no canto inferior esquerdo da interface Elementor. Modo responsivo,
Quando você clica, você pode alternar entre eles. área de trabalho, tábuae portátil View. Escolha uma delas e altere o design, se necessário.
O interessante aqui é que você só pode alterar as configurações de exibição do bloco em um telefone celular ou tablet. Por exemplo, se você acha que o preço é mais alto em um telefone celular, clique no ícone de lápis no bloco de preços, clique em para editar a tipografia e finalmente mude para Celular ao lado do tamanho da fonte:
Se você alterar o tamanho da fonte agora, apenas a tela do celular será afetada.
Complete os elementos do seu modelo um por um até configurá-lo para os visualizadores de celular e tablet.
Publicando páginas personalizadas de produtos WooCommerce
Clique em quando seu novo modelo de produto estiver pronto publicar Pressione o botão no canto inferior esquerdo da interface Elementor.
O item solicita que você adicione uma condição que especifica quando o modelo deve ser usado.
Para usar um modelo para todos os produtos, selecione "Produtos" na lista, por exemplo:
clique aqui SALVAR e FECHAR para resolver tudo.
Isso é tudo! Com isso, sua página personalizada do produto WooCommerce foi salva e substituída pela página padrão do produto.
Quando você visita um dos produtos em sua loja, pode ver a página do produto em ação.
