• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Activar el modo catálogo en WooCommerce

Activar el modo catálogo en WooCommerce

Activar el modo catálogo en WooCommerce

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

funcionalidad woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

WordPress modo catálogo resultado

 

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:

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Restringir productos por país en WooCommerce a través de códigoRestringir productos por país en WooCommerce a través de código
  • Geolocalización en WooCommerce con MaxMindGeolocalización en WooCommerce con MaxMind
  • Tabs a acordeón en página de productos de WooCommerceTabs a acordeón en página de productos de WooCommerce
  • Guía visual de Hooks para StoreFront y WooCommerceGuía visual de Hooks para StoreFront y WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

¿Cómo mostrar un menú diferente para usuarios registrados?

Relación bidireccional entre diferentes tipos de contenido con ACF

Post Meta desde la API de WordPress

Clases CSS basadas en el Rol de usuario en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados