Qué tienes que saber sobre desarrollo de temas para WooCommerce

WooCommerce es la solución más popular para crear un Ecommerce en WordPress, y hace tiempo que es la elección más popular también en toda Internet, con una implantación más del 30% de las tiendas online. Impresionantes cifras para un simple plugin de WordPress ¿no?

La realidad es que este plugin permite la creación de tiendas online con cero conocimientos de programación, lo que ha supuesto los últimos años uno de los revulsivos de WordPress, al ofrecer a autónomos y PYMEs la posibilidad de afrontar la crisis económica gracias a esta solución gratis y de código abierto.

WooCommerce y sus características principales

WooCommerce, como plataforma de código abierto, ofrece a los usuarios montones de características gratuitas y fáciles de aplicar, con una curva de aprendizaje realmente suave y fácil de abordar, ayudando a que casi cualquiera pueda crear una tienda sin gastarse una fortuna.

Enorme flexibilidad

Además de las características incluidas, WooCommerce se puede ampliar hasta el infinito, pues se ha generado un enorme ecosistema a su alrededor de plugins que amplían sus posibilidades para poder vender todo tipo de productos, desde suscripciones a descargas digitales, reservas, de todo.

Hay miles de plugins para WooCommerce que te permitirán hacer de todo, vender de todo, hacer la tienda online que gustes o necesites.

La «Comunidad»

Y, como proyecto de código abierto, tiene más de 500 contribuidores, que hacen que sea una de las aplicaciones WordPress más populares y con más futuro.

Preparado para móviles

WooCommerce está totalmente adaptado a dispositivos móviles, y se ve igual de bien en un teléfono móvil que en un ordenador de sobremesa.

Si, además, usas aplicaciones de terceros para crear aplicaciones móviles tienes lo mejor de ambos mundos.

Código seguro

WooCommerce está auditado por Sucuri, uno de los servicios de seguridad más populares, lo que garantiza que cumple las mejores prácticas de código y seguridad de WordPress.

Los temas para WooCommerce

Todo lo anterior es fantástico, genial, pero WooCommerce es mucho más, y si quieres adentrarte en la personalización de tiendas online con WooCommerce debes conocer las interioridades y principios básicos de los temas para esta plataforma.

Personalizando el CSS de WooCommerce

WooCommerce está repleto de ciertos CSS incorporados que tratan de hacerlo compatible con tantos temas como sea posible.

Casi siempre es buena idea empezar con el CSS por defecto, pero raramente se va a adaptar a la perfección al estilo de tu tema nada más instalarlo.

Básicamente, hay 2 métodos para personalizar el CSS para un tema en concreto:

  • Usar los estilos por defecto como base y anularlos
  • Desactivar los estilos predeterminados y empezar de cero.

Nota: Se añade una clase «body» de «woocommerce» a todas las páginas de WooCommerce.

Anular los estilos predeterminados

El método más rápido es anular los estilos predeterminados, y el que más probablemente se adapte a muchos usuarios.

Hay que copiar un archivo CSS de WooCommerce por defecto (ubicado en /wp-content/plugins/woocommerce/ assetsets/css/woocommerce.css).

Ahora ya puedes borrar cualquier cosa que no necesites o modificar lo que quieras, pero ten en cuenta que esta será una tarea que consumirá mucho tiempo y podría terminar con una tonelada de CSS repetidos.

Puedes utilizar el siguiente método para evitar esta tarea que consume mucho tiempo:

  1. Navega por la web web localizando los estilos que necesitas modificar.
  2. Usa las Chrome Developer Tools (o cualquier otra herramienta que prefieras) para averiguar las clases, e incluso intentar hacer las modificaciones en el navegador para asegurarte de que entiendes cómo se verá. Haz clic con el botón derecho del ratón en la pantalla y en la lista desplegable selecciona «Inspeccionar elemento».
  3. Ahora, desde las Chrome Developer Tools, copia el CSS en el archivo CSS de tu tema.
  4. Examine el CSS en las Chrome Developer Tools,  ya que puede aparecer en gris o tachado en algunos estilos prefijados de otros navegadores. Es crucial alterar estos valores para mantener la consistencia del CSS a través de numerosos navegadores que los usuarios pueden utilizar para visitar tu web.
  5. Finalmente, elimina cualquier valor que no hayas modificado en el CSS copiado. Por ejemplo, si cambiaste el ancho de algo, pero no cambiaste la altura respectiva, entonces no tienes que añadir la altura en tu archivo CSS personalizado.

Hay gente que usa otros modos de hacerlo pero, personalmente, creo que este método funciona mejor en la mayoría de los casos y minimiza el tiempo de desarrollo.

Eliminar el CSS por defecto y empezar de cero

Añade este pequeño fragmento de código al archivo functions.php de tu tema para eliminar el CSS predeterminado:

Ahora copia el archivo CSS original en tu propio archivo para tener acceso a todas las clases de WooCommerce y eliminar cualquier cosa que encuentres innecesaria.

Declara la compatibilidad con WooCommerce

Declarar la compatibilidad con WooCommerce es crucial si estás planeando vender tu tema o hacerlo público.

Si no lo declaras, tus usuarios recibirán un mensaje de error diciendo «el tema no es compatible con el plugin WooCommerce» en el escritorio de WordPress.

No obstante, es muy fácil eliminar este mensaje de error. Inserta el siguiente fragmento de código en el archivo functions.php de tu tema:

Edición de plantillas

Ahora que sabemos como editar CSS con WooCommerce, es hora de aprender a editar las plantillas de WooCommerce.

Esta plataforma de código abierto está repleta de varias plantillas HTML de portada, que puedes encontrar en /wp-content/plugins/woocommerce/templates/.

Si quieres cambiar un elemento en particular, o eliminarlo completamente, tendrás que editar la plantilla donde se encuentra ese elemento en particular.

Una vez más, para hacer cambios en la plantilla, cópiala y crea tu propio archivo y luego modifícalo.

Estos son los pasos para hacerlo:

  1. Abre la carpeta de tu tema y crea una nueva carpeta «woocommerce».
  2. Crea una copia de la plantilla desde /wp-content/plugins/woocommerce/templates/.
  3. Tras crear la copia de la plantilla, abre la carpeta «woocommerce» que has creado previamente y pega ahí la plantilla copiada.

Nota: Si la plantilla se copió desde un subdirectorio, entonces necesitarás crear la misma estructura de directorios dentro de la carpeta woocommerce.

Y es en este momento cuando ya podemos hacer cambios en nuestra nueva plantilla, y alterar su estructura o lo que necesites.

Ejemplo práctico de edición de una plantilla WooCommerce

Supón que vamos a alterar el HTML de la pantalla «Mis pedidos» de WooCommerce.

Lo primero y más importante que debes hacer es encontrar la plantilla asociada correcta. En nuestro ejemplo, la de «Mis pedidos», está dentro de la sección «Mi cuenta».

Y esta sería la ruta a seguir para localizarla: /wp-content/plugins/woocommerce/templates/myaccount/my-orders.php.

Ahora solo tienes que crear, como te he comentado antes, un directorio dentro de tu tema con el nombre «woocommerce» y, dentro del mismo, crear otra carpeta con el nombre «myaccount».

Una vez hecho esto simplemente copia el archivo my-orders.php dentro de este directorio.

En tu tema quedaría así:
/wp-content/themes/tutema/woocommerce/myaccount/my-orders.php

Cualquier cambio que hagas en este archivo a partir de ahora anulará al original.

El «loop» de WooCommerce

Si alguna vez has creado o modificado temas WordPress ya sabrás que existe una cosa llamada el «loop» de WordPress, y como no podía ser de otro modo, WooCommerce también tiene su propio «loop».

Pues bien, WooCommerce viene con su propio «loop», que te permite cambiar las páginas de WooCommerce. Por ejemplo, para cargar una barra lateral diferente para tus páginas de WooCommerce.

Esta es la incorporación más fundamental y mediante la construcción de una plantilla WooCommerce a medida, ésta se propagará automáticamente a cada página de WooCommerce, tales como archivos, categorías y productos.

Si no quieres que tu plantilla WooCommerce se vea diferente, tendrás que construir una plantilla WooCommerce a medida.

La creación de una plantilla es un proceso simple y fácil:

  1. Copia el archivo page.php de tu tema y cámbiale el nombre a woocommerce.php.
  2. Localiza el «loop» de WordPress dentro del archivo woocommerce.php, que tendrá el siguiente código:
  3. Cambia tu «loop» con el «loop» de WooCommerce:
  4. A continuación, realiza cualquier otra modificación que quieras, como modificar el diseño o cambiar de barra lateral.

Para finalizar … o no

Ahora entiendes los conceptos básicos de la integración de temas de WooCommerce y podrás integrar fácilmente tu tema compatible con WooCommerce en tu web WordPress.

Lo creas o no, los pasos explicados en este artículo cubren la mayoría de los escenarios de WooCommerce.

Si quieres una integración de temas más flexible o avanzada, el siguiente paso es aprender acerca de las diversas declaraciones de condicionales, filtros y ganchos disponibles para usar con WooCommerce. Muchos los hemos ido viendo ya, otros los iré publicando más adelante.

La base ya la tienes, ahora te toca a ti.

Si te gusta este contenido prueba tambien a suscribirte al canal en YouTube.
VALORA ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
FlojitoNo está malEstá bienMe ha servidoFantástico (3 votos, promedio: 5,00 de 5)
Cargando…

Al dejar una valoración se recopila la IP para evitar fraudes

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Pin It on Pinterest

Compartir
Ir al contenido