En este tutorial vamos a ver cómo modificar una plantilla en WooCommerce de forma que no perdamos los cambios al actualizar el plugin o el tema.
Modificar WooCommerce
En muchas ocasiones nos encontramos con que queremos modificar o añadir funcionalidades a un plugin, por ejemplo, agregar alguna nueva que no esté contemplada en el mismo.
En dichos casos, podríamos usar extensiones de los propios plugins, que son plugins en sí mismas que precisamente hacen lo que buscamos, añadir o modificar una funcionalidad concreta. Otras veces lo que necesitamos es realizar cambios en algunas plantillas del plugin, o incluso modificar el aspecto del mismo a través de las hojas de estilo.
En este tutorial veremos la segunda opción, cómo realizar cambios en cualquiera de las plantillas de un plugin, concretamente de WooCommerce, de forma que no los perdamos cuando actualicemos.
Si queréis aprender más sobre este plugin, echadle un vistazo al curso intermedio de WooCommerce y el curso avanzado de WooCommerce. Dicho todo esto, ¡comencemos!.
Templates de WooCommerce
Antes de nada, aclarar que aquí hablamos de templates / plantillas pero no nos referimos a los temas de WordPress, sino a los archivos contenidos en una carpeta que incluyen las páginas del frontend.
Esta carpeta se llama "templates" y se localiza en el interior del directorio del plugin WooCommerce. Es decir, en la ruta: "\wp-content\plugins\woocommerce\templates".
Cabe destacar que no todos los plugins disponen de la carpeta "templates", esto va a depender de cada plugin. WooCommerce, sin embargo, sí dispone de ella. Y precisamente esto hace que resulte fácil modificarlo sin perder los cambios en una actualización. Para ello tendremos que seguir unos sencillos pasos.
Cómo sobrescribir templates de WooCommerce
Pues bien, vamos a ver cómo podemos sobrescribir las plantillas o templates de WooCommerce correctamente de forma que se mantengan las modificaciones que hagamos aunque el tema o el plugin se actualicen.
Lo primero que haremos será acceder a la instalación de WordPress. Podemos hacerlo de varias formas, a través del administrador de archivos del hosting, mediante un programa FTP como Filezilla o navegando directamente por las carpetas del sistema si estamos trabajando en local.
Una vez dentro, nos dirigiremos al directorio "themes". Para llevar a cabo el proceso, vamos a necesitar un child theme del tema que tengamos activado en WordPress. En el ejemplo disponemos de un child theme de Storefront.
Child theme de Storefront
El siguiente paso será crear una carpeta denominada "woocommerce" dentro de este tema hijo. Si ya estamos trabajando con un child theme no hará falta, podemos usar el que ya tenemos activo.
Crear directorio "woocommerce" donde sobrescribiremos las páginas
Ahora vamos a añadir cualquiera de las plantillas de WooCommerce que queramos modificar a esta nueva carpeta, la cual recordemos se encuentra en una ruta similar a ésta "\wp-content\themes\storefront-child\woocommerce".
Recordad que en vuestro caso tendréis que sustituir "storefront-child" por el nombre de la carpeta que contenga vuestro child theme.
A continuación, nos dirigiremos al directorio del plugin, y accederemos a la carpeta "templates". Aquí encontraremos un listado de archivos que contienen plantillas de páginas del frontend y también plantillas de los emails de la tienda.
Carpeta "templates" en woocommerce
Para sobrescribir de forma segura cualquiera de estos archivos, y posteriormente realizar las modificaciones que necesitemos en los mismos, simplemente debemos copiarlos de aquí "\wp-content\plugins\woocommerce\templates" y pegarlos en el directorio "woocommerce" del tema hijo, "\wp-content\themes\storefront-child\woocommerce".
Así que por ejemplo, si quisiéramos modificar el archivo "content-single-product.php" de WooCommerce, lo que tendríamos que hacer es copiarlo de la carpeta "\wp-content\plugins\woocommerce\templates", y pegarlo en el directorio "woocommerce", "\wp-content\themes\storefront-child\woocommerce".
Una vez lo tengamos en este último, podemos personalizarlo como necesitemos. Las actualizaciones no nos van a afectar, y WooCommerce lo podrá cargar de forma preferente al encontrarse dentro de dicho directorio.
Veamos otro ejemplo más. Supongamos que queremos modificar la página "mi cuenta", en la que aparecen los datos del usuario. Como vemos, dentro de templates hay otro directorio, "myaccount".
Directorio myaccount dentro del plugin WooCommerce
En este caso lo que tenemos que hacer es crear este mismo directorio dentro de "\wp-content\themes\storefront-child\woocommerce" y pegar ahí "my-account.php", de forma que podamos realizar los cambios en esta copia de la página.
Copiar "my-account" en carpeta "woocommerce\myaccount" del child theme
Como vemos, no debemos llevar a cabo ninguna modificación directamente en el plugin, sino en los archivos del directorio "\wp-content\themes\child_theme\woocommerce". De otra forma corremos el riesgo de perder los cambios en cualquier actualización.
Por último comentar que, si trabajamos con themes personalizados (ahora sí nos referimos a los temas de WordPress), y queremos seguir este método, tendremos que asegurarnos de añadir la compatibilidad con WooCommerce al tema.
¡Y esto es todo! Ya podéis personalizar la estructura de cualquier página del frontend de WooCommerce o los emails sin miedo a perderlo todo en una actualización :).
Resumen y conclusión
Podemos modificar cualquier página del frontend de WooCommerce de varias formas. Lo adecuado si no queremos perder los cambios en una actualización del plugin, es realizar una copia de las páginas que queramos modificar.
Esta copia debemos ubicarla en un directorio "woocommerce" que vamos a crear dentro del child theme que tengamos activo. A continuación realizaremos las modificaciones necesarias en los archivos de esta última carpeta.
Y hasta aquí el tutorial, esperamos que os resulte útil. Como siempre, os recomendamos suscribiros a los cursos de boluda.com. Esto os dará acceso inmediato al curso de Storefront para crear un child theme, al curso intermedio de WooCommerce, al curso avanzado de WooCommerce, además de a muchos otros. Hay más de 9330 a vuestra disposición :)