X
Jhon Marreros Guzmán

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.

 

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
Un ejemplo adicional de este tipo de modificación lo puedes encontrar en el artículo: Cómo personalizar la plantilla para una categoría específica en Woocommerce
No olvides declarar el soporte para WooCommerce en tu theme, puedes agregar este código de soporte en el functions.php de tu theme o child-theme.

 

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

 

Artículos Relacionados

Categorías: Plugins
Etiquetas: cssmejoraswoocommerce

Ver comentarios (40)

  • Primero que todo gracias!, tengo una duda, actualmente el woocommerce muestra el producto solo, en una plantilla de noticias, como hago para que no me la muestre en ella, si no en una pagina que pueda modificar sin afectar las noticias?
    Gracias de nuevo

    • Hola, tendría que ver al menos la url del sitio en donde aparece lo que comentas, mejor escríbeme a través del formulario de contacto. Saludos.

  • Hola que tal,
    He intentado hacer override al archivo:
    wc-template-hooks.php
    en la siguiente carpeta:
    mi_dominio\wp-content\plugins\woocommerce\includes para pasarla a
    mi_dominio\wp-content\themes\storefront\woocommerce\includes

    Pero no consigo hacer funcionar.
    Como ven uso el tema storefront.

    Que estoy haciendo mal.

    Muchas gracias por cualquier aclaracion.

    Un saludo.

    Francisco Naranjo.

    • Hola, los overrides sólo sirven para los archivos de vista, es decir para los archivos de la carpeta template: wp-content/plugins/woocommerce/templates/

  • Saludos. Muchas gracias por tu aporte....
    ¿Tu me podrías decir que hacer en este caso?

    Tu tema tiene un archivo woocommerce.php, no podrás sobreescribir la plantilla personalizada woocommerce/archive-product.php ya que woocommerce.php tiene prioridad sobre archive-product.php. Esto es intencionado para prevenir problemas de visualización.

    • Hola teóricamente debería solo sobreescribir los archivo de la carpeta template, consulta con los desarrolladores del theme es posible que tengan algo particular para usar ese archivo.

  • Hola.
    Necesito una ayuda. Quiero quitar campos en la página "finalizar compra". Ya que no necesito demasiados, son productos descargables, virtuales.. Se paga con Paypal, por lo que excesivos campos de relleno resulta engorroso para el cliente. Me refiero a lo que sería "Facturación".

    ¿Cómo puedo, si es que hay alguna forma, quitar varios de esos campos de relleno y dejar por ejemplo, Nombre y Mail.?

    Muchas gracias, está buenísimo el blog!.

  • Gracias Master, pero tengo una duda, cómo puedo quitar en la ficha del producto la dirección de ubicación que aparece en la esquina superior izquierda? en mi página es inicio/sabores/betasal https://cormo.cl/product/betasal/ es decir muestra su categoría antes del producto y no puedo editar la página de categorias, me aparece el menú del blog y se ve feo https://cormo.cl/categoria-producto/sabores/ si me pudieras ayudar con eso, tb te lo agradecería.
    Saludos desde Chile

    • Hola, creo que lo más práctico sería que lo ocultes por CSS, puedes probar con el siguiente código, puedes agregarlo al final del archivo style.css de tu child-theme.

      body.single-product .woocommerce-breadcrumb{
	display:none;
}

  • Hola, una consulta. Yo quiero modificar la 1er pagina donde muestra el listado de productos. No la ampliación de producto. Se entiende? no puedo encontrar cual es el archivos.
    El archivo single-product.php hace referencia a la ampliacion luego de hacer click en el titulo de un listado.
    Pero yo necesito modificar la 1er pagina, donde se listan todos.
    Tu sabes cual es? Gracias por tiempo! saludos

    • Hola, posiblemente te refieras a la página de tienda, esta página debería tener asignado una página de WordPress en donde se inserta el shotcode de WooCommerce, revisa la página podrías agregar contenido directamente.

  • Hola muy bien todo me agradaría modificar la página del carrito de compras de woocommerce y aunque encontré la clase del contenedor no he podido hacer que aparezca en 2 columnas la página , si lo logré en la página finalizar compra pero no en la del carrito, si me puedes decir como hacer ya sea con php o desde el personalizador de css me dices el código o su estructura

  • Hola! Tengo un problema con los filtros de productos(widgets), pero no sé si es problema del Woocommerce o del theme. Puntualmente, Necesito que los filtros se muestren al lado de los productos y no en la parte de abajo, habrá una manera de modificarlo?

    • Hola, posiblemente sea un problema de tu theme, prueba cambiando de theme y verifica.

Deja un comentario