Como ocultar / remover o botão Adicionar ao carrinho no WooCommerce (passo a passo)

Como ocultar e remover o botão Adicionar ao carrinho no WooCommerce

Vamos começar descobrindo por que você pode querer ocultar o botão Adicionar ao carrinho. Uma das maneiras mais eficazes de desativar o processo de compra de um produto ou loja específico é remover o botão Adicionar ao carrinho. Mesmo que pareça estranho, remover o botão Adicionar ao carrinho pode ser extremamente útil em algumas circunstâncias.

Existem muitas razões pelas quais você pode querer remover o botão Adicionar ao carrinho de algumas páginas da sua loja, além de oferecer mais opções de personalização:

  1. Quando um produto está fora de estoque ou não está mais disponível
  2. Para desativar o botão com base na lógica (ou seja, para funções ou produtos de usuários específicos, usuários não logados etc.)
  3. O produto ainda não está disponível para compra.
  4. Quando você deseja que os clientes usem esse botão em vez do processo de compra padrão do WooCommerce para enviar uma mensagem ou marcar uma entrevista.

Estes são apenas alguns exemplos de quando você pode querer ocultar ou remover o botão Adicionar ao carrinho de sua loja. Vamos começar a remover o botão Adicionar ao carrinho do WooCommerce da sua loja.

 

Como remover o botão Adicionar ao carrinho no WooCommerce

Neste artigo, você aprenderá a ocultar o botão adicionar ao carrinho de várias maneiras. Mostraremos como fazer o seguinte para oferecer mais opções:

  1. Remova ou oculte o botão Adicionar ao carrinho em todo o site.
  2. Oculte o botão Adicionar ao carrinho para usuários que não estão logados.
  3. Remova o botão Adicionar ao carrinho com base nas funções do usuário.
  4. Ocultar o botão Adicionar ao carrinho em determinados produtos.
  5. Desative o botão Adicionar ao carrinho para apenas algumas categorias
  6. Remova o botão temporariamente e ele reaparecerá após uma data.
  7. Vamos dar uma olhada em cada um deles em diferentes seções.

Nota: Como estaremos editando os arquivos principais do WordPress, recomendamos fazer um backup completo do seu site caso algo dê errado. Você também pode utilizar um tema filho. Se você ainda não tem um, você pode criar um você mesmo ou usar um plugin de tema filho.

1. Remova ou oculte o botão Adicionar ao carrinho em todo o site

Existem várias opções para remover totalmente o botão Adicionar ao carrinho da sua loja. Uma das mais simples é colocar o seguinte script em seu tema infantil arquivo functions.php:

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

Removemos o botão Adicionar ao carrinho na página do produto com o primeiro gancho remove action() e fazemos o mesmo na página do carrinho de compras com o segundo. Desabilitar a opção de compra de produtos, por outro lado, é uma solução mais limpa e confiável. Você poderá tornar os produtos indisponíveis para compra e impedir que os usuários os adicionem ao carrinho dessa maneira.

Com o script a seguir, você pode fazer isso e tornar todos os seus produtos indisponíveis para compra em sua loja:

add_filter( 'woocommerce_is_purchasable', '__return_false');

Isso desativará o botão Adicionar ao carrinho do WooCommerce, mas não o botão em si. Ele simplesmente será substituído por um botão Leia mais, redirecionando os usuários para a página do produto, que ficará livre de botões.

Se você quiser ocultar o botão Leia mais além do botão Adicionar ao carrinho, use uma regra CSS. Os clientes, por outro lado, não poderão comprar nada porque não poderão adicionar produtos ao carrinho, mesmo que aprendam a usar a ferramenta de desenvolvedor do navegador para exibi-lo. Use o gancho add filter() em vez do gancho remove action() sempre que possível.

Leia mais: Como alterar o texto do botão Adicionar ao carrinho

2. Oculte o botão Adicionar ao carrinho para usuários que não estão logados

Suponha que você esteja realizando uma promoção por tempo limitado para seus usuários registrados. Você pode criar uma página de destino exclusiva e enviar um e-mail apenas para seus usuários registrados com o link, mas e se eles compartilharem com outras pessoas? Você pode remover o botão Adicionar ao carrinho da sua loja WooCommerce apenas para usuários não logados para evitar que isso aconteça e garantir que você dê descontos apenas ao consumidor-alvo. Para fazer isso, cole o seguinte script no arquivo functions.php do seu tema filho:

if (!is_user_logged_in()) {
// na página do produto
add_filter('woocommerce_is_purchasable', '__return_false');

}

Desativaremos o botão Adicionar ao carrinho apenas para usuários não logados aplicando a função nativa do WordPress is user logado() .

3. Remova o botão Adicionar ao carrinho com base nas funções do usuário

Outra opção brilhante é desabilitar o botão Adicionar ao carrinho dependendo da função do usuário. Vamos dar uma olhada em como tornar o botão invisível para qualquer usuário administrador:

add_action('wp_loaded','get_user_role');

função get_user_role(){

$user_atual = wp_get_user_atual();

  if(count($current_user->roles)!==0){

  if($current_user->roles[0]=='administrador'){

add_filter('woocommerce_is_purchasable', '__return_false');

}

}

}

