DecodeCMS

Tu WordPress a otro Nivel ...

Inicio / Tutoriales / Plugins / Personalizar plantilla para una categoría específica en Woocommerce

Personalizar plantilla para una categoría específica en Woocommerce

Personalizar plantilla para una categoría específica en Woocommerce

[ ] [ Autor: ][ Plugins - Intermedio] [ ]

En un artículo anterior habíamos visto cómo hacer modificaciones a una plantilla de Woocommerce, en este artículo aprenderás cómo usar los archivos del theme para personalizar la plantilla de una categoría específica en Woocommerce.

 

Generalidades

Los cambios de estructura HTML para una categoría de producto se realizan a través de las modificación de los archivos del theme, sobrescribiendo los archivos de plantilla de Woocommerce.

 

1- Sobrescribiendo archivos

Primero tienes que ubicar el siguiente archivo:

wp-content/plugins/woocommerce/templates/taxonomy-product_cat.php

Debes copiar este archivo como parte de los archivos de tu theme ubicándolo en la siguiente ruta:

wp-content/themes/TUTHEME/woocommerce/taxonomy-product_cat.php

En caso la carpeta woocommerce no exista tienes que crearla
Si este archivo ya existe en tu theme, realiza una copia de este archivo existente y sigue el paso 2.

 

2- Especificando categoría

Con el paso anterior simplemente hemos copiado un archivo que al hacerle los cambios tendrá efecto en todas las categorías, para que sólo tenga efecto en una categoría específica debes concatenarle un guion y el “slug” como parte del nombre.

wp-content/themes/TUTHEME/woocommerce/taxonomy-product_cat-XXX.php

Por ejemplo para una categoría llamada Camisetas, nuestro archivo quedaría: taxonomy-product_cat-camisetas.php

Con este nombre de archivo, todas las modificaciones que hagas en código tendrán efecto sólo en la categoría llamada Camisetas

 

3- Revisa las referencias

Si revisas el archivo taxonomy-product_cat-XXX.php, y encuentras referencias a otros archivos, tienes que también copiar esos archivos y renombrarlos, por ejemplo en el caso de Woocommerce 3.x, el código que encontrarás es el siguiente :


wc_get_template( 'archive-product.php' );

Por lo tanto tienes que copiar también el archivo archive-product.php a los archivos del theme y luego renombrarlo.

Te recomiendo renombrarlo igualmente con el slug de la categoría, por ejemplo quedaría: archive-product-camisetas.php
Las modificaciones se harán en este caso en el archivo: archive-product-camisetas.php

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

 

Artículos Relacionados

Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Paulo

    Buenas tardes, gracias por tomarte el tiempo para realizar el video, mi deseo es poder modificar la plantilla de todas la categorias, por lo que cree la carpeta woocommerce, con los archivos que indicas, pero sin modificar el nombre (para que funcione en todas las categorias) pero no me lo reconoce… tuve el mismo inconveniente con la página de Tienda, en ella fue necesario añadir al funtions.php la siguiente linea

    add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
  add_theme_support( 'woocommerce' );
}

    Será necesario realizar algo similar para que me reconozca las nuevas plantillas?
    muchas gracias por tu ayuda

    • Jhon Marreros Guzmán

      Hola, de manera general si ya agregaste soporte podrías entonces sobrescribir los archivos de vista de WooCommerce en tu theme. Has probado con una categoría específica?, si sigues con problemas escríbeme por el formulario de contacto dándome más detalles.

  2. Fernando

    He realizado, paso a pso, en mi theme-Storefront- los cambios para una categoría, pero no se que hacer para que se visualice.He repasado los archivos y están en la carpeta:storefront->woocommerce. También he puesto el el slug de la categoría en los dos archivos: taxonomia……-cursos-educacion-gratis.php y archivos-cursos-educacion-gratis.php.
    Me puedes ayudar. Si no te molesta, por favor, mandame también la contestación a mi correo.Gracias

  3. Mika

    buenas , estoy con el mismo problema que Fernando . donde no se visualiza ninguna cambio, y seguí los pasos correctamente..
    si me pudieses ayudar te estaría muy agradecidx. .
    saludos,

    • Jhon Marreros Guzmán

      Hola, has probado con otros nombres de categoría en el archivo?, podrías probar directamente en el theme en caso tengas un child-theme, si sigues con problemas envíame mejor un mensaje a través del formulario de contacto.

  4. Federico

    Hola Jhon, tampoco podía visualizar los cambios hasta que eliminé el archivo “woocommerce.php” en la carpeta de mi theme y ahí me tomó los cambios. Creo que ese es el problema que tienen en los otros comentarios. Saludos!

    • Jhon Marreros Guzmán

      Hola, gracias por el aporte, al parecer un theme podría tener ese archivo que cambia el comportamiento del override de WooCommerce. Saludos.

  5. Antonio

    Hola Jhon! de los mejores artículos que he leído, busco navego bastante , pregunto a pocos y tú estas tocando justo un tema que me interesa…

    ¿Que quiero hacer en Woocommerce? Tengo cerca de 15 categorias con algo mas de 30 productos cada categoria y bueno las he dispuesto de 3 en 3 y descender con el scroll para ver solamente RECUADROS DE IMAGENES notamos que el cliente se aburre, asi que me imagino que puedo meter una caja de texto digamos cada 9 imagenes…. ¿Como se llama lo que quiero hacer y como lo harìa…. ?

    • Jhon Marreros Guzmán

      Hola, tal vez si envías algún ejemplo que hayas visto podrías ejemplificar mejor, ya que como lo planteas, meter texto entre categorías o productos parece ser algo muy particular. Si te va bien puedes enviarme detalle de lo que quieres hacer a través del formulario de contacto. https://decodecms.com/contacto/ . Saludos.

  6. Luis Victores

    Hola tengo un problema con la presentacion de las categorías de productos. El nombre de la categoría aparece dentro de la imagen en una caja. Como puedo modificarlo para que el nombre quede debajo de la imagen

    • Jhon Marreros Guzmán

      Hola
      Tienes que ubicar primero el archivo que te crea esa estructura, revisa primero si tienes alguna sobreescritura para las categorías de WooCommerce a nivel de tu theme, sino tendría que buscar en los archivos de WooCommerce. También es posible que sea sólo algo de diseño y que lo puedas corregir por CSS. Si sigues con problemas envíame detalles a través del formulario de contacto.

  7. Carlos

    Hola.

    excelente el articulo, Muchas Gracias.

    Una duda, donde puedo modificar el background del titulo para cada categoria? No un banner como explicas en el video, si no que en el titulo por defecto que aparece poner un background personalizado.

    Gracias Nuevamente.

  8. Aitor Arina

    Buenas tardes,

    Respecto al artículo sobre el cual escribes, he realizado los mismos pasos y no veo el cambio que inserto. No logro modificar la página de categorías. En mi theme-child he creado la carpeta…
    wocommerce -> templates -> taxonomy-product_cat-aceites.php. En la misma altura he creado archive-product-aceites.php. No logro ningún cambio. No lo que se pi nte tampoco lo que escribo o guardo en axonomy-product_cat-aceites.php. Qué puedo hacer?

    Muchas gracias!

    • Jhon Marreros Guzmán

      Hola, en tu child-theme no debe existir la carpeta “templates”, revisa el punto 1 de este artículo, los archivos sobreescritos deben estar directamente bajo la carpeta woocommerce

  9. Juan Mty

    Hola! estoy buscando algo similar, pero no encuentro nada relacionado aún, el tema es el siguiente tenemos un Woo donde en la descripción corta tendremos datos que son variables en corto tiempo.
    Ejemplo, una radio (producto1) viene con descripción corta:
    – Versión: Android 9 , OctaCore, 64 Bits, 2GB DDR3 RAM, 32GB Flash ROM
    + Apple Car Play integrado. Pantalla 2.5D IPS.

    Bien, pues productos con esa descripción puedo tener 100, (todos con android 9 y 2gb ram.
    El problema viene aquí,
    En 2 meses, estos productos todos deben pasar a la nueva Versión de Android 10 y 4gb RAM, y me toca ir uno a uno o en la BD cambiando este número quedan así:

    – Versión: Android 10 , OctaCore, 64 Bits, 4GB DDR3 RAM, 32GB Flash ROM
    + Apple Car Play integrado. Pantalla 2.5D IPS.

    Se que en la BD de WordPress puedo ir editando, pero cómo puedo hacer esto masivamente, (aparte del operador IN en SQL) de forma que todos los productos de una categoría me modifiquen ese campo al instante.

    Relacionar los X Productos de una categoría para EDITARLOS masivamente,

    Muchas gracias, sigo revisando el blog esta muy interesante muchos códigos me vienen súper para proyectos.

    • Jhon Marreros Guzmán

      Hola, de manera general, puedes evaluar usar plugins de importación/exportación de productos en WooCommerce, puedes trabajar tus actualizaciones en un excel y luego exportar el archivo en .csv para importar.
      Lógicamente tienes que tener el ID o el campo SKU lleno en el archivo para que de esta manera actualice tus cambios en lugar de crear nuevos productos.
      Saludos.

  10. Ariel

    Hola necesito colocar un theme code para colocar una imagen en una categoria en wordpress usando customfield, quisiera saber si me pueden ayudar para saber en qué parte del archivo category.php debo hacerlo. Saludos.

    • Jhon Marreros Guzmán

      Hola, no tengo del todo claro a qué te refieres, sin embargo parece ser algo personalizado y no puedo darte una respuesta genérica, si aún tienes dudas detalla un poco más tu problema a través del formulario de contacto: https://decodecms.com/contacto/
      Saludos.

  11. Daniel

    Estimado… Tengo una tienda en línea, la cual se separa en dos categorías grandes con distintas subcategorías y necesito que al entrar por una categoría, muestre el menú con sus subcategorías y al entrar por la otra, muestre con las subcategorías de esta y que el menú se mantenga hasta el final del proceso o, por lo menos hasta antes de entrar al carro de compras. ¿Habrá alguna forma de poder hacer eso? De antemano, gracias.

  12. Yulexis

    Hola, necesito traer de la base de datos solo un numero especifico de categorias Woocommerce y no he encontrado como hacerlo, si me pueden dar una manera de hacerlo se lo agradecería.

  13. Diego Mora

    Hola, necesito cambiar el tamaño de titulo de las categorias de woocommerce, pero no logro llegar, me ayudarias?

    • Jhon Marreros Guzmán

      Hola, posiblemente tengas que usar CSS, depende de las clases y la estructura que genera tu theme, envía la url exacta para ver lo que comentas.

        • Jhon Marreros Guzmán

          Hola, por alguna modificación que hiciste tienes este código en tu archivo style.css de tu theme, este código te causa el problema, elimínalo, si necesitas cambiar el tamaño de otra parte de tu sitio, se más específico con el código para evitar estos problemas

          .woocommerce .page-title {
  font-size:10px !important;
}

  14. Diego Mora

    No puedo ubicar donde esta .. es en style.css en apariencias – editor de temas – style.css ?? no puedo ubicarlo

  15. Josue

    hola gracias por todos tus aportes, llevo rato buscando como resolver estos temas en la pagina productos por categorías:
    – se muestran solo dos columnas con los productos a pesar de que en woocommerce he especificado 3 columnas, en la pagina tienda sale Ok, pero en la de las categorías salen 2.
    – antes que salgan los productos necesito agregar “ordenado por” y “mostrando x productos…” tal y como sale en la pagina Tienda
    -por ultimo tengo una sidebar con 2 widgets uno que muestra un menú y otro para filtrar los productos por precio, me sucede que este ultimo (filtro) solo aparece en la pagina Tienda y no en el de las categorias, en la cual solamente me aparece el menu.
    Agradeceria mucho tu ayuda, pues llevo días buscando una solución.
    Mil gracias por adelantado

    • Jhon Marreros Guzmán

      Hola, tal vez la página de categoría tenga otro comportamiento debido al theme que usas, podrías probar cambiando temporalmente de theme y verificar.

  16. inma palomino

    Buenos días!, tengo un problema con mi web, Cuando un cliente esta logado todas las partes de la web se ven perfectamente, pero si no estas logado, tres de las pestañas de productos se ven mal ( se ven como una fase anterior de finalizar la web fue el momento en que abrí la pagina al publico para que la viera una compañera, luego volví a cerrarla y seguí trabajando) y ahora al volverla a abrir esas paginas se han quedado sin actualizar pero solo cuando no estas logado. No se cual puede ser el fallo y por que. Podéis ayudarme?

    • Jhon Marreros Guzmán

      Hola, usas algún plugin de optimización?, podrías probar desactivando plugins de cache o similares.
      Lo otro es que se haya quedado en la cache del navegador, prueba en otro navegador o de modo incógnito y verifica si te sucede lo mismo.

      • Inma

        Muchas gracias, era uno de los plugins de optimización, lo desactive y todo perfecto. Gracias de nuevo

  17. Juan

    Buenas Jhon, gran aporte, de echo lo usado para personalizar todas las categorías de mi Woocommerce. Solo tengo un problema, lo desarrolle en local y funciona a la perfección la personalización, pero al subirlo online ha dejado de funcionar. Está el woocemmerce por defecto. ¿Me podrías ayudar? no encuentro solución por ningún lado, he revisado todo lo que se comenta pero nada 🙁 Mil gracias de antemano

    • Jhon Marreros Guzmán

      Hola, tienes una copia exacta del sitio?, si es así si que debería funcionar, te sale algún error?, si te aparece errores de PHP revisa que tengas la misma versión de PHP.

  18. Omar

    Para los que no les funciono tienen que, a parte de renombrar los archivos como dice el post, hay el editar el archivo taxonomy, renombrar ese archivo con su slug. Espero les sirva. Saludos.
    wc_get_template( ‘archive-product-XXXX.php’ );

  19. Matias

    Hola! excelente tu explicación, quisiera saber si puedo insertar como lo haces en el video en ves de una imagen un Slider con ShortCode… como tendría que hacerlo? para que aparezca en todas las categorias

  20. Alejandro

    Hola, de primera mano gracias por este artículo.
    Mi duda es la siguiente: tengo una web donde la estructura es la siguiente:
    Categoria – subcategoria – subcategoria 2 (donde muestro los productos)
    Que pasa, que cuando le meto contenido a la web, los productos de la subcategoria 2 (y en cualquier otra categoria) los productos se me van para abajo y lo que quiero es escribir algo de texto, luego mostrar los productos, y despues seguir con algo mas de texto. ¿Cómo podria hacerlo? Muchas gracias.

    • Jhon Marreros Guzmán

      Hola
      Si quieres añadir texto, prueba agregar texto en el campo de descripción de la categoría, debería mostrarse en la página de categoría. Saludos.

  21. Cynthia Pino

    Hola Jhon! Realmente muy agradecida de toda la ayuda que realizas. Tengo un problema con la pagina de categorías de productos en el móvil, la cual muestra dos columnas de productos con su foto y nombre pero no muestra el precio de los productos, en el modo escritorio y tablet lo muestra correctamente. Como lo podría hacer para que se muestre el precio?, te agradezco tu ayuda. Muchas Gracias

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

*