¿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.
Artículos Relacionados
(3 votos, promedio: 4,67 de 5)
Cargando…
Excelente, es el sitio donde me han dejado mas clara la cuestión, muchas gracias
excelente me encantó! muchas gracias!
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!.
Hola, entiendo que quieres remover los campos de registro de usuario, revisa este artículo: https://wpbeaches.com/remove-address-fields-in-woocommerce-checkout/
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.
Funcionó! Muchas gracias, Jhon! MASTER!!