O objeto de usuário do WordPress é recuperado e duas condicionais são aplicadas a ele pelo script. A primeira é determinar se um usuário tem uma função e a segunda é tornar os produtos indisponíveis para compra somente se a função do usuário corresponder à que especificamos (administrador, neste caso). Você certamente pode usar este código e alterar a função que não deseja ver no botão Adicionar ao carrinho editando a função em if($current_user->roles[0]=='your_role'){.

4. Ocultar o botão Adicionar ao carrinho em determinados produtos

Digamos que você esteja sem estoque para alguns itens e queira ocultar temporariamente o botão Adicionar ao carrinho para esses itens.

Copie e cole o seguinte script no arquivo functions.php do tema filho para remover o botão de produtos específicos:

add_filter('woocommerce_is_purchasable', 'filter_is_purchasable', 10, 2);

function filter_is_purchasable($is_purchasable, $product) {

global $ product;

if( in_array( $product->get_id(), not_purchasable_ids() )) {

return false;

}

return $is_compráveis;

}

função not_purchasable_ids() {

array de retorno ( 624,625 );

}

O botão Adicionar ao carrinho está desabilitado para os produtos com IDs 624 e 625 neste script de exemplo. Considere substituir esses IDs por seus IDs de produtos WooCommerce para ajustá-los à sua loja. Como você pode ver, você pode permitir produtos ilimitados simplesmente usando uma vírgula para separar os IDs.

Vá para o painel do WordPress > WooCommerce > Produtos e passe o mouse sobre um produto na lista para ver seu ID.

5. Desative o botão Adicionar ao carrinho apenas para algumas categorias

Você também pode desativar o botão Adicionar ao carrinho para categorias específicas. Por exemplo, se você quiser ocultar o botão da categoria “Laptops”, você pode usar o seguinte código:

add_action('wp', 'QL_remove_add_to_cart_from_category');   

função QL_remove_add_to_cart_from_category(){ 

  if( is_product_category( 'laptops' ) ) { 

    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); 

  } 

}

Basta copiar este código e substituir "laptops" na linha 3 pelo título da categoria onde o botão Adicionar ao carrinho deve estar oculto.

6. Remova o botão temporariamente e ele reaparecerá após uma data

Vamos levar as coisas para outro nível e juntar um pouco do que lemos. Suponha que você está prestes a lançar um produto e já criou uma página de produto com todos os seus recursos. Se você quiser usar essa página para informar seus clientes sobre o lançamento e promover o produto antes que ele seja lançado, você pode ocultar o botão Adicionar ao carrinho até o lançamento oficial e, em seguida, exibi-lo automaticamente no dia do lançamento.

Digamos que você planeja apresentar seu produto em 15 de dezembro de 2020 e deseja ocultar o botão Adicionar ao carrinho até então e revelá-lo novamente em 15 de dezembro. Para isso, basta copiar e colar o script abaixo:

add_filter( 'woocommerce_is_comprável', 'hide_add_to_cart_button_until_date', 10, 2 );

function hide_add_to_cart_button_until_date( $is_purchasable = true, $product) {

$current_date = date('Ym-d');

$release_date = date( 'Ym-d', strtotime('2020-12-15') );

if( strtotime($current_date) < strtotime($release_date) && $product->get_id() == 624 ) {

$is_comprável = false;

}

return $is_compráveis;

}

O botão Adicionar ao carrinho será substituído por um botão Leia mais que levará os usuários à página do produto até a data de lançamento. Vamos dar uma olhada em como o script funciona agora. O código compara a data atual com a data de lançamento e, se a data atual for anterior, o produto não estará disponível para compra.

O produto estará disponível para compra quando a data atual for igual ou superior à data de lançamento, e o botão Adicionar ao carrinho aparecerá automaticamente. Lembre-se de incluir a data e o ID do produto (624 em nosso exemplo).

Você aprendeu vários métodos para remover o botão Adicionar ao carrinho neste guia. Vimos como ocultá-lo em toda a loja, para produtos, usuários e funções de usuário específicos, e até mesmo como ocultá-lo em um determinado dia e exibi-lo automaticamente novamente. Isso lhe dá um pouco mais de liberdade quando se trata de personalizar sua loja para diferentes cenários.

Basta usar esses scripts como ponto de partida e modificá-los para atender às necessidades da sua loja.

 

Sobre o autor
Daniel Luke
Daniel é web designer e desenvolvedor. Ele é desenvolvedor há 10 anos, trabalhando com vários temas WordPress que lhe permitem comparar e contrastar diferentes temas, compreender os pontos fortes e fracos para desenvolver análises factuais do mundo real. Ele também é desenvolvedor de aplicativos móveis e revisor de tecnologia. Ao longo de vários anos, ele desenvolveu seus próprios aplicativos móveis, tanto para Android quanto para iPhone. Essa especialização prática em desenvolvimento móvel e web permite que ele seja uma voz de autoridade quando se trata de relatórios de tecnologia.

Mais uma coisa... Você sabia que as pessoas que compartilham coisas úteis como esta postagem também parecem FANTÁSTICAS? ;-)
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!

Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.

Autor (es) em destaque em:  Logotipo da revista Inc   Logotipo do Sitepoint   Logotipo do CSS Tricks    logotipo do webdesignerdepot   Logotipo WPMU DEV   e muitos mais ...