Como adicionar produtos relacionados ao WooCommerce: 3 métodos

Você está procurando maneiras de melhorar as conversões de seus produtos? Adicionar uma seção personalizada de produtos relacionados à sua loja online pode ser uma ótima maneira de levar seus clientes a comprar mais de seus itens. Para ajudá-lo a fazer isso, trouxemos nosso guia sobre como adicionar produtos relacionados ao WooCommerce.

Mostrar produtos semelhantes pode ser uma ótima maneira de melhorar suas conversões. Se você apresentar aos seus clientes a gama correta de produtos, certamente melhorará suas vendas. Mas antes de irmos para o processo de fazer isso, vamos ver por que você precisa da seção de produtos relacionados em breve.

Por que usar seções de produtos relacionados no WooCommerce?

A venda cruzada é uma parte importante para melhorar suas taxas de conversão. Ao fornecer opções para os clientes comprarem produtos semelhantes, você pode incentivá-los a comprar mais produtos pelo valor agregado. Da mesma forma, você também pode usar vendas cruzadas para promover produtos que você vê sendo comprados juntos. Se você puder acompanhar bem suas compras, sempre poderá optar por adicionar produtos específicos à sua lista de vendas cruzadas para obter mais lucros.

Este método em si é muito proeminente em negócios online de grande escala. Por exemplo, na Amazon, você pode vê-los fornecendo vendas cruzadas usando seções rotuladas “ Comprados juntos com frequência” , “ os clientes também compraram” ou “ produtos de marcas semelhantes”.

Portanto, se você deseja aumentar suas vendas , recomendamos adicionar e personalizar sua seção de produtos relacionados ao WooCommerce. Agora que você tem uma ideia sobre sua importância, vamos ver como podemos adicioná-los ao seu site de comércio eletrônico.

Como adicionar produtos relacionados ao WooCommerce

Por padrão, o WooCommerce permite personalizar três tipos diferentes de produtos relacionados. Essas opções são:

• Up-sells : Produtos que são exibidos ao visualizar a página do produto.
• Vendas cruzadas : Produtos que são exibidos ao visualizar a página do carrinho.
• Produtos relacionados: Produtos que são exibidos automaticamente na página do produto com base nas tags e categorias do produto.

Embora você possa adicionar manualmente quais produtos mostrar nas vendas adicionais e nas vendas cruzadas de cada WooCommerce, você só pode configurar as seções de produtos relacionados definindo suas tags e categorias corretamente.

Ao todo, existem 3 maneiras principais de adicionar os produtos relacionados no WooCommerce. Eles são:

• Do painel WooCommerce
• Usando um plug-in
• Programaticamente

Nota: Certifique-se de ter instalado um dos temas compatíveis do WooCommerce e configurado o WooCommerce corretamente em seu site para evitar problemas desnecessários no processo.

Configurar produtos relacionados ao WooCommerce no painel do WooCommerce

Para configurar seus up-sells e cross-sells para um produto específico, vá para Produtos > Todos os produtos do seu painel de administração do WordPress. Em seguida, clique no botão Editar de qualquer produto específico para o qual você deseja adicionar vendas adicionais e vendas cruzadas.

Em seguida, role para baixo e, em Dados do produto, clique em Produtos vinculados. Agora, vá em frente e liste todos os produtos que você gostaria que fossem exibidos como produtos relacionados para o produto específico. Eles podem incluir tanto o up-sell quanto o cross-sell.

Por fim, atualize o produto.

Ao visualizar o produto específico em seu site, você poderá ver os produtos vinculados no front-end do seu site.

Da mesma forma, você também poderá ver os produtos relacionados à venda cruzada ao visualizar a página do carrinho.

No entanto, os produtos relacionados ao WooCommerce são bem diferentes da seção “ Você pode gostar” que as vendas cruzadas e as vendas adicionais fornecem. Por padrão, o WooCommerce seleciona aleatoriamente os produtos a serem exibidos nas seções “Você pode gostar” usando as tags e categorias. Esta opção não é configurável usando as opções padrão do WooCommerce.

Você só pode personalizar esses produtos relacionados usando plugins de produtos relacionados ao WooCommerce ou programaticamente usando WooCommerce Hooks.

Vamos discutir mais sobre como fazer ambos neste guia. Portanto, se você quiser aprender a personalizar mais seus produtos relacionados ao WooCommerce, recomendamos que continue lendo. Vamos começar com o método do plugin , pois é mais amigável para iniciantes.

Como adicionar produtos relacionados ao WooCommerce usando um plug-in

Usar um plug-in é uma das maneiras mais fáceis de adicionar e personalizar os produtos relacionados. Esses plugins são projetados especificamente para ajudá-lo a escolher manualmente quais produtos adicionar às suas seções de produtos relacionados ao WooCommerce.

Existem vários plugins disponíveis no WordPress com vários recursos. Alguns deles permitem que você adicione seções relacionadas personalizáveis ​​que você pode adicionar a qualquer parte do seu site. Enquanto outros trabalham fornecendo a você controles deslizantes e banners em destaque totalmente personalizáveis.

Claro, a opção de escolher seu plugin depende de você. Mas para a demonstração de hoje, usaremos o plugin Custom Related Products for WooCommerce de Scott Nelle. Este plug-in funciona pelo método simples de permitir que você especifique produtos para adicionar aos produtos relacionados de qualquer produto que você desejar.

Mas para começar a usar o plugin, você precisa instalá-lo e ativá-lo primeiro.

1. Instale e ative o plug-in

Abra o painel de administração do WP e clique em Plugins> Adicionar novo para começar. Em seguida, use a barra de pesquisa no canto superior direito para pesquisar Produtos Relacionados Personalizados para WooCommerce . Em seguida, clique em Instalar agora na guia do plug-in e, em seguida, Ative -o após a conclusão da instalação. Agora, você deve terminar de ativar e instalar o plugin.

Se você deseja usar um plugin que não está incluído no repositório do WordPress, você terá que instalá-los manualmente. Temos um guia detalhado para instalar um WordPress manualmente se você precisar de mais informações sobre ele.

2. Adicione Produtos Relacionados através da Página do Produto

O próprio plugin funciona permitindo que você adicione uma seção de produtos relacionados a cada produto específico. Você pode fazer isso abrindo qualquer um dos seus produtos WooCommerce e especificando-o em Dados do produto. Se você não adicionar produtos à seção de produtos relacionados, o plug-in retornará ao comportamento padrão do WooCommerce de escolher aleatoriamente produtos relacionados ao WooCommerce usando tags.

Então, abra Produtos > Todos os produtos do seu painel de administração do WP mais uma vez e clique em Editar para o produto ao qual você deseja adicionar os produtos relacionados. Essa é a mesma abordagem anterior do painel WooCommerce.

Novamente, role para baixo em Dados do produto e clique em Produtos vinculados . Agora, você deve ver um novo campo chamado Produtos relacionados . Agora, tudo o que você precisa fazer é digitar manualmente os nomes do produto que deseja adicionar como produto relacionado ao produto específico.

Atualize o produto e você poderá ver as alterações na página do produto:

Adicionar produtos relacionados ao WooCommerce programaticamente

Como alternativa, se você não quiser usar um plug-in WooCommerce para gerenciar e personalizar produtos relacionados ao WooCommerce, também poderá optar por adicioná-los usando um snippet de código. Para isso, você precisa adicionar algumas linhas de códigos ao arquivo functions.php do seu tema. No entanto, este método pode ser aplicável para você somente se você tiver um conhecimento básico de programação.

Recomendamos que você crie um tema filho e faça backup do seu site WordPress para fazer isso. Isso garante que suas alterações sejam salvas mesmo se você atualizar seu tema do WordPress. Se precisar de ajuda, você pode até usar um dos melhores plugins de tema filho para WordPress para criar um.

Depois de mudar para o tema filho, você pode acessar o arquivo functions.php clicando em Aparência > Editor de temas. Em seguida, clique em Theme Functions ou no arquivo functions.php . Isso abrirá o arquivo no editor de temas.

Em seguida, você pode usar o trecho de código a seguir e colá-lo no editor.

 add_filter( 'woocommerce_related_products', 'QuadLayers_related_products_by_same_title', 9999, 3 ); 

function QuadLayers_related_products_by_same_title( $related_posts, $product_id, $args) {
$produto = wc_get_product( $product_id);
$título = $produto->get_name();
$related_posts = get_posts( array(
'post_type' => 'produto',
'post_status' => 'publicar',
'título' => $título,
'campos' => 'ids',
'posts_per_page' => -1,
'excluir' => array( $product_id ),
));
return $related_posts;
} 

O snippet de código funciona simplesmente fornecendo produtos relacionados com o mesmo título. Dessa forma, se você tiver produtos idênticos com os mesmos nomes, eles serão adicionados à sua seção de produtos relacionados ao WooCommerce. Atualize seu arquivo functions.php clicando em Atualizar Arquivo e pronto.

Créditos ao autor original do código aqui.

Como remover produtos relacionados ao WooCommerce

Além disso, você também pode optar por remover a seção de produtos relacionados ao WooCommerce do seu site usando o mesmo método acima. Você pode optar por remover todos os produtos relacionados inteiramente ou apenas para produtos específicos.

1. Remova todos os produtos relacionados

Para remover toda a seção de produtos relacionados de cada página de produto, basta abrir o arquivo functions.php do seu tema filho e colar o seguinte trecho de código.

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

Finalmente. atualize o arquivo. Isso deve remover totalmente a seção de produtos relacionados de todos os seus produtos WooCommerce.

Créditos ao Autor do Código aqui.

