Como ocultar e remover produtos relacionados no WooCommerce

Você está procurando uma maneira simples de ocultar produtos relacionados em sua loja? Temos algo para você. Neste artigo, mostraremos diferentes maneiras de remover produtos relacionados no WooCommerce .

O que são produtos relacionados?

Como o próprio nome sugere, produtos relacionados são produtos que estão de alguma forma vinculados a outro item. No WooCommerce, produtos relacionados são recomendações relacionadas ao produto que o comprador está visualizando e tendem a complementar o item principal. Eles geralmente aparecem na parte inferior das páginas de seus produtos e ajudam sua empresa a aumentar as vendas e a receita. Por exemplo, os produtos relacionados a um telefone podem ser fones de ouvido, capas de telefone, acessórios de câmera e assim por diante.

Por que remover produtos relacionados no WooCommerce?

Se produtos relacionados nos ajudam a aumentar nossas vendas, por que deveríamos removê-los? Existem várias situações em que você pode querer ocultar os produtos relacionados no WooCommerce. Por exemplo, se você vende apenas alguns produtos não relacionados, talvez não queira exibi-los. Além disso, se o seu tema não tiver um bom desempenho com a seção de produtos relacionados, talvez seja necessário removê-lo de sua loja.

Além disso, às vezes o código CSS de alguns temas ou plugins pode quebrar seu site ou partes dele. Se houver um conflito com a seção de produtos relacionados, você poderá removê-la.

Além disso, se a página do seu produto estiver desordenada ou tiver muitos produtos relacionados, você poderá exibir menos itens ou remover a seção completamente.

Antes de mostrar como removê-los, vamos ver como configurar produtos relacionados no WooCommerce.

Como configurar produtos relacionados no WooCommerce

A configuração de produtos relacionados no WooCommerce é bastante simples. No painel do WordPress , vá para Produtos e abra qualquer produto. No editor de produtos WooCommerce, vá para a seção Dados do produto , selecione a guia Produtos vinculados e você verá uma opção para configurar Upsells e Cross-sells.

Embora upsells e cross-sells sejam um tipo de produto relacionado que o WooCommerce oferece por padrão, as opções de personalização são bastante limitadas. Se você deseja exibir produtos relacionados, pode usar um plug-in dedicado.

Para esta demonstração, usaremos uma ferramenta gratuita chamada Produtos Relacionados Personalizados para WooCommerce. Após instalar e ativar o plugin, você verá mais uma opção na seção de produtos vinculados.

Você pode pesquisar os produtos que deseja exibir como produtos relacionados. Por exemplo, vamos listar quatro produtos.

Em seguida, atualize as configurações e, se você verificar a página do produto no frontend, verá os produtos relacionados selecionados.

Como alternativa, você pode remover alguns produtos relacionados e exibir menos itens. Por exemplo, digamos que, em vez de 4 itens, você queira exibir três. Remova o produto que deseja ocultar, atualize a página e verifique o frontend.

Esta é uma das melhores personalizações que você pode aplicar à sua loja. Em vez de exibir produtos relacionados aleatórios, você pode selecionar os itens que deseja associar a cada produto. Recomendamos que você faça alguns testes e verifique as taxas de conversão para encontrar as melhores combinações.

NOTA : Vale a pena notar que alguns modelos incluem uma seção de Produtos Relacionados que leva produtos que compartilham as mesmas tags ou categorias. Mesmo que você não possa especificar esses itens, você pode usar as mesmas tags ou categorias para os produtos que deseja exibir juntos.

Vamos dar uma olhada em diferentes métodos para ocultar produtos relacionados .

Como ocultar e remover produtos relacionados no WooCommerce

Existem vários métodos para remover produtos relacionados ao WooCommerce:

1. Com plug-ins
2. Programaticamente (codificação)
3. Usando um construtor de páginas
4. Com CSS
5. Das opções de tema

Vamos dar uma olhada em cada método.

1) Ocultar produtos relacionados com plugins

Existem vários plugins que você pode usar para ocultar produtos relacionados. Para este tutorial, usaremos NS Remove Related Products. Primeiro, você precisa instalar e ativar o plugin. Vá para Plugins > Adicionar novo , procure a ferramenta e instale-a em seu site.

Depois de ativar o plug-in, você verá que removeu com sucesso todos os produtos relacionados de suas páginas de produtos únicos. Este é um plug-in plug-and-play e não precisa de configurações adicionais.

Se você verificar qualquer uma das páginas de um único produto, não verá nenhum produto relacionado.

Se você quiser exibir os produtos relacionados novamente, desative o plugin. Como o NS Remove Related Products é uma ferramenta leve, mantê-lo instalado não afetará a velocidade e o desempenho do seu site.

2) Remova os produtos relacionados programaticamente

Se você tem habilidades de codificação e se sente confortável em editar código e modificar seus arquivos, este é um método muito interessante para você. Nesta seção, ensinaremos como ajustar o arquivo functions.php do seu tema e remover os produtos relacionados ao WooCommerce de sua loja online.

NOTA : Este método envolve a edição de alguns dos arquivos do seu tema, portanto, antes de avançar, certifique-se de ter um backup completo do seu site WordPress/WooCommerce. Dessa forma, você pode restaurar seu site caso algo dê errado.

Para remover produtos relacionados, editaremos o tema functions.php . Para isso, existem dois métodos diferentes:

• Por meio de um tema filho
• Por meio de um plug-in específico do site

Criamos um guia passo a passo para ensiná-lo a criar temas filhos. Depois de gerar um tema filho para seu site, você pode adicionar o trecho de código personalizado ao arquivo functions.php do tema filho. Por outro lado, se você confiar em um plug-in dedicado, adicionará seu código personalizado diretamente a ele.

Vamos dar uma olhada rápida em ambas as opções.

2.1) Tema filho

Se você acompanha nosso blog, provavelmente sabe que não recomendamos editar os arquivos do tema pai, pois quando o tema for atualizado, todas as suas modificações serão perdidas. Em outras palavras, seus arquivos personalizados serão substituídos pelos novos arquivos da nova versão.

É por isso que recomendamos o uso de um tema filho se você precisar adicionar código personalizado ao seu tema. Criar um tema filho é bem simples. Para esta demonstração, usaremos um plugin chamado Child Themify.

Primeiro, instale e ative o Child Themify em sua loja.

Na seção Aparência , você verá uma nova opção chamada Criar tema filho .

A partir daí, você pode gerar um tema filho para seu tema pai.

Depois de criar um tema filho, ative-o e vá para o editor de temas.

Aqui, adicionaremos um pouco de código ao arquivo functions.php do tema. Por padrão, o WordPress exibe o arquivo style.css no editor, mas você pode selecionar o arquivo functions.php na coluna da direita.

Após selecionar o arquivo, copie o código abaixo.

 remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

Em seguida, cole-o no editor e atualize o arquivo.

É isso! Agora verifique a página do seu produto no front-end e você verá que a seção de produtos relacionados não está mais visível.

2.2) Trechos de código

Outra alternativa é adicionar um trecho de código personalizado usando um plugin. Para este tutorial, usaremos Code Snippets, um dos plugins específicos de sites gratuitos disponíveis no mercado.

Primeiro, instale e ative o plugin em seu site.

Em seguida, você verá novas configurações no lado esquerdo.

Por padrão, o plug-in exibirá alguns trechos de código personalizados, mas eles não estão ativos, portanto, não afetam seu site.

Para remover produtos relacionados no WooCommerce, adicionaremos um novo snippet ao site.

Dê um nome ao snippet e copie este código.

 remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

Cole-o na seção Código , selecione a opção Executar snippet em todos os lugares e ative-o.

Assim que seu snippet estiver ativo, verifique suas páginas de produtos individuais e você verá que os produtos relacionados não estão lá.

É assim que você pode remover ou ocultar produtos relacionados ao WooCommerce com um pouco de codificação. Agora vamos ver como fazer isso usando um construtor de páginas.

3) Ocultar produtos relacionados usando um construtor de páginas

Outra opção interessante para ocultar os produtos relacionados de páginas de produtos individuais do WooCommerce é usar um plugin de construtor de páginas dedicado.

Para este tutorial, usaremos o construtor Divi, um dos construtores de páginas mais populares e fáceis de usar. Primeiro, você precisa instalar e ativar o plugin em seu site. Por ser um produto premium, você terá que comprá-lo no site Elegant Themes.

Depois de baixar o plugin da sua conta Elegant Themes, instale-o e ative-o.

O construtor Divi vem com uma experiência de edição visual que o ajudará a editar suas páginas diretamente do front-end.

Agora vamos ver como usá-lo para remover os produtos relacionados ao WooCommerce. Abra qualquer página de produto e clique no botão Habilitar Visual Builder na barra superior.

O WordPress carregará o construtor Divi e você poderá editar os modelos de página a partir daí.

Agora clique no elemento Produtos Relacionados e você verá várias opções. Para remover esta seção, basta selecionar o botão excluir.

Você verá instantaneamente que essa seção desaparece da página.

Além disso, você pode editar outros elementos da página do seu produto, mas por enquanto, vamos deixar tudo como está e salvar as alterações.

Uma das grandes vantagens do construtor Divi é que você pode ver as mudanças em tempo real. Para garantir que tudo pareça bom, você pode verificar a página do produto no front-end e ver os resultados.

Vale a pena notar que o construtor Divi funciona com a maioria dos temas, não apenas Divi ou Extra da Elegant Themes.

Para obter mais guias sobre como personalizar seu site usando o Divi, consulte os seguintes guias:

• Como personalizar a página do produto WooCommerce com Divi
• Adicione o botão Adicionar ao carrinho nas páginas da loja Divi
• O formulário de contato Divi não está funcionando? Como corrigi-lo

4) Remova produtos relacionados com CSS

Se você não quiser editar seus arquivos de tema ou usar plug-ins, há um snippet de CSS simples que o ajudará a ocultar os produtos relacionados de suas páginas de produtos únicos.

Primeiro, no seu painel do WordPress , vá para Aparência > Personalizar .

Abra a seção CSS adicional .

E adicione o seguinte código CSS:

 .produtos relacionados {
 Mostrar nenhum;
 }

O personalizador do WordPress vem com um assistente de visualização ao vivo que permite ver todas as atualizações em tempo real, conforme mostrado abaixo.

Como você pode ver, é muito simples usar CSS para ocultar os produtos relacionados. Basta atualizar a configuração depois de colar o código e pronto.

5) Remova os produtos das opções de tema

Alguns temas premium vêm com um painel de temas dedicado que inclui algumas opções para personalizar sua loja WooCommerce. Na maioria dos casos, as opções para remover produtos relacionados estão nas opções de página de produto único.

Além disso, alguns temas do WordPress vêm com modelos dedicados que incluem uma seção de produtos relacionados que você pode ativar/desativar. Recomendamos que você dê uma olhada no seu tema ou entre em contato com a equipe de suporte para descobrir.

Bônus: Como desativar produtos relacionados individualmente

Este é um método avançado para remover produtos relacionados ao WooCommerce de suas páginas de produtos. Adicionaremos um trecho de código para adicionar uma caixa de seleção no painel do WooCommerce que você pode marcar para ativar/desativar produtos relacionados em cada produto.

Você precisa adicionar o seguinte código no arquivo functions.php do seu tema filho ou usar um plugin específico do site. Para esta demonstração, usaremos o plugin Code Snippets, então basta acessar as configurações dos plugins e criar um novo trecho.

Damos um nome e colamos o abaixo.

Explicação do código

Este pedaço de código adicionará uma caixa de seleção à página do produto que você pode marcar para remover a seção de produtos relacionados. Chamamos a caixa de seleção "Remover produtos relacionados", mas você pode personalizá-la alterando a linha do rótulo.

 // 1. Adicione uma caixa de seleção à página do produto para remover produtos relacionados
add_action( 'woocommerce_product_options_general_product_data', 'quadlayers_add_related_products_checkbox'); 
função quadlayers_add_related_products_checkbox()
 {woocommerce_wp_checkbox( array(
 'id' => 'hide_related',
 'classe' => '',
 'label' => 'Remover produtos relacionados'
 )
 );
 }

A parte seguinte do código salvará a caixa de seleção em um campo personalizado.

 // 2. Salvar campo da caixa de seleção

 add_action( 'save_post_product', 'quadlayers_save_related_products_checkbox' );
 function quadlayers_save_related_products_checkbox( $product_id) {
 global $pagenow, $typenow;
 if ( 'post.php' !== $pagenow || 'product' !== $typenow ) return;
 if ( definido( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
 if ( isset( $_POST['hide_related'] ) ) {
 update_post_meta( $product_id, 'hide_related', $_POST['hide_related']);
 } else delete_post_meta( $product_id, 'hide_related');
 }

Por fim, esta parte do código verifica se a caixa de seleção que acabamos de criar está marcada e, se estiver, remove a seção de produtos relacionados.

 // 3. Ocultar produtos relacionados em uma única página de produto

 add_action( 'woocommerce_after_single_product_summary', 'quadlayers_hide_related_products_checkbox', 1 );
 function quadlayers_hide_related_products_checkbox() {
 global $produto;
 if ( ! empty ( get_post_meta( $product->get_id(), 'hide_related', true ) ) ) {
 remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
 }
 }

Cole todo o código e salve as alterações. Agora é hora de ver se funcionou, então vá para sua página de Produtos e escolha qualquer um dos produtos publicados.

Dentro do editor, você verá uma nova opção chamada Ocultar produtos relacionados.

Ao ativar esta caixa de seleção, a seção de produtos relacionados não será exibida na página do produto. Então, agora, se você verificar o front-end, verá algo assim.

Essa é uma ótima opção para ter a flexibilidade de mostrar apenas a seção de produtos relacionados em determinadas páginas de produtos. Para mais informações sobre isso, você pode dar uma olhada nisso.

Alterar o número de produtos relacionados que você pode exibir em uma página

Esta é outra opção interessante para alterar o número de produtos relacionados que você exibe por página. Isso pode ser útil para ter uma seção de Produtos Relacionados mais limpa ou quando você deseja exibir apenas alguns itens relacionados.

Para fazer isso, você pode adicionar o seguinte código ao functions.php do tema filho ou usar o plug-in Code Snippets.

 /**
 * Altere o número de produtos relacionados
 */
 function woo_related_products_limit() {
 global $produto;
 $args['posts_per_page'] = 6;
 retorna $args;
 }
 add_filter( 'woocommerce_output_related_products_args', 'quadlayers_related_products_args', 20 );
 function quadlayers_related_products_args( $args) {
 $args['posts_per_page'] = 3; // 3 produtos relacionados
 $args['colunas'] = 1; // organizado em 1 colunas
 retorna $args;
 }

Se você observar mais de perto o código, verá que exibiremos 3 produtos relacionados em 1 coluna. Basta ajustar o código de acordo com suas necessidades e salvar as alterações. Você verá todas as alterações refletidas no front-end.

Como usar produtos relacionados para aumentar as taxas de conversão

Um dos principais benefícios dos produtos relacionados é ajudá-lo a aumentar as taxas de conversão. A ideia é exibir produtos relacionados ao item que o shopper está visualizando, para que ele compre mais produtos. Esses produtos relacionados geralmente complementam ou aprimoram o desempenho do item principal. Por exemplo, se você estiver vendo um laptop, os produtos relacionados podem ser um estojo para laptop, um disco rígido externo, um cabo HDMI e assim por diante.

Esta é uma estratégia popular no comércio eletrônico. Por exemplo, lojas online populares, como Amazon ou Flipkart, exibem vários produtos relacionados de acordo com os pedidos anteriores do usuário, histórico de pesquisa, marcas e assim por diante.

Conclusão

Em suma, os produtos relacionados podem ajudá-lo a aumentar suas vendas. No entanto, existem algumas situações em que você pode precisar ocultá-los.

Neste guia, vimos métodos diferentes para remover produtos relacionados no WooCommerce:

• Usando plug-ins
• Programaticamente (codificação)
• Usando um construtor de páginas dedicado
• Com trechos de CSS
• Das opções de tema

A maneira mais simples de ocultar a seção de produtos relacionados é usar um plugin. Você simplesmente precisa ativar o plugin e ele ocultará automaticamente os produtos relacionados. Por outro lado, se você estiver familiarizado com a codificação, poderá editar o arquivo functions.php ou adicionar um pequeno script CSS.

Como alternativa, se você quiser remover produtos relacionados de páginas individuais, poderá fazê-lo com um construtor de páginas. Por fim, se você tiver um tema premium, verifique se ele oferece a opção de ocultar os produtos relacionados no painel de temas. Quando você tem um construtor de páginas instalado, pode usá-lo para ocultar os produtos relacionados na loja.

Para obter mais dicas para aproveitar ao máximo sua loja, consulte os seguintes guias:

• Como adicionar produtos WooCommerce
• Personalize a página do produto WooCommerce
• Como editar a página da loja WooCommerce

Você removeu produtos relacionados ao WooCommerce de sua loja? Qual método você usou? Deixe-nos saber na seção de comentários abaixo!