Criar uma única página de produto personalizada é uma das melhores maneiras que sua loja pode fazer. e-commerce para se destacar, dando aos clientes mais liberdade ao fazer compras. E graças ao WordPress, criar uma página de produto personalizada é fácil. Você pode efetivamente criar uma página de produto personalizada para sua loja. e-commerce usando WooCommerce arrastar e soltar widgets do popular construtor de páginas Elementor. Neste guia, você aprenderá como editar sua página de produto WooCommerce, bem como criar uma página de produto personalizada exclusiva do zero. Antes de entrar no tutorial, vamos dar uma olhada por que você deve personalizar a página do produto WooCommerce.
Vamos começar: Por que você precisa personalizar sua página de produto WooCommerce
WooCommerce oferece uma única página de produto que é mínima e simples por padrão. Usando esta página do produto, os clientes podem facilmente visualizar um produto e comprá-lo. Mas se você quiser adicionar mais recursos, como complementos de produto, tabela de tamanhos, imagem 360, vídeo do produto e muito mais, à página única do produto, então você precisa de uma página exclusiva personalizada do produto ou editar a atual. Uma página de produto personalizada ajuda de muitas maneiras. Aqui estão alguns fatos importantes sobre ter uma página de produto personalizada para sua loja. Comércio electrónico.
Garantir uma melhor experiência do usuário Aumentar as vendas do produto Melhorar o design da página do produto Ajudar os clientes a comprar produtos Atrair a atenção dos clientes Garantir uma melhor visualização do produto Como editar a página do produto WooCommerce (Guia passo a passo) Vamos mostrar como editar sua página de produtos WooCommerce de duas maneiras simples. Primeiro método: criar o modelo de página de produto exclusivo Segundo método: criar por
Você deve instalar e ativar os seguintes plugins para criar uma única página de produto:
Pré-requisitos: Elementor (Gratuito) Elementor Pro Se você é novo no Elementor, leia este Guia Passo a Passo para Iniciantes. Primeiro método: criar modelo exclusivo de página de produto Neste método, mostraremos como criar e editar um único modelo de página de produto usando modelos pré-fabricados Elementor. Passo 1: Vá para o Construtor de modelos de modelos Para criar um único modelo de página de produto, você precisa ir para o Dashboard–>Template–>Theme Builder.
Garantir uma melhor experiência do usuário Aumentar as vendas do produto Melhorar o design da página do produto Ajudar os clientes a comprar produtos Atrair a atenção dos clientes Garantir uma melhor visualização do produto Como editar a página do produto WooCommerce (Guia passo a passo) Vamos mostrar como editar sua página de produtos WooCommerce de duas maneiras simples. Primeiro método: criar o modelo de página de produto exclusivo Segundo método: criar por
Você deve instalar e ativar os seguintes plugins para criar uma única página de produto:
Pré-requisitos: Elementor (Gratuito) Elementor Pro Se você é novo no Elementor, leia este Guia Passo a Passo para Iniciantes. Primeiro método: criar modelo exclusivo de página de produto Neste método, mostraremos como criar e editar um único modelo de página de produto usando modelos pré-fabricados Elementor. Passo 1: Vá para o Construtor de modelos de modelos Para criar um único modelo de página de produto, você precisa ir para o Dashboard–>Template–>Theme Builder.
Passo 2: Clique na guia Produto exclusivo Você terá a opção de criar uma página de produto exclusiva na próxima página. Primeiro clique na guia Produto Único. Em seguida, você precisa clicar no botão Adicionar apenas um novo produto.
Passo 3: Criar modelo Depois disso, você terá a opção de criar o modelo para a primeira página. Digite também o nome do seu modelo. Aqui, nesta área. Em seguida, clique no botão Criar Modelo.
Passo 4: Escolha um modelo de página de produto pré-projetado adequado Se você quiser usar o modelo de elemento padrão, você pode escolher dez aqui na Biblioteca de elementos. Você pode selecionar e instalar um modelo adequado de acordo com suas necessidades.
Se você não tiver tempo suficiente para projetar e personalizar sua página exclusiva do produto WooCommerce, você pode usar modelos pré-fabricados Elementor e bloqueio. Mas neste guia, você mostrará como criar uma página de produto WooCommerce do zero usando o Elementor.
Segundo método: Criar uma nova página de produto exclusiva do zero Agora é hora de criar uma nova página de produto do zero. Se você seguir o guia abaixo, você será capaz de projetar sua primeira página de produto em um tempo muito curto. Vamos começar: Passo 1: Abra a página no painel Editor Elementor Depois de criar o modelo de página de produto exclusivo, você precisa d
abra a página no painel do editor Elementor. Aqui, você pode ver que todos os widgets WooCommerce estão disponíveis na galeria de widgets à esquerda. Para usá-los, você precisa criar uma estrutura sólida da sua página. produto. Clique no ícone vermelho de mais (+) para adicionar colunas.
Segundo método: Criar uma nova página de produto exclusiva do zero Agora é hora de criar uma nova página de produto do zero. Se você seguir o guia abaixo, você será capaz de projetar sua primeira página de produto em um tempo muito curto. Vamos começar: Passo 1: Abra a página no painel Editor Elementor Depois de criar o modelo de página de produto exclusivo, você precisa d
abra a página no painel do editor Elementor. Aqui, você pode ver que todos os widgets WooCommerce estão disponíveis na galeria de widgets à esquerda. Para usá-los, você precisa criar uma estrutura sólida da sua página. produto. Clique no ícone vermelho de mais (+) para adicionar colunas.
Passo 2: Adicionar duas colunas Você pode ver na captura de tela abaixo que adicionamos duas colunas para projetar nossa página de produto exclusiva.
Passo 3: Adicione os widgets WooCommerce necessários para projetar sua página do produto Agora, é hora de adicionar widgets WooCommerce essenciais para o design da página do produto. Aqui nós adicionamos esses widgets para projetar nossa página de produto personalizada. Product Image Widget: Você pode definir a imagem ou galeria que deseja exibir Product Title Widget: Este widget irá ajudá-lo a personalizar o estilo e aparência do título do produto. WooCommerce Breadcrumbs Widget: personalize cores e layout para WooCommerce Breadcrumbs. Widget de descrição curta: escolha como você deseja exibir a descrição curta do seu produto. Widget de preço do produto: controle a aparência e design do preço do seu produto. Widget de classificação do produto: personalize suas avaliações do produto. Torne-o mais visível e certifique-se de que os clientes possam saber facilmente como os usuários veem o produto. Product Meta Widget: defina a distância entre o texto, exiba-o empilhado ou em linha e controle o estilo de seus metadados. Widget para mais informações: você pode adicionar informações adicionais sobre seu produto. com este elemento. Adicionar ao carrinho Widget: Personalize o estilo e aparência do botão Adicionar ao carrinho. Product Data File Widget: Controle o layout da guia de dados do produto. Upsell Widget: você pode criar seu próprio estilo para produtos upsell. Widget relacionado ao produto: Se você tem produtos similares em seu site, deve ter uma secção de produtos semelhante. Você pode
estilizar a seção de produtos associada a este widget. Passo 4: Adicionar widgets de imagem do produto Primeiro, adicionamos o widget de imagem do produto à coluna direita. Você pode inserir \
estilizar a seção de produtos associada a este widget. Passo 4: Adicionar widgets de imagem do produto Primeiro, adicionamos o widget de imagem do produto à coluna direita. Você pode inserir \
Passo 5: Personalize o estilo de imagem do produto Você pode personalizar o estilo de imagem do produto à sua maneira. usando as opções de estilo deste widget. Aqui, ligue e desligue Flash Discount. Você também pode adicionar imagem do produto e tipo de borda de miniatura, raio de borda gerenciar o espaço entre imagem do produto e miniaturas.
Passo 6: Adicione o widget WooCommerce Breadcrumbs Para garantir uma melhor experiência do usuário, você precisa fornecer navegação adequada em sua página. É por isso que precisamos adicionar o widget WooCommerce Breadcrumbs para adicionar navegação à nossa página do produto.
Passo 7: Personalizar breadcrumbs WooCommerce Personalize o design Breadcrumbs novamente usando opções de estilo. Aqui, você pode definir cor do texto, cor do link, topografia e alinhamento de breadcrumbs.
Passo 8: Adicionar widget de título de produto Você precisa adicionar um título de produto adequado para que os usuários possam entender facilmente o que seu produto é. Então, vamos adicionar o título do produto à coluna da esquerda.
Passo 9: Estilo do widget para o título do produto Na seção Estilo, você pode alterar o design do título do produto e gerenciar Cor do Texto, Topografia, Sombra de Texto e escolher um modo de mistura.
Passo 10: Adicione o widget de descrição curta Se você precisar, você pode adicionar o widget de descrição curta para exibir uma breve descrição do produto. Assim como o outro widget, você pode encontrá-lo na área de widgets à esquerda. Basta arrastar o widget e colocá-lo em um lugar adequado para sua página. produto.
Passo 11: Estilo breve descrição Área Estilo você p
O ermite também altera o desenho predefinido do widget. Observe que alteramos o tamanho da impressora e definimos para 15 px.
O ermite também altera o desenho predefinido do widget. Observe que alteramos o tamanho da impressora e definimos para 15 px.
Passo 12: Remover o espaço de descrição curta Veja aqui removemos o espaço adicional do widget de descrição curta. Aceda à área Avançada. Em seguida, desconecte a Margem e adicione a margem necessária. Aqui, adicionamos margem de -25px para remover espaço extra.
Passo 13: Adicione e estilize o widget de preço do produto Vamos adicionar o widget de preço do produto para exibir o preço do produto. Você pode adicionar seu estilo personalizado na seção Estilo. Aqui, você pode ver que nós mudamos a cor do preço do produto.
Passo 14: Adicione e estilize o widget de classificação do produto Se você quiser exibir a classificação do cliente para o seu produto, você deve adicionar o widget Avaliação do Produto. Você também pode estilizar a classificação do produto do seu cliente à sua maneira. usando as opções de estilo.
Passo 15: Adicionar e estilo meta widget do produto Você pode exibir informações meta do produto, como categoria do produto, etc Para fazer isso, você precisa adicionar o widget Mata do produto. Você pode personalizar o widget usando a opção de estilo de acordo com suas necessidades.
Passo 16: Adicionar e estilizar o widget para obter informações adicionais Se você precisar exibir informações adicionais sobre o produto, como cor e tamanho do produto, você deve adicionar o widget Informações adicionais. Você pode editar o estilo do elemento. Para fazer isso, clique na seção Estilo . Aqui, você obtém as opções essenciais para mudar o estilo atual à sua maneira.
Passo 17: Adicionar e estilizar o botão Adicionar ao carrinho É importante adicionar o botão carrinho para que seu cliente possa adicionar o botão carrinho. para poder comprar o produto. Você pode facilmente adicionar um botão de carrinho à sua página. exclusivo do produto, adicionando o widget Adicionar ao carrinho . Você também pode personalizar o botão da cesta de acordo com o seu
A tua picada de gelo. usando opções de estilo.
A tua picada de gelo. usando opções de estilo.
Passo 18: Adicionar e estilizar guias de dados do produto Se você quiser exibir a guia de dados do produto, você pode fazer isso adicionando o widget guias de dados do produto e usando suas opções de estilo para personalização adicional.
Passo 19: Adicionar widget para vendas extras Você pode adicionar seus produtos por upsell adicionando o widget Upsells à página exclusiva do produto.
Passo 20: Upsells Style Widget Você pode alterar o design se quiser. Na área Estilo, você terá as configurações necessárias para personalizar produtos upsells. As opções são. Product Title Box Sale Flash
Passo 21: Adicione e estilize o widget para produtos relacionados Assim como produtos Upsells, você também pode adicionar produtos relacionados à sua página de produto. Você precisa adicionar o widget relacionado ao produto à área apropriada da página do produto.
Pré-visualização final de nossa página personalizada com um único produto WooCommerce Depois de terminar de projetar sua página de produto exclusiva, veja abaixo o layout final de nossa página de produtos WooCommerce.
Crie seu site de comércio eletrônico usando widgets HappyAddons WooCommerce Apresentando o widget de produto único WooCommerce da Happy Addons
Embora você possa criar facilmente sua página de produto exclusiva com o Elementor, muitos complementos Elementor, como Happy Addons, oferecem mais flexibilidade ao projetar e personalizar uma página de produto WooCommerce. Vamos falar sobre o novo widget exclusivo WooCoommerce Single Product da Happy Addons, que é avançado, fácil de usar e vem com layouts modernos de páginas de demonstração pré-fabricadas. Com este widget maravilhoso, você pode decorar sua página de produto em minutos. Além disso, você terá algumas novas configurações que permitem controlar efetivamente o design. Além disso, você também recebe três belas skins de design, como Classic, Standard e Paisagem, para mostrar seu produto.
Veja