• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Cómo modificar una plantilla de WooCommerce

Cómo modificar una plantilla de WooCommerce

Modificar una plantilla de Woocommerce

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

css mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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

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

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Modificar elementos en página de producto de WooCommerceModificar elementos en página de producto de WooCommerce
  • Campo de texto para escribir en productos WooCommerceCampo de texto para escribir en productos WooCommerce
  • SMTP en WordPress, configuración para envío de correosSMTP en WordPress, configuración para envío de correos
  • Autenticación con JWT en la API de WordPressAutenticación con JWT en la API de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (6 votos, promedio: 4,83 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Edovcol

    30 marzo, 2018

    Excelente, es el sitio donde me han dejado mas clara la cuestión, muchas gracias

  2. Luisa

    2 mayo, 2018

    excelente me encantó! muchas gracias!

  3. Paulo

    19 julio, 2018

    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

    • Jhon Marreros Guzmán

      19 julio, 2018

      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.

  4. Francisco Naranjo

    17 enero, 2019

    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.

    • Jhon Marreros Guzmán

      18 enero, 2019

      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/

  5. Giovanny Rubio

    21 enero, 2019

    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.

    • Jhon Marreros Guzmán

      22 enero, 2019

      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.

  6. German Lopez

    11 abril, 2019

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

    • Jhon Marreros Guzmán

      11 abril, 2019

      Hola, entiendo que quieres remover los campos de registro de usuario, revisa este artículo: https://wpbeaches.com/remove-address-fields-in-woocommerce-checkout/

  7. María Francisca

    18 agosto, 2019

    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

    • Jhon Marreros Guzmán

      20 agosto, 2019

      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;
      }
      
      • Mª Francisca

        22 agosto, 2019

        Funcionó! Muchas gracias, Jhon! MASTER!!

  8. Leandro

    13 noviembre, 2019

    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

    • Jhon Marreros Guzmán

      15 noviembre, 2019

      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.

  9. Juan Luis Castro Valdez

    10 julio, 2020

    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

    • Jhon Marreros Guzmán

      11 julio, 2020

      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/

  10. Laura

    31 julio, 2020

    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?

    • Jhon Marreros Guzmán

      3 agosto, 2020

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

  11. Brenda

    30 agosto, 2020

    Porque no puedo sobrescribir el template archive-product?? Quiero modificar la forma en la que se muestran los productos

    • Jhon Marreros Guzmán

      31 agosto, 2020

      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.

  12. gabriela barreto

    26 septiembre, 2020

    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

    • Jhon Marreros Guzmán

      27 septiembre, 2020

      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/

  13. Giovanny Gonzalez

    24 noviembre, 2020

    Hola, hay una forma de saltarse el carrito de compras y redireccionar al checkout directamente?

    • Jhon Marreros Guzmán

      26 noviembre, 2020

      Hola, veo que hay un plugin que te puede ayudar: https://wordpress.org/plugins/disable-cart-page-for-woocommerce/

  14. Dario

    1 diciembre, 2020

    Amigo, excelente tutorial, tengo una duda… hice tal cual dijiste en el metodo override… creé el directorio “woocommerce” en el tema y tengo la intención de modificar el archivo cart_totals pero una vez que lo copio, lo pego y comienzo a editarlo me doy cuenta que los cambios aplicados no hacen efecto…. porque será? siempre va a leer el archivo que se encuentra dentro de la carpeta plugins?

    • Jhon Marreros Guzmán

      3 diciembre, 2020

      Hola, asegúrate de haberlo copiado en: TUTEMA/woocommerce/cart/cart-totals.php , es decir en la carpeta cart

  15. Brian

    29 diciembre, 2020

    Buenas a todos! tengo problemas con personalizar myaccount de woocommerce. Agregue varios campos que necesitaba y modifique el template form-edit-account.php, además tuve que modificar el archivo php que recibía los datos y guardaba , alguno de los cuales eran requeridos.. Es posible seguir el procedimiento que nombras o solo sirve para modificar la visual solamente y no la lógica? Gracias!

    • Jhon Marreros Guzmán

      29 diciembre, 2020

      Hola, para agregar campos puedes hacerlos igualmente con este procedimiento, aunque lo más práctico sería usar un plugin.

  16. jesus

    11 octubre, 2021

    hola, tengo una duda, hay alguna forma de cambiar el texto que dice detalles de facturación por algún otro texto? se encuentra en finalizar compra. Gracias

    • Jhon Marreros Guzmán

      11 octubre, 2021

      Hola, puedes evaluar usar un plugin para cambiar los textos de traducción como Loco Translate, o puedes revisar: https://decodecms.com/cambiar-textos-de-traduccion-en-wordpress/

      • jesus

        16 octubre, 2021

        Muchas gracias, utilicé Loco Translate y me funcionó.

  17. Nelly

    10 enero, 2022

    Gracias, ¿sabes cómo podría cambiar el color de fondo de la página de producto?

    • Jhon Marreros Guzmán

      15 enero, 2022

      Hola, depende de la estructura de tu theme, puedes usar el inspector de código para ubicar los elementos que quieres cambiar, revisa: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/

  18. Camila

    24 enero, 2022

    Hola! Tengo una duda, estoy buscando la manera de cambiar la “direccion de facturacion” en los emails. Logre hacerlo en el checkout pero en el correo sigue figurando, como puedo modificarlo?
    Probé con copiar la carpeta de mails en mi tema hijo pero se me modifica todo y si arreglo en algun lugar, se desordena en otro. Gracias

  19. Diego

    30 enero, 2022

    Gracias por el post! He podido solucionar alguno de los varios problemas que me estaba dando una web. En mi caso un problema con un plugin de reservas. Gracias!!

  20. andri

    25 abril, 2022

    Saludos muy buena info.
    por otro lado como puedo hacer para modificar la forma en que se muestran los datos del listado de productos. por ejemplo un producto tiene en orden ( imagen, titulo, descripción, precio, botones) y yo deseo que se observe de la siguiente forma imagen, categoría, vendedor, titulo, descripción, precio, botones).

    Esto es meramente visual, la razón es que deseo hacer luego una función js que agrupre las categorias y luego los vendedores en esas categorías antes de mostrar los productos

    • Jhon Marreros Guzmán

      27 abril, 2022

      Hola, tendrás que hacerlo profundizando en el uso de hooks o si quieres más flexibilidad modificando los archivos del tema (punto 2 de este artículo).

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Subtítulo desde título de la entrada en WordPress

Excluir páginas de la búsqueda de WordPress

Configurar AMP en WordPress

Usar Firebug para modificar un theme WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados