Mais de 5 maneiras de remover a barra lateral da página do produto em temas do WooCommerce

Deseja remover a barra lateral da página do produto no WooCommerce? Se você está procurando uma solução, descrevi neste tutorial rápido do Woocommerce como remover a barra lateral da página do produto passo a passo. É fácil de seguir e pode ser implementado por todos os usuários do WordPress, independentemente do nível de habilidade. Se você deseja remover a barra lateral do site WordPress ou de um tema específico, expliquei em detalhes aqui.

Barra lateral da página do produto WooCommerce

No WooCommerce, a página do produto vem com uma barra lateral padrão na maioria dos temas e isso pode ser um problema para vários usuários do WooCommerce. Por exemplo, o tema padrão do WooCommerce – Storefront vem com a barra lateral da página do produto, como pode ser visto na imagem abaixo:

Hoje vou orientá-lo sobre como remover esta barra lateral do WooCommerce na página do produto. Para fins de ilustração, usarei o tema WordPress da loja WooCommerce, mas essa abordagem funcionará em todos os temas WooCommerce.

Passo a passo como remover a barra lateral do WooCommerce da página do produto

A seguir estão as etapas e opções para remover a barra lateral da página do produto WooCommerce:

1. Faça login no seu site WooCommerce e abra o editor de temas e o arquivo functions.php
2. Você também pode usar o FTP ou o CPanel de sua empresa de hospedagem para adicionar o trecho de código ao arquivo functions.php do tema específico.
3. Adicione o trecho de código que consiste em um gancho de ação de remoção para ' wp' que se conecta ao evento woocommerce_sidebar que é responsável por adicionar a ação da barra lateral no tema WooCommerce.
4. Para o tema WooCommerce da vitrine , há um gancho especial storefront_sidebar que você deve usar para remover a barra lateral WooCommerce da página do produto.
5. Você também pode usar a tag condicional is_product para verificar se está na página do produto antes de remover a barra lateral da página do produto no WooCommerce.
6. Adicione este trecho de código no functions.php e update e, em seguida, visite a página do seu produto WooCommerce no frontend para ver se as alterações são efetivas.
7. Outra solução que você pode usar para remover a barra lateral da página do produto é definir um modelo de postagem personalizado de largura total que é claramente explicado neste post sobre como remover a barra lateral do WordPress. um dos melhores temas premium do WordPress – DIVI

Trechos de código para remover a barra lateral da página do produto no WooCommerce

Existem três abordagens que você pode usar para remover a barra lateral da página do produto no WooCommerce, conforme descrito no resumo passo a passo acima.

#1) Remova o Action Hook para 'WP' usando a barra lateral do WooCommerce

Então vamos começar pelo gancho remove_action adicionado ao evento 'wp'. O código deve ser o seguinte:

 add_action( 'wp', 'njengah_remove_sidebar_product_pages');

function njengah_remove_sidebar_product_pages() {

    if ( is_product() ) {

    remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );

   }

}

Este snippet removerá a barra lateral de todas as páginas do produto quando adicionado ao seu arquivo de tema functions.php ou ao seu plugin WooCommerce personalizado.

Como funciona

Este snippet de código consiste em um gancho de ação que é adicionado ao evento 'wp' e suas funções de retorno de chamada usam um gancho remove_action para remover todas as barras laterais nas páginas do produto, pois especifica woocommerce_sidebar.

Esta é a maneira mais eficaz de remover a barra lateral da página do produto em todos os seus produtos WooCommerce.

#2) Use is_active_sidebar() para remover a barra lateral das páginas de produtos WooCommerce

Outra técnica que você pode empregar para remover a barra lateral da página do produto no WooCommerce é usar a função is_active_sidebar do WordPress. Este é um exemplo de trecho de código que usa is_active_sidebar para remover as barras laterais do WooCommerce:

 /**
 * Desative a barra lateral nas páginas de produtos no WooCoomerce.
 *
 */

function njengah_remove_sidebar( $is_active_sidebar, $index) {              

    if( $index !== "sidebar-1" ) {

        return $is_active_sidebar;

    }

    if( ! is_product() ) {

        return $is_active_sidebar;

    }

    retorna falso;

}

add_filter( 'is_active_sidebar', 'njengah_remove_sidebar', 10, 2 );

Como funciona

Este código consiste em um gancho de filtro que verifica se existe uma barra lateral com o índice de sidebar-1 que pode ser alterado para corresponder a qualquer outro id/nome da barra lateral.

Se a barra lateral for encontrada, o retorno será definido como false para desabilitar a barra lateral. Para torná-lo eficaz na página do produto, a última parte usa is_product() para verificar se estamos na página do produto.

Para saber mais sobre o índice da barra lateral, que é equivalente ao nome ou ID da barra lateral, você deve lê-lo aqui – como adicionar barra lateral no WordPress ou aqui – como registrar a barra lateral no WordPress.

#3) Remova a barra lateral do tema Storefront WooCommerce usando Remover gancho na ação storefront_sidebar

Para este snippet específico, você pode usá-lo para remover a barra lateral da página do produto WooCommerce, pois atua em um gancho específico para o tema Storefront que é storefront_sidebar, o código a seguir deve remover a barra lateral no tema Storefront:

 add_action( 'get_header', 'njengah_remove_storefront_sidebar' );

function njengah_remove_storefront_sidebar() {

     if ( is_product() ) {

       remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );

    }

}

Como funciona

Isso é simplesmente um gancho para a ação get_header e a função de retorno de chamada tem um remove_action que tem como alvo o gancho específico storefront_sidebar que adiciona a barra lateral no tema Woocommerce da loja.

Você também pode encontrar na documentação do seu tema específico se o seu tema atual do WooCommerce tiver esse tipo de gancho que agora você pode substituir no código acima e funcionará perfeitamente.

#4) Remova a barra lateral do WooCommerce usando um modelo de página de produto personalizado

Alguns temas premium e gratuitos do WooCommerce vêm com um modelo de postagem personalizado para a página do produto que define uma página de largura total que elimina a barra lateral.

Um exemplo clássico é o tema Divi como você pode ver na imagem abaixo, basta escolher o template fullwidth e a barra lateral será removida.

Como funciona

Usar o modelo de postagem personalizado de largura total é uma técnica que foi explicada neste post – como remover a barra lateral do WordPress

#5) Use CSS para remover a barra lateral da página do produto WooCommerce

Outra maneira comum e fácil de ocultar a barra lateral do WooCommerce da página do seu produto é usando a propriedade de exibição CSS. Exemplo de tal código é compartilhado abaixo:

 .barra lateral direita .widget-area {

       largura: 21,7391304348%;

       flutuar: direita;

       margem direita: 0;

      Mostrar nenhum;

}

Como funciona

A propriedade de exibição CSS quando definida como none remove o elemento da visualização. Outra propriedade CSS que pode ser usada para ocultar a barra lateral é a visibilidade.

Quando a visibilidade estiver definida como oculta, o elemento HTML ficará oculto da visualização. Você deve verificar a classe da barra lateral do seu tema antes de poder empregar essa técnica, conforme mostrado abaixo:

WooCommerce remove a barra lateral do tema da vitrine da página do produto

#1) Adicionar trecho de código para remover a barra lateral do tema da vitrine

Quando você adiciona os trechos de código acima no arquivo functions.php do tema da vitrine, sua barra lateral deve ser removida e deve ficar como na imagem abaixo:

#2) Remover Widgets Remover WooCommerce do Tema Storefront

Outro truque simples para remover a barra lateral do tema da vitrine é garantir que não haja widgets adicionados à barra lateral principal, conforme mostrado na imagem abaixo:

Empacotando

Este tutorial abrange todas as melhores maneiras que você pode usar para remover a barra lateral da página do produto no WooCommerce. Existem outras maneiras que você pode empregar para remover a barra lateral do site WordPress, conforme discutido neste post – como remover a barra lateral do WordPress . Também ajuda a entender como adicionar barra lateral no WordPress especialmente para desenvolvedores do WordPress ou desenvolvedores de temas do WooCommerce . Espero que essas dicas compartilhadas neste post sejam úteis.

Artigos semelhantes

1. Como redimensionar imagens de produtos WooCommerce
2. Como remover o efeito de zoom na imagem do produto WooCommerce
3. Como definir produtos em destaque no WooCommerce
4. Como remover foi adicionado ao seu carrinho Mensagem WooCommerce
5. Como adicionar o ícone de remoção à página de checkout do WooCommerce
6. Como alterar o texto do estoque no WooCommerce
7. Como remover os detalhes de cobrança do WooCommerce Checkout
8. Como contar itens adicionados ao carrinho Código de contagem de carrinho WooCommerce
9. Como remover o menu de downloads Minha página de conta WooCommerce
10. Como remover a categoria da página do produto WooCommerce em 2 opções fáceis
11. Como remover a barra lateral da página do WordPress ou ocultar a barra lateral do WordPress
12. Como adicionar texto antes do preço no WooCommerce » Adicionar texto antes do preço
13. Como alterar o preço do produto programaticamente no WooCommerce
14. Como adicionar descrição após o preço no WooCommerce
15. Como alterar o procedimento de check-out no WooCommerce
16. Como criar minha página de conta no WooCommerce
17. Como criar o botão de logout do WooCommerce
18. Como adicionar categorias aos produtos WooCommerce
19. Como redirecionar após o checkout WooCommerce: Redirecionar para página de agradecimento personalizada
20. Como exibir produtos WooCommerce por categoria