Activar el modo catálogo en WooCommerce

[ hace 5 meses ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Básico] [ ]

Existen plugins que te facilitan la labor de activar el modo catálogo en WooCommerce, sin embargo en este artículo veremos cómo realizar esto directamente a través de código.

Resultado Final

Al final obtendremos los productos sin la opción de agregar al carrito, ocultando las etiquetas de ofertas, e incluso, opcionalmente, ocultando el precio.

Código para activar el modo catálogo en WooCommerce

Anteriormente habíamos visto los Hooks de WooCommerce, si queremos activar el modo catálogo simplemente removeremos los Hooks que hacen referencia al carrito de compra, los precios y las etiquetas de ofertas.


// Remove add to cart button
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
remove_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );

// Remove - Sale badge
add_filter('woocommerce_sale_flash', '__return_false');

// Optional - Remove prices
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

Puedes agregar el siguiente código como parte de tu archivo functions.php de tu tema hijo.

Código adicional para ocultar detalles del tema

Es posible que adicionalmente necesites ocultar el carrito de compra, esta funcionalidad esta ligada usualmente al propio tema, revisa primero a nivel de la configuración del tema que usas si tienes esta opción.

Si no tienes la opción desde alguna pantalla de configuración entonces evalúa ocultarlo a través de código CSS, en un artículo anterior habíamos visto cómo Usar el Inspector de código para modificar un tema.

Ocultar elementos detectados con el inspector de código

Por ejemplo para ocultar las referencias al carrito en el tema StoreFront usamos el siguiente código CSS

.woocommerce-active .site-header .site-header-cart,
.storefront-handheld-footer-bar{
    display: none;
}

Puedes agregar el siguiente código como parte de tu archivo style.css de tu tema hijo.

Conclusión

Como has podido comprobar puedes activar el modo catálogo de WooCommerce directamente agregando código PHP o CSS como parte de los archivos de tu tema activo.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores: