Como personalizar páginas de produtos no WooCommerce (3 métodos)

Se tens uma loja online que utiliza o WooCommerce, podes ter descoberto que as páginas de produtos predefinidas nem sempre se adequam às tuas necessidades específicas ou à tua marca. Felizmente, o WooCommerce facilita a personalização das páginas de produtos para criar uma experiência de compra mais exclusiva e personalizada para os teus clientes.

Neste artigo, vou dar-te uma visão geral das páginas de produtos do WooCommerce e como as podes personalizar utilizando três métodos diferentes, ou seja, extensões, CSS e código personalizado.

O que são páginas de produtos do WooCommerce

– Um exemplo de uma página de produto do WooCommerce.

A página do produto no WooCommerce é uma página onde um único produto é exibido. Esta página inclui todos os detalhes do produto, como o nome, a descrição, o preço, as imagens e as variações (se existirem).

Eis alguns dos principais componentes de uma página de produto do WooCommerce:

1. Nome do produto: O nome do produto é normalmente apresentado de forma proeminente no topo.
2. Descrição do produto: Uma descrição detalhada do produto, incluindo as suas caraterísticas e vantagens.
3. Imagens do produto: Imagens de alta qualidade do produto de diferentes ângulos são essenciais para ajudar os clientes a visualizar o produto.
4. Preço do produto: O preço do produto e os descontos ou promoções são apresentados na página. Vê alguns cupões de alojamento da Cloudways.
5. Botão Adicionar ao carrinho: O botão “Adicionar ao carrinho” permite que os clientes adicionem o produto ao seu carrinho de compras.
6. Variações do produto: Se o produto for fornecido em diferentes tamanhos, cores ou outras variações, estas opções são normalmente apresentadas na página do produto.
7. Comentários sobre o produto: As críticas e classificações dos clientes podem ser apresentadas na página do produto para ajudar outros clientes a tomar decisões de compra informadas.
8. Produtos relacionados: Os produtos adicionais relacionados com o produto que está a ser visualizado podem ser apresentados na página do produto para incentivar os clientes

Vantagens das páginas de produtos personalizadas

Eis algumas razões para considerares a possibilidade de personalizar as páginas de produtos do WooCommerce:

• Para diferenciar a tua loja dos concorrentes que podem estar a utilizar o mesmo esquema de página de produto predefinido do WooCommerce.
• Atrair e fidelizar clientes que procuram uma experiência de compra única.
• Reforçar a identidade da tua marca, incorporando cores, tipos de letra e elementos de design da marca nas páginas dos teus produtos.
• Melhora a experiência do utilizador, tornando mais fácil para os clientes encontrarem a informação de que necessitam e tomarem decisões de compra informadas. Por exemplo, podes adicionar imagens de produtos, incluindo críticas de clientes ou produtos de exibição relacionados.
• Para aumentar as tuas vendas e receitas.

Como personalizar as páginas de produtos do WooCommerce

Seguem-se três métodos para te ajudar a personalizar as tuas páginas de produtos WooCommerce.

1. Extensões
2. CSS
3. Código personalizado

Método 1: Personaliza as páginas de produtos do WooCommerce através de extensões

O WooCommerce é uma poderosa plataforma de comércio eletrónico que te permite criar facilmente uma loja online. Oferece uma vasta gama de extensões que te permitem adicionar novas caraterísticas e funcionalidades à tua loja, incluindo a personalização de páginas de produtos.

Algumas extensões populares do WooCommerce podem ajudar-te a personalizar as páginas de produtos:

Método 2: Personaliza as páginas de produtos do WooCommerce através de CSS

Personalizar os produtos do WooCommerce utilizando CSS pode ser uma excelente forma de destacar a tua loja online e criar um aspeto único para os teus clientes. Se tiveres conhecimentos de CSS, podes simplesmente escrever o código para fazer alterações nas páginas dos teus produtos.

Depois de iniciares sessão no painel de controlo do WooCommerce, vai a Appearance → Customize (Aparência → Personalizar).

• Em seguida, vai para CSS adicional para adicionar CSS personalizado.

Código CSS para CTA preto

Se quiseres alterar a cor da CTA de predefinida para preto, adiciona o seguinte código em CSS adicionais.

botão.alt, entrada[type= button=""].alt, entrada[type= reset=""].alt, entrada[type= submit=""].alt, .button.alt, .widget-area .widget a.button.alt {
cor de fundo: #1d1a1a;
cor das margens: #333333;
cor: #ffffff;
}

Vê aqui o aspeto da CTA.

Código CSS para a CTA azul

Da mesma forma, se quiseres alterar a cor da CTA de preto para azul, adiciona o seguinte código em CSS adicional.

botão.alt, entrada[type= button=""].alt, entrada[type= reset=""].alt, entrada[type= submit=""].alt, .button.alt, .widget-area .widget a.button.alt {
cor de fundo: #4f5dd5;
cor das margens: #333333;
cor: #ffffff;
}

Vê aqui o aspeto da CTA.

É assim que podes brincar com os elementos de design das páginas de produtos no WooCommerce.

Método 3: Personaliza as páginas de produtos do WooCommerce através do código personalizado

Se tiveres bons conhecimentos técnicos, podes personalizar as páginas de produtos do WooCommerce através de código personalizado.

Passo 1: Cria um modelo global

O primeiro passo é criar um modelo global, que será o mesmo para todas as páginas de produtos.

• Escreve um comentário PHP de abertura no topo do ficheiro que indique o nome do modelo.
• Cria um ficheiro de modelo na pasta do tema ativado com o nome template-custom-product.php

<?php /*Nome do modelo: Personaliza o produto*/ ?>

O modelo é baseado na página de produto padrão do WooCommerce. Terá o seguinte código.

<?php
$params = array('posts_per_page' => 5, 'post_type' => 'product');
$wc_query = new WP_Query($params);
?>
<?php if ($wc_query->have_posts()) : ?>
<?php while ($wc_query->have_posts()) :
$wc_query->the_post(); ?>
<?php o_título(); ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p>
<?php _e( 'Sem produtos'); ?>
</p>
<?php endif; ?>

Como podes ver, é um modelo muito básico. Embora dê conta do recado, podes aumentar a funcionalidade desta página através de várias funções integradas do WooCommerce.

A lista que se segue é uma seleção limitada de funções do WooCommerce que incluem uma vasta gama de informações nas tuas páginas de apresentação de produtos personalizados, o que pode ser especialmente útil ao otimizar o fluxo para o checkout direto do WooCommerce:

• the_permalink() – Mostra o URL do produto.
• the_content() – Mostra a descrição completa do produto.
• the_excerpt() – Apresenta uma breve descrição do produto.
• the_ID() – Mostra o ID do produto.
• the_title() – Mostra o nome do produto.
• the_post_thumbnail() – Mostra a imagem do produto.

Passo 2: Adiciona funcionalidades no functions.php do tema ativado

2.1. Mostra a categoria do produto WooCommerce

As categorias são uma forma essencial de categorizar vários produtos na loja. Se quiseres mostrar a categoria do produto na página, coloca este snippet no ficheiro functions.php do tema ativado.

<?php
se ( ! defined( 'ABSPATH' ) ) {
sai;
}
global $produto;
?>
<div class="product_meta">
<?php do_action( 'woocommerce_product_meta_start' ); ?>
<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) : ?>
<span class="sku_wrapper"><?php esc_html_e( 'SKU:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></span></span>
<?php endif; ?>
<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( 'Categoria:', 'Categorias:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

2.2. Mostra a miniatura da categoria do produto

Cada categoria de produto tem a sua própria miniatura. Se precisares de a incluir na tua apresentação personalizada de produtos, coloca este snippet no ficheiro functions.php ou template.php do tema ativado.

<?php
Função cwresponse_get_thumbnail(){
se(is_page(205)){
$args = array(
'tax_query' => array(
matriz(
'taxonomia' => 'produto_cat',
'campo' => 'slug'
)
)
);
$random_products = get_posts( $args );
foreach ( $random_products as $post ) : setup_postdata( $post );
?>
<div><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>
<?php
termina;
wp_reset_postdata();
}
}
add_action('wp_footer', 'cwresponse_get_thumbnail');

2.3. Remove o título da descrição

Se quiseres remover o cabeçalho de descrição dos separadores de produtos individuais do Woocommerce, adiciona o seguinte código ao ficheiro functions.php do tema ativado.

add_filter( 'woocommerce_product_description_heading', '__return_null' );

2.4. Remove o título do produto

Se quiseres remover o título do produto dos separadores de produtos individuais do Woocommerce, adiciona o seguinte código ao ficheiro functions.php do tema ativado.

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' );

Passo 3: Personaliza o modelo de Woocommerce no plugin WooCommerce

Vai ao diretório woocommerce\templates e insere o seguinte código na pasta content-single-product.php ou single product. No entanto, recomenda-se que utilizes o ficheiro functions.php.

<div class="imagens">
<?php
Se ( has_post_thumbnail() ) {
$image_caption = get_post( get_post_thumbnail_id() )->post_excerpt;
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
'title' => get_the_title( get_post_thumbnail_id() )
) );

$attachment_count = count( $product->get_gallery_attachment_ids() );

se ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_caption, $image ), $post->ID );

} else {

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );

}
?>

<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>

Se não quiseres fazer a codificação, basta escrever o código CSS simples.

.images { float: right !important; }

E é isso.

Considerações importantes para as páginas de produtos

A personalização das páginas de produtos é crucial para melhorar a experiência do utilizador e impulsionar as vendas nos sites de comércio eletrónico. Eis algumas considerações importantes a ter em conta ao personalizar páginas de produtos:

1. Experiência do utilizador: O aspeto mais importante a ter em conta na personalização das páginas de produtos é a experiência do utilizador. As páginas devem ser fáceis de navegar e fornecer todas as informações necessárias sobre o produto. Certifica-te de que as páginas são visualmente apelativas, carregam rapidamente e têm um apelo à ação claro.
2. Informações sobre o produto: As informações sobre o produto são um elemento essencial da página do produto. Deve ser detalhada e precisa e incluir imagens, vídeos e críticas para ajudar os clientes a tomar uma decisão de compra informada.
3. Otimização móvel: Cada vez mais clientes fazem compras online utilizando dispositivos móveis. É essencial garantir que as tuas páginas de produtos estão optimizadas para dispositivos móveis, com uma navegação fácil, imagens grandes e chamadas à ação claras.
4. Otimização SEO: A otimização das páginas de produtos para os motores de busca é importante para garantir que os teus produtos são visíveis para os potenciais clientes. Certifica-te de que as tuas páginas de produtos têm títulos relevantes e descritivos, meta descrições e palavras-chave.
5. Personalização: A personalização das páginas de produtos pode ajudar a aumentar o envolvimento e as vendas. Utiliza os dados do cliente para mostrar recomendações personalizadas de produtos, produtos relacionados e promoções com base no histórico de navegação e de compras do cliente.
6. Prova social: A inclusão de críticas, classificações e testemunhos de clientes pode ajudar a criar confiança nos potenciais clientes e aumentar as conversões.
7. Informações claras sobre preços e envio: Os clientes precisam de saber o preço do produto e os eventuais custos de envio antes de tomarem uma decisão de compra. Certifica-te de que estas informações são apresentadas de forma clara na página do produto.
8. Venda adicional e cruzada: Personalizar as páginas de produtos com opções de upsell e cross-sell pode ajudar a aumentar o valor médio das encomendas. Apresenta produtos relacionados ou complementares que os clientes possam estar interessados em comprar.

Resumo

A personalização das tuas páginas de produtos no WooCommerce pode ajudar-te a criar uma experiência de compra única para os teus clientes e a melhorar as tuas vendas. Com as funcionalidades integradas e a flexibilidade do WooCommerce, podes modificar facilmente o layout, adicionar novos elementos e ajustar o código CSS e HTML para fazer com que as tuas páginas de produtos se destaquem.

add_action('woocommerce_after_single_product_summary', 'custom_function', 10); function custom_function()  

{ echo '<p>Conteúdo personalizado aqui</p>'; }

Owais Khan

Owais trabalha como Gerente de Marketing na Cloudways, onde se concentra no crescimento, geração de demanda e parcerias estratégicas. Com mais de uma década de experiência em marketing digital e B2B, Owais prefere construir sistemas que ajudem as equipas a atingir todo o seu potencial.

Get Connected on: Twitter Community Forum