Hooks para Woocommerce

En esta publicación, analizaré algunos de los diferentes métodos que puede usar para personalizar las plantillas de WooCommerce. También mostraré ejemplos de cómo puedes crear tus propias funciones PHP personalizadas para trabajar con los hooks ‘ganchos’ de WooCommerce.

Al instalar y activar el plugin de WooCommerce, este viene con una serie de plantillas, que incluyen: un archivo de la tienda, un producto único, una caja, un carrito y las páginas del área de mi cuenta.

Estas plantillas predeterminadas se ven bastante bien, pero es inevitable que se quieran cambiar algunos de los diseños o agregar alguna funcionalidad adicional. Si eres nuevo en WooCommerce, verás que personalizar estas plantillas no es tan sencillo como actualizar los archivos de plantilla normales de WordPress.

El uso de hooks requiere añadir código al archivo functions.php pero no te alarmes. Este plugin code snippet te será de gran utilidad y evitará la necesidad de tocar cualquier archivo de tu instalación.

Debajo tienes un pequeño video explicativo de cómo funciona y un ejemplo concreto. Espero te sea de utilidad. Si deseas conocer más sobre woocommerce, accede a nuestro curso gratuito.

 

 

Uso de CSS

Muchas veces necesitarás agregar o anular código CSS predeterminado cuando trabajes en un proyecto de WooCommerce para que las plantillas se ajusten a tu marca o la de tus clientes.

A veces, este enfoque puede ser todo lo que necesita para personalizar las plantillas de WooCommerce, pero cuando se trata de agregar texto o cambiar la funcionalidad, necesitarás otras opciones.

Usar Hooks para woocommerce o ganchos

Es posible que ya estés familiarizado con el uso de hooks en WordPress. Hay dos tipos de hooks: acciones y filtros, que son funciones específicas creadas por WordPress o el desarrollador para permitir agregar contenido / funcionalidad personalizados o personalizar lo que ya está allí.

La mejor manera de explicar cómo funcionan los hooks en la práctica es mostrar algunos ejemplos de situaciones del mundo real en las que serían útiles.

1.- Personalizar el producto woocommerce poniendo un pequeño texto o mensaje en la ficha del mismo.

Con este hook, agregaremos un mensaje sobre la imagen principal en la plantilla single-product.php.

// Add our custom function function my_function_before_single_product() { echo ‘ Everything is 50% off today! ‘; } // Add the action add_action( ‘woocommerce_before_single_product’, ‘my_function_before_single_product’, 11 );

 

2.- Personalizar producto woocommerce ejemplo 2

Con este hook, agregaremos una descripción de la tienda debajo del título ‘Tienda’.

 

// Add our custom function function my_function_custom_archive_description() { $new_description = ‘ Welcome to my shop, please be generous and buy many things, thank you. ‘; return $new_description; } // Add the action add_action(‘woocommerce_archive_description’, ‘my_function_custom_archive_description’);

 

 

3.- Personalizar WooCommerce. Cambiar Oferta en imagen del producto.

 

 

// Add our custom function
function change_on_sale_badge() {
$sale_badge = ‘Reduced!‘;
return $sale_badge;
}

// Add the filter
add_filter(‘woocommerce_sale_flash’, ‘change_on_sale_badge’);

 

 

Recursos útiles

La web de hooks oficial es una gran guía para que puedas comenzar y experimentar con acciones y filtros: https://docs.woocommerce.com/wc-apidocs/hook-docs.html