¿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
(4 votos, promedio: 4,75 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!!
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, revisa los hooks que tienes en la página de carrito en el siguiente enlace, podría darte una idea de qué modificar: https://www.businessbloomer.com/woocommerce-visual-hook-guide-cart-page/
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.
Porque no puedo sobrescribir el template archive-product?? Quiero modificar la forma en la que se muestran los productos
Hola, en tu caso si quieres cambiar el diseño de los productos del listado, podrías revisar el archivo: content-product.php , sin embargo en este archivo verás básicamente hooks, es decir puedes realizar cambios a través de los hooks y no necesariamente por sobreescritura de archivos.
Hola tengo una consulta, tengo un tema comercial llamado payna este en la pagina de tienda coloca el boton del carrito dentro de la foto de los producto, hace un efecto hover sobre la imagen como puedo hacer para sacar el boton y colocarlo debajo de nombre del producto
Hola, posiblemente tengas que tocar CSS y también archivos .php, consulta primero con los desarrolladores de tu theme ya que entiendo que tienes soporte, si no lo solucionan puedes contactarme en: https://decodecms.com/contacto/