Como personalizar sua página de produto WooCommerce
Publicados: 2022-10-18As páginas de produtos em qualquer site de comércio eletrônico são exigidas como a parte mais essencial. Porque contém todos os detalhes sobre um produto de forma ordenada com informações adicionais, como produtos relacionados, etc.
A página de produto padrão do WooCommerce é boa para visualização rápida de produtos básicos , adicionar ao carrinho e outras funcionalidades básicas, mas isso simplesmente não é suficiente no ambiente de comércio eletrônico moderno e competitivo. A página do produto desempenha uma função crucial em qualquer plataforma de negócios criada pelo WooCommerce como uma das páginas mais importantes. No entanto, a página padrão simplesmente não está cortando.
A importância de personalizar as páginas do produto não pode ser exagerada.
Ao personalizar suas páginas de produtos, você está essencialmente fornecendo aos seus clientes uma experiência de compra única, o que também é importante para a retenção de visitantes e para aumentar o número de vendas.
Nesta postagem, orientaremos você no processo de como utilizar um editor de página de produto WooCommerce e widgets personalizados do WooCommerce para criar páginas de produtos atraentes e muito mais.
Índice
Ferramentas necessárias para personalizar a página do produto WooCommerce?
Em primeiro lugar, você precisa ter a versão mais recente do WordPress instalada em seu servidor e, além disso, o plug-in WooCommerce deve ser instalado para acomodar todas as funcionalidades da página da loja/loja.
Você também precisa de um tema WordPress de comércio eletrônico orientado por funcionalidade e, por último, mas não menos importante, precisará de um plug-in WooCommerce Elementor Shop Builder . Com o plug-in do construtor de lojas Elementor, você poderá controlar e personalizar totalmente as páginas individuais da loja e a grade de produtos do mercado, lista de produtos, blocos de comparação de produtos etc.
Como personalizar a página do produto WooCommerce
Esperamos que você tenha uma instalação funcional do WordPress e um tema de comércio eletrônico funcional já instalado em seu servidor. Agora, vamos passar pelo processo passo a passo de personalização da página do produto, começando com recursos e ferramentas adicionais do WordPress que são necessários.
Etapa 1: instalação de um plug-in complementar do Elementor WooCommerce
Neste exemplo ao vivo de personalização de uma página de produto WooCommerce com vários elementos e amostras de variações de produtos WooCommerce que uma página de produto moderna deve ser apresentada aos clientes, usaremos algo semelhante ao compositor visual do construtor de páginas de produtos WooCommerce - chamado ShopReady.
O construtor de lojas ShopReady Elementor é uma ferramenta incrível e abrangente para criar sites robustos de lojas de comércio eletrônico. O plug-in vem com mais de 105 widgets criados profissionalmente com funções e ferramentas específicas do caso de uso. Por exemplo, com este plugin de comércio eletrônico, você pode criar um filtro de produto WooCommerce funcional capaz de filtrar produtos com preços, tamanho, peso, cor, classificação, envio etc.
Para começar a usar este plug-in de complemento do WooCommerce, comece baixando-o. Para fazer isso, faça login no seu painel do WordPress , vá para E clique no botão Instalar .
Aguarde até a instalação bem-sucedida do plugin e clique em Ativar .
O menu ShopReady aparecerá no seu painel do WordPress. A partir daqui, você terá acesso a todos os widgets, módulos e conteúdo predefinido fornecidos pelo plug-in do personalizador da página da loja.
A partir deste menu simples, você pode ativar/desativar widgets, criar modelos e inserir chaves de API para várias funções.
Outro ótimo recurso deste plugin é o alternador de moeda para o recurso WooCommerce. Para habilitar esta função, você precisará seguir as instruções mostradas abaixo.
Para adicionar sua chave de API de moeda criada por Exchangerate , clique na guia API.
Faça login no painel da sua conta Exchangerate e copie sua chave de API para obtê-la. Depois de colar sua chave de API, acesse seu Painel do WordPress > ShopReady > API e clique em Etapa 2: use um modelo de página de produto predefinido ou crie um do zero
O próximo passo é começar a trabalhar em uma página de produto, mas antes disso, você precisará adicionar produtos ao seu site WooCommerce. Se você não sabe como fazer isso, pode seguir este guia em – Como adicionar produtos rapidamente ao WooCommerce .
Agora, para começar a personalizar uma página para uma vitrine de produtos, use o ShopReady – WooCommerce Builder para criar uma página de produto simples acessando o painel do plugin e clicando na guia Modelos . Habilite a categoria Modelo de Produto e procure a configuração de Produto Único. Agora clique no ícone de edição.
E você será redirecionado para a tela do Elementor Editor . Agora, para começar a personalizar a página, clique no símbolo de mais para adicionar seções Elementor. Existem vários tipos de seções do Elementor que você pode adicionar à sua página, dependendo da aparência da sua página e de quais widgets você gostaria de usar.
Etapa 3: personalização da página do produto WooCommerce com widgets Elementor
- Adicionando um título de produto
Agora que você colocou uma estrutura básica de seção Elementor para sua página de produto WooCommerce, você pode começar adicionando um título de produto. Para fazer isso, você precisará arrastar e soltar o widget Título do produto na página do produto.
E para exibir o título do produto apropriado, clique na guia Conteúdo e, abaixo dela, você encontrará as opções de Atualização do Editor . Selecione o título do produto apropriado na opção Demo Product .
Você deve adicionar ou editar as informações apropriadas do produto no Painel de produtos WooCommerce para que esses dados mostrem o título do produto apropriado.
- Adicionando uma imagem em destaque à página do produto
Em seguida, você precisará da galeria de imagens do produto e da imagem de destaque para o seu produto. Para esse fim, você pode usar qualquer um dos vários widgets de imagem fornecidos pelo complemento tudo em um Elementor para comércio eletrônico.
Para este exemplo, usaremos o widget ShopReady Thumbnail with Zoom, ele faz o que o título sugere. Com este widget, você pode mostrar aos seus clientes uma versão de zoom de foco do produto WooCommerce da imagem do seu produto quando eles passam o mouse sobre a imagem do seu produto.
Da mesma forma que antes, você pode selecionar a imagem correta do produto na opção Produto Demo , guia Conteúdo .
- Adicionando Bloco para Widget de Preços
Outro item importante para ter em sua página de produto de comércio eletrônico é o bloco de preços do produto. Para isso, você precisará atualizar os atributos do produto WooCommerce com as atualizações corretas e usar o widget ShopReady Price , que deve ser colocado sob o título do produto.
Para exibir o preço correto, selecione o título do produto na opção Produto de demonstração , na guia Conteúdo .
- Adicionando a descrição do produto
Você também pode adicionar descrições de produtos altamente personalizáveis usando este widget de descrição do produto dos complementos do produto WooCommerce . Na guia de estilo, você terá a opção de personalizar como a descrição do produto aparecerá para as massas.
- Adicionando a funcionalidade Adicionar ao carrinho
Adicionar ao carrinho é outro recurso muito importante, permitindo que seus clientes tenham vários produtos na página do carrinho antes de prosseguir para a página de checkout.
Para ter uma função robusta Adicionar ao carrinho na página da sua loja de comércio eletrônico, você pode utilizar o widget ShopReady Adicionar ao carrinho. Com este widget, você pode permitir que seus clientes aumentem e diminuam a quantidade de produtos do carrinho diretamente do bloco Adicionar ao carrinho.
Você também personaliza o botão de adicionar ao carrinho do Elementor na guia Tipografia, cor, plano de fundo, margem, preenchimento, etc.
- Adicionando metadados à página do produto
Para fornecer uma melhor experiência de compra para seus clientes, você deve implementar um filtro de produto WooCommerce usando os metadados e atributos de produto que você adicionou ao adicionar produtos ao WooCommerce .
Para exibir esses dados na página do seu produto, pesquise o widget ShopReady Meta e solte-o no botão adicionar ao carrinho.
As tags e metadados do seu produto devem aparecer corretamente quando você seleciona o título do produto correto na opção Demo Product , na guia Conteúdo .
- Adicionando botões de compartilhamento de mídia social à página do produto
Seus clientes também podem compartilhar suas postagens de produtos nas mídias sociais diretamente da página do produto WooCommerce usando um simples bloco de botão de compartilhamento de mídia social. Que você pode criar simplesmente usando o widget Elementor Social Share de arrastar e soltar.
O bloco pode ser personalizado com qualquer ícone de mídia social, texto e links compartilháveis, diretamente da guia Conteúdo . E também pode ser personalizado para alterar a aparência dos blocos de compartilhamento social na guia Elementor Style .
E você terminou com o básico da personalização da página do produto WooCommerce.
Etapa 4: Adicionando produtos relacionados à página do produto WooCommerce
Uma ótima maneira de aumentar as vendas on-line é exibir produtos relacionados em sua página de produto usando o widget de produto relacionado dos complementos de produto WooCommerce. Com o widget ShopReady Related Products , você pode criar um incrível bloco deslizante de produto em seções.
Para usar o widget, você só precisa arrastar e soltar o widget no bloco de produto único e selecionar cada produto individualmente que deseja exibir em sua página de produto único.
Para concluir
Esperamos que este guia informativo tenha ajudado você a obter uma compreensão mais ampla da personalização do modelo de página do produto WooCommerce e como você pode utilizar essas ferramentas incríveis para incrementar seu site de comércio eletrônico com melhores funcionalidades.
Com os detalhes do produto pop-up WooCommerce na tabela de comparação de produtos, tudo o que um mercado de comércio eletrônico exige, o ShopReady pode oferecer. Se você tiver alguma dúvida sobre este assunto, sinta-se à vontade para entrar em contato na seção de comentários abaixo.