• 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 / Guía visual de Hooks para StoreFront y WooCommerce

Guía visual de Hooks para StoreFront y WooCommerce

Guía visual de Hooks para StoreFront y WooCommerce

[ 30 marzo 2021 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

herramientas woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Si estas trabajando con el tema StoreFront y quieres hacer cambios en el diseño del theme o en las secciones de WooCommerce, muchas veces necesitas conocer los Hooks que tienes disponible para hacer estos cambios a través de código.

 

Generalidades

El plugin que usaremos para identificar los Hooks disponibles tanto para el tema Storefront como para WooCommerce es Storefront Visual Hook Guide.

Guía visual hooks plugin

Ten en cuenta que es un plugin para desarrollo, por lo que debes eliminarlo de tu sitio web final.
El plugin sólo funciona con el tema Storefront.

 

Opciones del plugin

Tras instalar y activar el plugin, veremos en el front-end del sitio, en la barra superior una nueva opción de menú que nos crea el plugin.

top bar opciones plugin

 
Podemos mostrar los hooks de acción y filtro para el tema Storefront y los hooks de acción para Woocommerce

 

Mostrando Hooks para el tema Storefront

Cuando activamos la opción de mostrar Ganchos (Hooks) para Storefront, veremos que aparecen secciones destacadas con un color celeste que nos indican los diferentes Hooks usados en el tema y los cuales a través de código podemos modificar.

Ten en cuenta que en cada una de estas secciones de Hooks es posible que ya tengan asignadas algunas funciones, es por eso que aparece el símbolo más para desplegar el detalle de cada sección.

top bar opciones plugin

 
Por ejemplo si queremos agregar algún contenido como parte del Hook storefront_footer, podemos usar un código similar a:

add_action('storefront_footer', 'dcms_after_credits', 30);
function dcms_after_credits(){
	echo "Esto aparecerá después de los créditos del footer";
}
Para agregar esa línea hemos usado la prioridad de 30 que es la misma con la que se registró la función after_credits

Esta guía también nos sirve para eliminar las funciones asignadas a algún Hook, por ejemplo para remover la sección de categorías:

add_action('wp_head', 'remove_categories');
function remove_categories(){
	remove_action( 'homepage', 'storefront_product_categories', 20);
}
Para eliminar, asegúrate de usar la misma prioridad que indica la guía visual, en nuestro ejemplo la prioridad con la que se registró la función storefront_product_categories en el Hook homepage es 20

 

Mostrando los Hooks de WooCommerce

De la misma forma que se muestran los Hooks del tema Storefront, es posible mostrar los Hooks de WooCommerce para esto vasta sólo con visitar alguna página de WooCommerce y luego activar la opción de Mostrar Ganchos para WooCommerce, por ejemplo para la página de producto:

Veremos que se destaca algunas secciones con el color morado, característico de WooCommerce, algunas secciones igualmente puede ser que tengan asignados ya algunas funciones, puedes ver el detalle usando el botón de más.

Página de producto Hooks WooCommerce

 
Por ejemplo para mostrar una imagen con las tarjetas de crédito en la parte inferior, podemos usar el siguiente código en donde usamos el Hook woocommerce_share

add_action('woocommerce_share', 'dcms_add_image_cards', 10);
function dcms_add_image_cards(){
	$ruta = get_stylesheet_directory_uri()."/tarjetas_credito.jpg";
	echo "<img src='".$ruta."'  width=100 />";
}

 
Siempre que usamos un Hook, podemos ver que aparecerá la función a la que se hace referencia como parte del detalle de la sección.

Muestra función en el hoook usado

 

Conclusión

Tener una guía visual de las posiciones y nombres de los Hooks es muy útil si estas creando o modificando secciones de tu sitio a través de código. El plugin Storefront Visual Hook Guide nos ayuda con esto, si bien es cierto que sólo funciona con el tema Storefront, podemos usarlo también para ver los Hooks que podemos usar en WooCommerce.

 
¿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

  • Personalizar página de gracias de WooCommercePersonalizar página de gracias de WooCommerce
  • Modificar el precio de un producto por código en WooCommerceModificar el precio de un producto por código en WooCommerce
  • Mostrar el stock en la lista de productos de WooCommerceMostrar el stock en la lista de productos de WooCommerce
  • Qué son los Hooks de WordPress¿Qué son los Hooks de WordPress y Cómo usarlos?
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 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

Insertar código fuente en WordPress usando Prism

¿Qué son los Nonces en WordPress?

Deshabilitar verificación del correo electrónico de administración

Formulario de cotización en WooCommerce sin plugins

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