Más de 5 formas de eliminar la barra lateral de la página del producto en los temas de WooCommerce

¿Quieres eliminar la barra lateral de la página del producto en WooCommerce? Si está buscando una solución, he descrito en este tutorial rápido de Woocommerce cómo eliminar la barra lateral de la página del producto paso a paso. Es fácil de seguir y puede ser implementado por todos los usuarios de WordPress, independientemente del nivel de habilidad. Si desea eliminar la barra lateral del sitio de WordPress o un tema específico, lo expliqué en detalle aquí.

Barra lateral de la página de productos de WooCommerce

En WooCommerce, la página del producto viene con una barra lateral predeterminada en la mayoría de los temas y esto puede ser un problema para varios usuarios de WooCommerce. Por ejemplo, el tema predeterminado de WooCommerce - Storefront viene con la barra lateral de la página del producto como se ve en la imagen a continuación:

Hoy lo guiaré sobre cómo eliminar esta barra lateral de WooCommerce en la página del producto. Con fines ilustrativos, usaré el tema de WordPress de escaparate de WooCommerce, pero este enfoque funcionará en todos los temas de WooCommerce.

Paso a paso Cómo quitar la barra lateral de WooCommerce de la página del producto

Los siguientes son los pasos y opciones para eliminar la barra lateral de la página del producto WooCommerce:

1. Inicie sesión en su sitio de WooCommerce y abra el editor de temas y el archivo functions.php
2. También puede usar el FTP o el CPanel de su empresa de alojamiento para agregar el fragmento de código al archivo functions.php del tema específico.
3. Agregue el fragmento de código que consiste en un gancho de acción de eliminación a ' wp' que se engancha en el evento woocommerce_sidebar que es responsable de agregar la acción de la barra lateral en el tema de WooCommerce.
4. Para el tema de escaparate de WooCommerce , hay un gancho especial storefront_sidebar que debe usar para eliminar la barra lateral de WooCommerce de la página del producto.
5. También puede usar la etiqueta condicional is_product para verificar si está en la página del producto antes de poder eliminar la barra lateral de la página del producto en WooCommerce.
6. Agregue este fragmento de código en functions.php y actualice , y luego visite la página de su producto WooCommerce en la interfaz para ver si los cambios son efectivos.
7. Otra solución que puede usar para eliminar la barra lateral de la página del producto es configurar una plantilla de publicación personalizada de ancho completo que se explica claramente en esta publicación sobre cómo eliminar la barra lateral de WordPress. En este caso, necesita un tema de WordPress que admita una plantilla de publicación personalizada como uno de los mejores temas premium de WordPress – DIVI

Fragmentos de código para eliminar la barra lateral de la página del producto en WooCommerce

Hay tres enfoques que puede usar para eliminar la barra lateral de la página del producto en WooCommerce, como se describe en el resumen paso a paso anterior.

#1) Quitar el gancho de acción a 'WP' usando la barra lateral de WooCommerce

Entonces, comenzaremos con el gancho remove_action agregado al evento 'wp'. El código debe ser el siguiente:

 add_action('wp', 'njengah_remove_sidebar_product_pages' );

función njengah_remove_sidebar_product_pages() {

    si (es_producto()) {

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

   }

}

Este fragmento eliminará la barra lateral de todas las páginas del producto cuando se agregue a su archivo de tema functions.php o su complemento WooCommerce personalizado.

Cómo funciona

Este fragmento de código consiste en un enlace de acción que se agrega al evento 'wp' y sus funciones de devolución de llamada usan un enlace remove_action para eliminar todas las barras laterales en las páginas del producto, ya que especifica woocommerce_sidebar.

Esta es la forma más efectiva de eliminar la barra lateral de la página del producto en todos sus productos de WooCommerce.

#2) Use is_active_sidebar() para eliminar la barra lateral de las páginas de productos de WooCommerce

Otra técnica que puede emplear para eliminar la barra lateral de la página del producto en WooCommerce es usar la función de WordPress is_active_sidebar . Este es un ejemplo de fragmento de código que usa is_active_sidebar para eliminar las barras laterales de WooCommerce:

 /**
 * Deshabilitar la barra lateral en las páginas de productos en WooCoomerce.
 *
 */

función njengah_remove_sidebar ($is_active_sidebar, $index) {              

    if( $índice !== "barra lateral-1" ) {

        volver $is_active_sidebar;

    }

    if( ! es_producto() ) {

        volver $is_active_sidebar;

    }

    falso retorno;

}

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

Cómo funciona

Este código consiste en un gancho de filtro que verifica si hay una barra lateral con el índice de la barra lateral-1 que se puede cambiar para que coincida con cualquier otra identificación/nombre de la barra lateral.

Si se encuentra la barra lateral, el retorno se establece en falso para deshabilitar la barra lateral. Para hacerlo efectivo en la página del producto, la última parte usa is_product() para verificar si estamos en la página del producto.

Para obtener más información sobre el índice de la barra lateral, que es equivalente al nombre o ID de la barra lateral, debe leerlo aquí: cómo agregar una barra lateral en WordPress o aquí: cómo registrar una barra lateral en WordPress.

#3) Eliminar la barra lateral del tema Storefront WooCommerce usando Eliminar gancho en la acción storefront_sidebar

Para este fragmento específico, puede usarlo para eliminar la barra lateral de la página del producto de WooCommerce, ya que actúa en un enlace específico para el tema Storefront que es storefront_sidebar. El siguiente código debería eliminar la barra lateral en el tema Storefront:

 add_action('get_header', 'njengah_remove_storefront_sidebar');

función njengah_remove_storefront_sidebar() {

     si (es_producto()) {

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

    }

}

Cómo funciona

Esto es simplemente un gancho para la acción get_header y la función de devolución de llamada tiene una acción remove_action que apunta al gancho storefront_sidebar específico que agrega la barra lateral en el tema Woocommerce de la tienda.

También puede encontrar en la documentación de su tema específico si su tema actual de WooCommerce tiene este tipo de gancho que ahora puede reemplazar en el código anterior y funcionará sin problemas.

#4) Eliminar la barra lateral de WooCommerce usando una plantilla de página de producto personalizada

Algunos temas premium y gratuitos de WooCommerce vienen con una plantilla de publicación personalizada para la página del producto que establece una página de ancho completo que elimina la barra lateral.

Un ejemplo clásico es el tema Divi, como puede ver en la imagen a continuación, simplemente puede elegir la plantilla de ancho completo y se eliminará la barra lateral.

Cómo funciona

El uso de la plantilla de publicación personalizada de ancho completo es una técnica que se ha explicado en esta publicación: cómo eliminar la barra lateral de WordPress

#5) Use CSS para eliminar la barra lateral de la página del producto WooCommerce

Otra forma común y fácil de ocultar la barra lateral de WooCommerce de la página de su producto es usar la propiedad de visualización CSS. A continuación se comparte un ejemplo de dicho código:

 .barra lateral derecha .widget-area {

       ancho: 21.7391304348%;

       flotar derecho;

       margen derecho: 0;

      pantalla: ninguno;

}

Cómo funciona

La propiedad de visualización de CSS cuando se establece en ninguno elimina el elemento de la vista. Otra propiedad de CSS que se puede usar para ocultar la barra lateral es la visibilidad.

Cuando la visibilidad está configurada como oculta, el elemento HTML se ocultará de la vista. Debe verificar la clase de la barra lateral de su tema antes de poder emplear esta técnica como se muestra a continuación:

WooCommerce Eliminar la barra lateral de la página del producto Storefront Theme

#1) Agregue un fragmento de código para eliminar la barra lateral del tema Storefront

Cuando agrega los fragmentos de código anteriores en el archivo functions.php del tema de la tienda, su barra lateral debe eliminarse y debe ser como se muestra en la imagen a continuación:

#2) Quitar widgets Quitar WooCommerce del tema Storefront

Otro truco simple para eliminar la barra lateral del tema de la tienda es asegurarse de que no se agreguen widgets a la barra lateral principal, como se muestra en la imagen a continuación:

Terminando

Este tutorial cubre todas las mejores formas que puede usar para eliminar la barra lateral de la página del producto en WooCommerce. Hay otras formas que puede emplear para eliminar la barra lateral del sitio de WordPress como se explica en esta publicación: cómo eliminar la barra lateral de WordPress . También ayuda a comprender cómo agregar una barra lateral en WordPress, especialmente para los desarrolladores de WordPress o los desarrolladores de temas de WooCommerce . Espero que encuentre útiles estos consejos compartidos en esta publicación.

Artículos similares

1. Cómo cambiar el tamaño de las imágenes de productos de WooCommerce
2. Cómo eliminar el efecto de zoom en la imagen del producto WooCommerce
3. Cómo configurar productos destacados en WooCommerce
4. Cómo eliminar Ha sido agregado a su carrito Mensaje WooCommerce
5. Cómo agregar el ícono Eliminar a la página de pago de WooCommerce
6. Cómo cambiar el texto en stock en WooCommerce
7. Cómo eliminar los detalles de facturación de WooCommerce Checkout
8. Cómo contar los artículos agregados al carrito WooCommerce Cart Count Code
9. Cómo quitar el menú de descargas Página de mi cuenta WooCommerce
10. Cómo eliminar una categoría de la página del producto WooCommerce en 2 opciones sencillas
11. Cómo quitar la barra lateral de la página de WordPress u ocultar la barra lateral de WordPress
12. Cómo agregar texto antes del precio en WooCommerce » Agregar texto antes del precio
13. Cómo cambiar el precio del producto mediante programación en WooCommerce
14. Cómo agregar una descripción después del precio en WooCommerce
15. Cómo cambiar el texto Proceder al pago en WooCommerce
16. Cómo crear la página de mi cuenta en WooCommerce
17. Cómo crear el botón de cierre de sesión de WooCommerce
18. Cómo agregar categorías a los productos de WooCommerce
19. Cómo redirigir después de pagar WooCommerce: redirigir a la página de agradecimiento personalizada
20. Cómo mostrar productos de WooCommerce por categoría