Download WordPress Themes, Happy Birthday Wishes
Home | Capacitación LES | Cómo modificar una plantilla de WooCommerce

Cómo modificar una plantilla de WooCommerce

¿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.

Modificación antes y después loop plantilla WooCommerce
Ten en cuenta que, a pesar de que trataremos una modificación de links simple, los mismos métodos se pueden aplicar a cualquier tipo de modificación que necesites

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;	
}
Este código puedes agregarlo en el archivo style.css de tu child theme

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

Haciendo este proceso las modificaciones que hagas en la copia del archivo no se pierdan en cada actualización del plugin

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>
El código anterior se ha reducido para ejemplificar mejor y se pueda ver en qué parte se agregó la clase btn, estoy asumiendo que tu theme tiene una clase btn
¿Cómo encontrar el archivo a modificar?, una forma fácil es inspeccionar el código HTML generado, ubicar la clase CSS y luego realizar una búsqueda de esta clase en la carpeta de templates de WooCommerce

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.

De los hooks, para los cambios de estructura básicos usaremos generalmente los Filtros, las acciones usualmente se usan para plugins que extendienden la funcionalidad de 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
Estoy asumiendo que tu theme tiene una clase btn
Puedes agregar este código en el archivo functions.php de tu theme, de preferencia en un child theme

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

Artículo original publicado en: Logo

Sobre Ae_L V.G. MS.

Master Degree in Distance Education – Elearning | Experto en Educación Virtual | Experto en Medios Digitales | Docente | WebDesing | Tecno Pedagogo | Diseñador Instruccional…

Comentar

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

x

Check Also

WhatsApp: Cómo obtener enlace para invitar a participar en grupos

WhatsApp: Cómo obtener enlace para invitar a participar en grupos Nuevas formas de compartir Parece ...

Descarga videos de facebook sin programas

Descarga videos de facebook sin programas 100% garantizado Facebook está cada vez más comprometido en ...

Aplicaciones para ayudarte a mejorar tu escritura en redes sociales

Aplicaciones para ayudarte a mejorar tu escritura en redes sociales Algunos errores pueden pasar bajo ...

Herramientas de marketing para 2017

Seamos honestos, si no tienes presencia online a día de hoy, todavía estás viviendo en ...

Curso La Web Semántica: Herramientas para la publicación y extracción efectiva de información en la Web

La Web Semántica: Herramientas para la publicación y extracción efectiva de información en la Web ...

Cómo Saber quién te tiene agregado en WhatsApp

Ahora en WhatsApp también se puede averiguar quiénes nos tienen agregados y no están en ...

Catálogo colaborativo de herramientas TIC

Con el objetivo de facilitar el acceso a algunas herramientas de la WEB 2.0 de ...

Contenido restringido para usuarios usando shortcodes

En este artículo veremos cómo restringir parte del contenido de tus artículos, sin usar plugins, ...

APPs imprescindibles para docentes

Al pensar en todos aquellos docentes que, día a día, utilizan su smartphone o tablet ...

Plantillas de página en WordPress

¿Te gustaría variar el diseño o estructura de algunas páginas de tu sitio?, puedes evaluar usar un archivo de la jerarquía de themes, sin embargo una opción alterna es usar plantillas de página o page templates en WordPress.