Guía de Ganchos en la Ficha de Producto de Woocommerce

LucusHost, el mejor hosting

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.

He hecho este post ya que, muchas de las tiendas online que suelo realizar, hago personalizaciones en la ficha de producto para mostrar lo que suelo decir en estos artículos para aumentar la conversión. Muchas veces me comentan cómo se 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

woocommerce_before_single_product
add_action( 'woocommerce_before_single_product', 'wc_print_notices', 10 );
woocommerce_before_single_product_summary
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 ); 
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
hooks ficha de producto woocommerce
woocommerce_single_product_summary
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

Título del producto

Precio(€)

Descripción corta

woocommerce_before_add_to_cart_form

woocommerce_before_variations_form

Sección de elegir variación si el producto fuese variable

woocommerce_before_add_to_cart_button
woocommerce_before_single_variation
woocommerce_single_variation
hooks visual guide en español
woocommerce_after_single_variation
woocommerce_after_add_to_cart_button
woocommerce_after_variations_form

woocommerce_after_add_to_cart_form

woocommerce_product_meta_start

SKU: 000000001

Categorías: Guías, Woocommerce

woocommerce_product_meta_end

woocommerce_share

woocommerce_after_single_product_summary

guia de action hooks woocommerce

woocommerce_after_single_product

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 podéis ver aquí:

add_action( 'woocommerce_after_single_product_summary', 'woocommerce_anadir_antes_de_pestanas', 30 );

function woocommerce_anadir_antes_de_pestanas() {
echo '<div class="wccc-content-block wccc-content-block-6630">
			<div class="font80"><i class="fa fa-truck"></i> Envío Gratuíto<i></i></div>
<div class="font80"><i class="fa fa-lock" aria-hidden="true"></i> Pago 100% Seguro</div>
<div class="font80"><i class="fa fa-refresh" aria-hidden="true"></i> Devoluciones en 15 días</div>
<div class="font80"><i class="fa fa-share-square-o" aria-hidden="true"></i> Producto de exportación</div>
	</div>'; // Cambia las ventajas como quieras entre los <div>
}

Añades esto a tu plugin de funcionalidades o bien al functions.php de tu tema y ya lo tenemos:

ejemplo de anadir hooks woocommerce

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 '<img src="https://kokohai.com/wp-content/uploads/2020/02/logo-kokohai-tienda-de-merchandising-de-anime-y-maga-e1584570981420.png">'; // Cambia la url del medio por la que quieras
}

Quedando el siguiente resultado:

hooks woocommerce producto
Demostración ejemplo dos

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 imágen de producto como el Zoom o Carrusel, lo explico aquí.

Recuerda que soy consultor de comercio electrónico y si quieres tener una tienda online totalmente personalizada te dejo mi servicio de desarrollo de tiendas online ¿Te gustaría que pusiese otro ejemplo con alguna función que necesites? Déjamela en comentarios!

¡Haz clic para puntuar esta entrada!
(Votos: 8 Promedio: 4.5)
mailerlite diegol

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Curso de WooCommerce

También puedes realizar una donacion para seguir apoyando la salida de nuevos tutoriales y actualizaciones

mailerlite diegol

Reader Interactions

comentarios

  1. Maria says

    Hola, muchas gracias por el post y la ayuda, es lo que estaba buscando, pero además en otro hook necesito poner una imagen de la biblioteca de medios.. y no me sale.. ¿me podrias ayudar en ese tema?
    Gracias..

  2. Jahaziel says

    Excelente articulo… Me ayudo mucho pero me podrías ayudar es que necesito colocar una tabla antes de las pestañas y estoy utilizando «woocommerce_after_single_product_summary» pero me la esta poniendo despues de estas, sabras porque?
    Gracias.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *