Hoje, o WooCommerce revolucionou o setor de comércio eletrônico com sua flexibilidade inovadora e opções de personalização. No mundo do e-commerce, ele ocupa uma posição de destaque, detendo atualmente 27% do mercado.
Mas os modelos predefinidos e as páginas de produtos não atendem às necessidades de todas as empresas. O WooCommerce oferece muitas opções de personalização.
Para ter um bom desempenho, sua loja deve seguir as melhores práticas de personalização. Um componente essencial da personalização reside nas páginas e modelos de produtos. Uma estratégia de personalização bem implementada pode reduzir o abandono de carrinhos.
Como a maioria dos clientes visita sua loja online, você deve facilitar a navegação e a personalização de produtos e modelos para garantir o sucesso.
Este artigo mostra como personalizar modelos do WooCommerce, editar modelos de produtos e personalizar páginas de produtos.
Por que é importante para os proprietários de lojas personalizar os modelos do WooCommerce?
O WooCommerce oferece inúmeras opções de personalização. Você pode personalizar tudo, desde o checkout até as páginas da loja, páginas de categorias, páginas de agradecimento, etc. Isso ajuda sua loja a se destacar da concorrência, mas para ser verdadeiramente único, personalizar os templates do WooCommerce pode ser uma ótima solução.
É essencial editar as páginas padrão do seu site para que ele tenha uma aparência e uma experiência de usuário diferentes da concorrência. Você também pode personalizar os modelos padrão para dar à sua empresa uma vantagem competitiva.
Os modelos que você utiliza podem ser personalizados para adicionar funcionalidades e detalhes à sua loja online. Com esses recursos, você pode proporcionar aos compradores uma melhor experiência de compra. Portanto, é essencial manter sua loja virtual atualizada, aprofundando-se na edição de modelos do WooCommerce. Continue lendo para descobrir maneiras de editar modelos do WooCommerce.
Leia: Como atualizar meu cartão de débito no WooCommerce
Personalizando modelos do WooCommerce com PHP
Plugins e trechos de código permitem editar praticamente qualquer aspecto do seu site. Com o WooCommerce, você pode editar modelos programaticamente.
A seguir, apresentamos duas maneiras de personalizar modelos programaticamente:
- Sobrescrevendo modelos
- Com ganchos
Ambos os métodos funcionam, então escolha o que for mais fácil para você. É importante entender as principais diferenças entre eles para determinar quando usar cada um.
Ganchos versus sobrescrita de modelos
Com os hooks, é possível fazer modificações simples usando ações e filtros. Ao sobrescrever arquivos de modelo, você pode realizar personalizações mais complexas.
Além disso, observe que não se deve sobrescrever um arquivo de modelo com um gancho se ele for usado em um arquivo de modelo específico. Sobrescrever o modelo fará com que os ganchos usados nesse arquivo sejam substituídos e percam a eficácia.
Selecione o método que melhor se adapta às suas necessidades após identificá-las.
Explore: Os melhores plugins de tabela de produtos para WooCommerce
Modificando modelos do WooCommerce através da sobrescrita dos mesmos
Ao fazer personalizações complexas, sobrescrever seus modelos é melhor do que usar hooks.
Da mesma forma, editar o arquivo functions.php é muito semelhante. Os arquivos principais do modelo WooCommerce devem ser editados em vez dos arquivos do tema.
Clique em Plugins > Editor de Plugins, escolha WooCommerce no menu suspenso e selecione Modelos para visualizar os arquivos de modelo.
Esta seção contém todos os principais arquivos que você precisa editar, ou seja, archive-product.php, content-product-cat.php e content-product.php. Também é possível editar arquivos de modelo em vários locais, como o carrinho de compras, a página de finalização da compra e o e-mail.
Os arquivos de modelo do WooCommerce oferecem diversas opções de personalização. Isso permite que você crie arquivos personalizados tanto para subdiretórios quanto para pastas.
O próximo passo é visualizar os modelos personalizados do WooCommerce.
Adicione códigos curtos aos modelos do WooCommerce.
Os shortcodes são uma forma comum de personalizar o código do WooCommerce. Para editar modelos, o WordPress e o WooCommerce oferecem diversos shortcodes.
Abaixo está um script que exibe o painel "Minha conta" do WooCommerce em todas as páginas de produtos. Adicione-o ao arquivo single-product.php e atualize-o.
| php if ( ! defined( 'ABSPATH' ) ) { exit; // Sair se acessado diretamente } get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content',' 'single-product' ); endwhile; // fim do loop. do_action( 'woocommerce_sidebar' ); $t= ' $t .= do_shortcode(“[woocommerce_my_account]”); $t .=””; echo $t; get_footer( 'shop' ); |
O painel de controle aparecerá depois que você visualizar as páginas do produto.
Certifique-se de que o cliente saiba que comprou isso antes
Os modelos do WooCommerce também podem ser modificados para oferecer descontos a clientes fiéis. Novamente, basta copiar e colar o código na página single-product.php.
| get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content', 'single-product' ); endwhile; // fim do loop. $current_user = wp_get_current_user(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ): echo ''; fim se; obter_rodapé( 'loja' ); |
Os clientes verão a mensagem de finalização da compra após visualizarem um produto que já compraram.
Explore: Magento vs. WooCommerce: Qual é a melhor escolha em 2023?
Editando modelos do WooCommerce usando hooks
Os hooks também são úteis para personalizar modelos do WooCommerce, caso você não queira sobrescrever os arquivos de modelo. Você pode adicionar hooks como ações ou filtros ao seu site para aumentar sua funcionalidade rapidamente e fazer alterações simples.
Além disso, você pode editar os modelos da sua loja por meio de hooks do WooCommerce. Essa abordagem é recomendada apenas para personalizações simples. Para modificações mais complexas, é melhor sobrescrever os modelos.
Abra o arquivo functions.php em Aparência > Editor de Temas e copie e cole o trecho de código com seus hooks de ação ou filtro.
Aqui estão alguns exemplos de ganchos disponíveis para editar modelos do WooCommerce.
Adicionando informações a uma única imagem de produto
Se desejar exibir informações adicionais sobre o produto acima da imagem, insira o seguinte código no arquivo functions.php.
| // Adicionar função personalizada function quadlayers_before_single_product() { echo ''; } // Adicione a ação add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 ); |
Esta mensagem será exibida nas páginas individuais dos produtos.
Personalizando o modelo do WooCommerce com plugins
Está com dificuldades com a parte de programação? Não se preocupe. Você ainda pode personalizar os modelos do WooCommerce com plugins. Com o crescimento do setor, surgem inúmeros plugins para personalizar seus modelos.
Apresentamos o plugin mais eficiente: Edit WooCommerce Templates. É um plugin gratuito e fácil de usar que permite personalizar os modelos do seu tema. Com apenas alguns cliques, você pode trocar de modelo e restaurar as configurações padrão a qualquer momento.
Aqui estão alguns plugins adicionais do WooCommerce que permitem personalizar modelos e melhorar o desempenho da sua loja.
- WooCommerce Custom Fields: Com este plugin, os usuários podem criar campos exclusivos nas páginas de produtos, páginas de finalização de compra e muito mais do WooCommerce.
- WooCommerce Customizer: Dedicado a modelos do WooCommerce, este plugin oferece diversas opções adicionais de personalização para sua loja.
- Personalizador da página de produto individual do WooCommerce: Este plugin permite modificar a aparência da página de produto individual no WooCommerce.
Saibacomo configurar reservas no WooCommerce.
Personalizando as páginas de produtos do WooCommerce: por que isso é essencial?
Personalizar as páginas de produtos do WooCommerce é crucial, portanto, você não pode ignorar essa oportunidade. Os benefícios e vantagens da personalização das páginas de produtos do WooCommerce são inúmeros. Com isso, é possível eliminar preocupações dos clientes, criar uma apresentação diferenciada e aumentar a satisfação do cliente.
Aqui estão alguns benefícios cruciais de colocar a personalização em prática nas páginas de produtos:
Páginas otimizadas para conversão
Uma página de produto personalizada pode aumentar as taxas de conversão. Muitas opções podem ser implementadas, incluindo opções de busca e filtragem. Dessa forma, os clientes encontrarão e comprarão produtos com mais facilidade e com menos obstáculos.
Torne-o mais atraente
O objetivo da personalização é, muitas vezes, projetar e diagramar páginas de produtos que atraiam e cativem os clientes. O interesse do cliente pode ser despertado por imagens atraentes, descrições de produtos instigantes e elementos esteticamente agradáveis.
A experiência do usuário poderia ser aprimorada
Certifique-se de que suas escolhas de design sejam claras e intuitivas, que o carregamento seja rápido, que a navegação seja fácil e que seus clientes tenham uma ótima experiência. Isso aumentará as conversões e fidelizará seus clientes.
Saiba mais: Os melhores complementos de produtos para WooCommerce
Formas de personalizar páginas de produtos
Para manter o apelo visual da sua loja atualizado, você precisa personalizar as páginas dos seus produtos. Aqui estão três métodos cruciais para personalizar as páginas de produtos com sucesso:
- Melhore as páginas de produtos do WooCommerce com plugins
Com o WooCommerce, você pode criar facilmente uma loja online. Vários plugins estão disponíveis para aprimorar sua loja, incluindo aqueles que personalizam as páginas de produtos.
Personalizar páginas de produtos com plugins do WooCommerce é fácil:
Plugins
- WooCommerce Product Add-ons: Com este plugin, você pode adicionar caixas de seleção, menus suspensos e caixas de texto às suas páginas de produtos.
- WooCommerce 360º Image: Com este plugin, você pode girar as imagens como quiser.
- Vídeos de produtos para WooCommerce: O plugin permite adicionar vídeos de produtos.
- Tabela de Tamanhos para WooCommerce: Este plugin facilita a adição de tabelas de tamanhos aos seus produtos.
- Recomendações de produtos: Este plugin permite adicionar uma seção de recomendações à página do seu produto.
Relacionado: Mais de 40 plugins excelentes para WooCommerce [Gratuitos e Pagos]
- Personalizando páginas de produtos do WooCommerce com CSS
Usar CSS para personalizar produtos do WooCommerce pode destacar sua loja online e proporcionar uma experiência única aos clientes. Para alterar as páginas de seus produtos, escreva o código CSS.
Após iniciar sessão, acesse Aparência → Personalizar.
Código CSS para CTA preto
Adicionar este código ao CSS Adicional alterará a cor padrão do botão de chamada à ação (CTA) para preto.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #1d1a1a; border-color: #333333; color: #ffffff; } |
Código CSS para CTA azul
Além disso, para converter preto em azul, use o seguinte código CSS.
| botão.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #4f5dd5; border-color: #333333; color: #ffffff; } |
- Adicione código personalizado às páginas de produtos do WooCommerce
Se você possui um bom conhecimento técnico, pode implementar facilmente a personalização da página do produto por meio de código personalizado.
Aprenda: Por que as FAQs são essenciais para sua loja WooCommerce?
Etapa 1: Estabelecer um modelo global
Para começar, é necessário estabelecer um modelo global que será usado em todas as páginas de produtos.
Comece com um comentário PHP indicando o nome do modelo no início.
Crie um arquivo template-custom-product.php e coloque-o no tema ativado.
| <?php /*Template Name: Customize Product*/ ?> |
Este modelo utiliza a página de produto padrão do WooCommerce. Aqui está o código.
| php $params = array('posts_per_page' => 5, 'post_type' => 'product'); $wc_query = new WP_Query($params); ?> have_posts()) : ?> have_posts()) : $wc_query->the_post(); ?> <?php the_title(); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php else: ?> <p> <?php _e( ‘No Products’); ?> </p> <?php endif; ?> |
É um modelo básico. Embora funcione, você pode fazer muito mais com o WooCommerce.
O WooCommerce oferece diversas funções para personalizar as páginas de exibição de seus produtos, incluindo uma ampla gama de informações:
| the_permalink() – Exibe o URL do produto. the_content() – Exibe a descrição completa do produto. the_excerpt() – Exibe uma breve descrição do produto. the_ID() – Exibe o ID do produto. the_title() – Exibe o nome do produto. the_post_thumbnail() – Exibe a imagem do produto. |
Passo 2: Adicione funcionalidades no arquivo functions.php do tema ativado
Exibir categorias de produtos do WooCommerce
As categorias são onde você organiza seus produtos. Ative o tema e importe este trecho de código para o arquivo functions.php para indicar a categoria de um produto.
php if ( ! defined( 'ABSPATH' ) ) { exit; } global $product; ?> <div class=”product_meta”> <?php do_action( ‘woocommerce_product_meta_start’ ); ?> 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; ?> get_id(), ', ', '' ); ?> get_id(), ', ', '' ); ?> <?php do_action( ‘woocommerce_product_meta_end’ ); ?> </div> |
Exibir miniaturas das categorias de produtos
Uma miniatura está disponível para cada categoria de produto. Quando estiver pronto para configurar a exibição personalizada do seu produto, adicione este código ao arquivo template.php ou functions.php do seu tema.
| php function cwresponse_get_thumbnail(){ if(is_page(205)){ $args = array( 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => '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 endforeach; wp_reset_postdata(); } } add_action('wp_footer', 'cwresponse_get_thumbnail'); |
Elimine o cabeçalho da descrição.
Ao usar o WooCommerce, basta desmarcar o campo de descrição em cada aba de produto e editar o arquivo functions.php para incluir o seguinte código.
| adicionar_filtro( 'woocommerce_product_description_heading', '__return_null' ); |
Remover título do produto
Veja como eliminar o título nas abas de produtos individuais do WooCommerce: insira este código no arquivo functions.php.
| remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' ); |
Etapa 3: Alterando os modelos do WooCommerce
Insira o código abaixo no arquivo content-single-product.php ou no diretório do produto individual em woocommerce/templates. É recomendável usar o arquivo functions.php.
<div class="images"><?php if ( 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() ); if ( $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>Alternativamente, você pode simplesmente escrever código CSS.
.images { float: right! important; }
Finalmente! Você terminou.
Saiba mais: Como adicionar frete ao WooCommerce?
Conclusão
Criar páginas de produtos e modelos WooCommerce únicos e visualmente atraentes melhora a experiência de compra dos clientes.
Utilizando sobreposições, hooks, filtros e personalização de CSS, você poderá personalizar as páginas de seus produtos para atender às expectativas de seus clientes e estar em consonância com a identidade da sua marca.
Otimize a responsividade da sua loja online WooCommerce para dispositivos móveis e personalize-a para aprimorar a experiência geral do usuário. Comece a implementar práticas de personalização e maximize o potencial da sua loja.
Precisa de ajuda profissional para personalizar o WooCommerce? Entre em contato conosco hoje mesmo!
