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. Se deseas conocer más sobre woocommerce, accede a nuestro curso gratruito.

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.
Así se ve el producto antes de poner el hook;



// 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 );
Así se ve el producto después de poner el hook

2.- Personalizar producto woocommerce ejemplo 2

Con este hook, agregaremos una descripción de la tienda debajo del título ‘Tienda’.
Así se ve el producto antes de poner el hook



// 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’);
Así se ve el producto después de poner el hook

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

Así se ve el producto antes de poner el hook



// 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’);
Así se ve el producto después de poner el hook

Recursos útiles

Introducción a los Hooks de Woocommerce: https://docs.woocommerce.com/document/introduction-to-hooks-actions-and-filters/

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

Este articulo es el contenido original del blog de nosunelanube