Como criar páginas de produtos WooCommerce personalizados usando o Elementor

Atualmente, o Elementor está entre os construtores de páginas mais bem classificados. É muito fácil criar um site usando os recursos dos construtores de páginas.

No entanto, ele fornece designs pré-fabricados, mas se você deseja criar por conta própria, o construtor de arrastar e soltar do Elementor facilita cada operação. Portanto, é uma situação em que todos saem ganhando.

A propósito, as páginas de produtos são encontradas em quase todos os sites de comércio eletrônico, mas uma página de produto WooCommerce personalizada é construída quando o proprietário do site precisa mostrar um produto de maneira diferente.

Ao projetar o site, você pode criar páginas personalizadas do WooCommerce.

E neste blog, vamos ver como criar páginas de produtos WooCommerce personalizadas usando o Elementor Page Builder em um site do WordPress.

Quais ferramentas precisamos para criar páginas de produtos WooCommerce personalizados

Neste blog, precisaremos do plugin Elementor. Além disso, também precisaremos de complementos do Elemento.

O Elementor facilita o processo de construção de páginas e o Addon Elemento ajuda a estender o poder do Elementor, adicionando widgets e funcionalidades extras aos widgets.

Os complementos do Elemento têm alguns widgets que parecem ilegais por causa de sua operação e suavidade.

Então, vamos começar agora,

Como criar páginas de produtos WooCommerce personalizados usando o Elementor

Primeiro, vamos instalar os dois plugins.

Instalando o Plugin Elementor

Etapa 1) Abra seu painel

Faça login no seu painel do WordPress.

Etapa 2) Vá para plugins e clique em Adicionar novo plug -in

No painel, você pode ver vários menus no lado esquerdo. Vá para plugins e clique em Adicionar novo plug -in.

Etapa 3) Vá para a barra de pesquisa e procure o Elementor

Nesta página, você encontrará os plugins. Vá para a barra de pesquisa e procure o Elementor.

Etapa 4) Instale e ativar o elemento

Depois de procurar o Elementor, ele aparecerá na lista do plug -in. Clique no botão Instalar, após a instalação, clique no botão Ativar para ativar o plug -in Elementaror.

Upload plugin de addons elemento elemento

Primeiro, faça o download dos complementos elemento do ThemeHunk.

Vá para a página Addons Elemento e compre o plug -in. Você pode assistir a este tutorial se precisar de uma mão amiga para obter os complementos elemento.

Etapa 1) Abra seu painel e vá para a página do plug -in

Repita as mesmas etapas e alcance a página do plug -in.

Etapa 2) Clique no plug -in de upload

Vá para o canto superior esquerdo e clique no plug -in de upload.

Etapa 3) Faça o upload dos complementos elemento

Clique em Instalar agora e, em seguida, ative o plug -in.

Ambos os plugins estão instalados e agora podemos prosseguir.

Criando a página de produto personalizada WooCommerce

Etapa 1) Crie uma nova página

Vá para o painel e clique nas páginas e clique em Adicionar nova página.

Etapa 2) Clique em 'Editar com Elementor'

Na barra superior, você encontrará a edição com o botão Elementor. Clique nele.

Depois disso, a página será aberta com o Elementor. Você pode acessar e usar os widgets elementares nesta página.

Precisamos de dois compartimentos, então primeiro pegue um recipiente com dois lados.

Em uma página do produto, a primeira e uma das coisas mais importantes que colocaremos é a imagem. Portanto, encontre o widget de imagem e coloque -o no recipiente esquerdo.

Agora defina a imagem do produto.

Agora venha para o lado certo. Para entrar no cabeçalho, procure -o e insira -o no segundo contêiner.

Digite o nome do produto no título.

Da mesma forma, escreveremos o preço do produto. Para escrever os preços, insira um widget de editor de texto abaixo do título e escreva o preço do produto lá.

Nas páginas do produto, há uma breve descrição do produto. Para adicioná -lo, insira o editor de texto novamente e escreva uma breve descrição do produto.

Agora é hora de adicionar o botão do carrinho. Desta vez, usaremos o widget de carrinho dos complementos elemento, porque ele possui mais recursos e funcionalidades.

Pesquise o Add à Cart e insira -o no recipiente.

Nas configurações do botão do carrinho, pesquise o nome do produto e selecione o produto na seção de produtos. Depois disso, quando o usuário clicar no botão do carrinho, ele será adicionado diretamente ao carrinho.

Se você deseja adicionar o ID do SKU, poderá fazê -lo da mesma maneira que adicionamos outro widget. Aqui, insira o editor de texto e escreva o SKU do produto.

Uma das partes importantes de uma página de produto é ter botões de compartilhamento social. Você também pode adicionar o botão de compartilhamento social a esta página.

Procure os ícones sociais e coloque -os na página.

Se você deseja adicionar mais botões de alças sociais, clique em Adicionar novo e adicione o novo botão. Você pode fazer várias alterações, como alterar o ícone e editar o link e a cor.

Da mesma forma, você pode adicionar a outra coisa aqui.

Se você quiser dar uma descrição principal, adicione o editor de texto e escreva a descrição.

Adicionei a descrição principal fora do contêiner que parece organizado e sistemático.

Quando os usuários visitam uma página de produto, você pode mostrar produtos relacionados para que eles também possam verificá -los.

Portanto, para adicionar o produto relacionado primeiro, adicione um título e pesquise o controle deslizante do produto em Addons Elemento.

É assim que você pode adicionar a página de produto WooCommerce personalizada. Agora é hora de ver a visualização da página.

Devo dizer que uma página de produto também pode ser feita em algumas etapas simples. Para isso, precisaremos do widget do elemento Addons.

Vamos ver, como é feito.

Use a página de produto relacionada personalizada

Depois de clicar em Editar com o Elementor , vá para o lado esquerdo, onde você encontrará os widgets elementares.

Role para baixo e chegue aos complementos elemento .

Encontre os produtos temáticos, arraste o widget e solte na página.

Quando você solta o widget, sua configuração de personalização aparecerá na barra esquerda. Você pode editar as configurações e a aparência do complemento.

Mas se você deseja alterar a aparência do site, clique no estilo além do conteúdo.

A seção de estilo permite alterar as cores, a tipografia e outras configurações do complemento.

Depois de fazer todas as alterações e configurar a página, clique em Publicar.

Agora visualize seu site.

Aqui você pode ver, na página de produtos WooCommerce personalizada, adicionamos os produtos com a ajuda do widget do produto do Elemento Addons.

Os produtos são mostrados na página. Vamos visualizar a página de produto único.

É isso, a página de produto WooCommerce personalizada é criada.

Perguntas frequentes

Conclusão

Por isso, aprendemos, como adicionar a página de produto WooCommerce personalizada usando o Elementor. Como também usamos o plug -in do ElementO Addons, tornou super fácil adicionar produtos e mostrá -los na página.

O elemento Addons tem muitos addons para a construção de sites. Não é conhecido apenas pelos widgets, mas também pelos recursos dos widgets.

As páginas de produtos WooCommerce personalizadas podem ser necessárias para promover recursos específicos. Geralmente, os modelos não têm essas páginas, por isso se torna necessário criar a página por conta própria.

Espero que este blog o ajude. Ainda assim, se você tiver alguma dúvida ou sugestão, me avise na seção de comentários.
Você pode se inscrever no nosso canal do YouTube , também enviamos um ótimo conteúdo lá, também nos seguimos no Facebook e no Twitter .

Descubra mais artigos

• Como alterar o URL de login do WordPress (URL personalizado) em etapas fáceis
• Como criar uma página de erro 404 personalizada no WordPress (guia fácil)
• Como adicionar uma barra de pesquisa personalizada ao WooCommerce para uma descoberta mais fácil de produtos