Cómo modificar una plantilla de WooCommerce

[ 15 noviembre 2017 ] [ Actualizado: 4 mayo 2019 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

css mejoras

¿Tienes un theme WordPress y quieres adaptarlo para WooCommece?, o si ya tienes un theme que soporta WooCommerce ¿te gustaría hacer modificaciones?, en este artículo te explico cómo hacerlo correctamente.

Resultado Final

El método que elijas para modificar una plantilla de WooCommerce depende del tipo de modificación que deseas realizar, en este artículo veremos cómo modificar los links de añadir al carrito en el listado de productos.

1- Modificaciones de diseño con CSS

Esta es la opción más simple, puedes hacer cambios de diseño usando CSS en base a las clases que te crea WooCommerce en las diferentes páginas.

Por ejemplo, para la página de tienda, si deseas cambiar el enlace de «agregar al carrito», luego de inspeccionar el código generado y localizar la clase add_to_cart_button, puedes usar el siguiente código:

.add_to_cart_button{
	background:black;
	color:white;
	padding:10px;	
}

2- Modificaciones usando los archivos del theme

En este caso, si deseas hacer modificaciones de estructura, ( cambiar el orden de elementos, agregar nuevas clases, agregar código, etc.), puedes optar por modificar los archivos de template del plugin a través de la funcionalidad de overrides template de WooCommerce.

El overrides o sobreescritura de templates de WooCommerce consiste en ubicar el archivo que queremos modificar en la carpeta del plugin:

wp-content/plugins/woocommerce/templates/

Y luego copiar este archivo ( y su estructura de carpetas, si esta dentro de una carpeta) en los archivos del theme, bajo la carpeta WooCommerce, es decir en:

wp-content/themes/TUTHEME/woocommerce

Siguiendo nuestro ejemplo anterior, en lugar de agregar nuevos estilos CSS a la clase .add_to_cart_button, lo que puedes hacer es agregar una clase existente de tu theme WordPress, que ya tiene estilos de botón, a la estructura del enlace. Ubicamos el archivo:

/wp-content/plugins/woocommerce/templates/loop/add-to-cart.php

Y lo copiamos en:

/wp-content/themes/twentyseventeen/woocommerce/loop/add-to-cart.php

En este archivo : add-to-cart.php, veremos el código que crea el enlace y le agregaremos la clase .btn:

<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" class="btn %s">%s</a>

3- Modificaciones usando los hooks

Una opción final es usar los hooks, a través los hooks puedes hacer cambios de estructura, similar a como lo haces en WordPress, la lista completa de hooks para WooCommerce la puedes encontrar en la referencia de filtros y acciones para WooCommerce.

 
Siguiendo el ejemplo de agregar una clase .btn, esta vez puedes probar hacerlo a través de un hook de filtro, puedes usar el siguiente código

add_filter( 'woocommerce_loop_add_to_cart_link', 'agregar_clase_link_carrito');

function agregar_clase_link_carrito( $cad ) {
	$cad = str_replace('class="', 'class="btn ', $cad);
	return $cad;
};

En el código anterior:

• Usamos el filtro woocommerce_loop_add_to_cart_link, este filtro lo habíamos localizado en el archivo del template
• Hacemos referencia a la función agregar_clase_link_carrito, la cual por defecto acepta un parámetro
• El parámetro $cad tiene el HTML que se imprimirá para el enlace, buscamos los caracteres de la clase y la reemplazamos agregando la clase btn
• Finalmente concatenamos y retornamos el texto modificado

 
¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.

Valora este artículo : (3 votos, promedio: 4,67 de 5)

Cargando…