2. Remova produtos relacionados apenas para produtos específicos

Você também pode usar snippets de código para remover a seção de produtos relacionados apenas para produtos específicos em seu site, se necessário. O código a seguir simplesmente adicionará uma opção para ocultá-lo em todos os seus produtos.

Primeiro, vamos colar isso no arquivo functions.php do seu tema da mesma maneira que antes.

 add_action( 'woocommerce_product_options_general_product_data', 'QuadLayers_add_related_checkbox_products');

function QuadLayers_add_related_checkbox_products() { 
woocommerce_wp_checkbox( array( 
'id' => 'hide_related', 
'classe' => '', 
'label' => 'Ocultar produtos relacionados'
) 
); 
}

// -----------------------------------------
// 2. Salve a caixa de seleção no campo personalizado

add_action( 'save_post_product', 'QuadLayers_save_related_checkbox_products' );

function QuadLayers_save_related_checkbox_products( $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');
}

// -----------------------------------------
// 3. Ocultar produtos relacionados na página de um único produto

add_action( 'woocommerce_after_single_product_summary', 'QuadLayers_hide_related_checkbox_products', 1 );

function QuadLayers_hide_related_checkbox_products() {
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 );
}
} 

Em seguida, vá para Produtos > Todos os produtos no painel do WordPress mais uma vez e clique em Editar para o produto no qual deseja ocultar os produtos relacionados. Ao rolar em Dados do produto como nas abordagens anteriores, clique na guia Geral .

Você deverá ver uma nova opção Ocultar produtos relacionados . Ative esta opção para ocultar os produtos relacionados da página do produto específico.

Créditos ao autor do código aqui.

Como personalizar o número e as colunas de produtos relacionados

Além disso, você também pode personalizar sua seção de produtos relacionados configurando o número de produtos exibidos, bem como as linhas e colunas em seu site.

Para isso, também usaremos ganchos e funções personalizadas do WooCommerce em nosso arquivo functions.php . Vá em frente e abra o arquivo usando seu editor de temas mais uma vez e cole este trecho de código:

 add_filter( 'woocommerce_output_related_products_args', 'QuadLayers_change_number_related_products', 9999 );

function QuadLayers_change_number_related_products( $args) {
$args['posts_per_page'] = 4; // # de produtos relacionados
$args['colunas'] = 4; // # de colunas por linha
retorna $args;
} 

Este código simplesmente funciona configurando sua seção de produtos relacionados ao WooCommerce em 4 colunas e 4 linhas. Você sempre pode alterar esse valor usando $args['posts_per_page'] = 4 e $args['columns'] = 4.

Além disso, você também pode configurar esta seção usando códigos CSS adicionais. Eles podem ser usados ​​para alterar o layout e o alinhamento das colunas e linhas para que a seção se ajuste melhor ao seu site. Você pode usar o seguinte trecho de CSS para isso.

 @media (largura mínima: 768px) {
.site-main .related.products ul.products li.product {
largura: 22%;
flutuar: esquerda;
margem direita: 4%;
}

Basta colá-lo em seu CSS adicional em seu personalizador de tema . Você pode acessá-lo clicando em Aparência > Personalizar no painel do WordPress. Isso abrirá o personalizador de temas.

Em seguida, clique na guia CSS adicional e cole o script CSS aqui. Você pode ajustar o alinhamento dos produtos relacionados de acordo com as necessidades do seu site. Por fim, clique em Publicar quando terminar.

Créditos ao autor do código aqui.

Conclusão

E isso termina nosso guia para adicionar produtos relacionados ao WooCommerce. É uma das melhores maneiras de melhorar as vendas do seu site de comércio eletrônico. Mas com este guia, você poderá adicionar, personalizar ou até removê-los, se desejar.

Para resumir, você pode adicionar os produtos relacionados no WooCommerce de 3 maneiras:

• Do painel WooCommerce
• Usando um plug-in
• Programaticamente

Além disso, incluímos algumas etapas mais úteis para você personalizar esses produtos relacionados. Eles incluem removê-los das páginas de produtos e modificar o número de produtos relacionados e suas colunas. Esperamos que eles também sejam úteis para você ao adicionar os produtos relacionados. Você pode encontrar ainda mais informações em nosso tutorial detalhado para personalizar produtos relacionados ao WooCommerce.

Se você quiser saber mais sobre como personalizar várias outras seções e páginas do WooCommerce, confira alguns de nossos outros artigos, como:

• Como adicionar imagem ao produto no WooCommerce
• Personalizar mensagens de erro do WooCommerce Checkout
• Como personalizar modelos WooCommerce

Deixe-nos saber se você conseguiu personalizar e gerenciar suas seções de produtos relacionados ao WooCommerce usando nosso artigo. Se houver algum problema, informe-nos na seção de comentários. Faremos o nosso melhor para ajudá-lo o máximo que pudermos.