Guia de hooks o ganchos en la Ficha de Producto de Woocommerce
Uno de los grandes beneficios de Woocommerce es que dispone de Ganchos o Hooks para poder añadir contenido a sus páginas. Si no sabéis lo que es un gancho no es más que una zona en la que se puede añadir contenido de forma automatizada o bien remplazar esa zona por otra. Es parecido a lo que solemos hacer con los Snippets de Woocommerce.
Hemos hecho este post ya que, muchas de las tiendas online que solemos realizar, tienen estas personalizaciones en la ficha de producto para mostrar lo que suelen mostrar en estos artículos para aumentar la conversión. Muchas veces nos consultan cómo se crean esas zonas o cómo las pueden poner ellos en sus tiendas online. En este artículo veremos todas las zonas editables, cómo hacerlo mediante código o un plugin y estrategias que suelo usar.
Guía de Hooks en la página de producto de Woocommerce
Ejemplo de añadir código
El primero sería añadir un texto de ventajas competitivas después del botón de añadir al carrito. Lo primero que tendríamos que hacer es buscar el Hook con esa ubicación, en este caso woocommerce_after_add_to_cart_button.
Una vez esto añadimos una acción add_action(), entre los paréntesis primero ponemos la ubicación y después la función que vayamos a crear(woocommerce_anadir_despues_boton_añadir_carrito). Cerramos poniendo la prioridad(30). Más tarde creamos la función, en este caso es poner un texto como puedes ver aquí:
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_anadir_antes_de_pestanas', 30 );
function woocommerce_anadir_antes_de_pestanas() {
echo '
‘; // Cambia las ventajas como quieras entre los
Añades esto a tu plugin de funcionalidades o bien al functions.php de tu tema y ya lo tenemos:
El segundo ejemplo, dedicado a un comentario del mismo post menciona cómo poner una fotografía de la galería de medios dentro de un hook en la página de producto. Lo primero sería ir a la sección de medios de nuestro WordPress y copiar la url.
La zona va a ser después de las pestañas del producto y como ejemplo de fotografía voy a poner el logo de la tienda virtual. Por lo que usaremos el siguiente código:
add_action( 'woocommerce_after_single_product', 'woocommerce_anadir_antes_de_pestanas', 30 );
function woocommerce_anadir_antes_de_pestanas() {
echo '
'; // Cambia la url del medio por la que quieras
}
'; // Cambia la url del medio por la que quieras
}Quedando el siguiente resultado:
Sería igual con todas las ubicaciones, en algunos de los hooks he dejado contraído ejemplos de add action.
También puedes ver todos estos campos desde el plugin de Woo Visual Hook Guide que se encuentra en el repositorio de WordPress. Aunque esté 3 años sin actualizarse funciona perfectamente, ya que es un plugin que no necesita actualizaciones.
También puedes quitar algunas funcionalidades de la imagen de producto como el Zoom o Carrusel, lo explico aquí.
Recuerda que somos consultores, asesores y desarrolladores de comercios electrónicos y también otras actividades relacionadas con el área de administración y desarrollo de negocios.
No olvides dejar tus dudas y consultas en los comentarios!.
