Añadir códigos snippet en WooCommerce de forma correcta

En muchas de las entradas publicadas en este blog he explicado cómo añadir funcionalidades extra o personalizar el comportamiento de algunas opciones de WooCommerce usando códigos snippet.

Para el que aún no esté muy familiarizado con este concepto, los códigos snippet usados en WordPress en general y WooCommerce en particular, no son más que pequeños fragmentos de código que normalmente se añaden al fichero functions.php de la plantilla que se esté usando y que sirven para modificar el comportamiento o el aspecto de tu sitio web o tienda online y así evitar sobrecargar el sitio con demasiados plugins.

En este artículo te voy a dar unas pautas generales sobre buenas prácticas para añadir códigos snippet en WooCommerce de forma segura para que permanezcan intactos incluso después de instalar actualizaciones.

Cómo afectan los códigos snippet a tu tienda WooCommerce.

Cuando trabajas con códigos snippet para modificar algún aspecto de tu tienda WooCommerce, puedes encontrarte con dos tipos de códigos diferentes. Por un lado están los fragmentos de código que afectan a la apariencia o el diseño de tu tienda online y por otro lado se encuentran los códigos snippet que afectan al funcionamiento interno de WooCommerce.

Hay que saber diferenciar ambos casos, porque dependiendo de qué se trate, deberás insertarlos de una forma u otra.

Entonces, te preguntarás; ¿y cómo sé a qué tipo de código pertenece cada uno? La mejor forma de entenderlo es con un ejemplo.

Digamos que vas a usar un código que deshabilita la opción de gastos de envío gratuitos para una determinada región. Yo ya sé que es un código que sólo afecta al funcionamiento interno de WooCommerce y que por tanto, pertenece al segundo tipo de códigos snippet.

Pero si tú tienes alguna duda, simplemente hazte la siguiente pregunta; ¿el código afecta a la forma en que se muestran los botones, productos, catálogo, menús o el diseño de mi tienda?

Si la respuesta es NO, entonces ya sabes que ese código pertenece al segundo tipo. Y por tanto el código snippet debe mantenerse activo aunque cambies de plantilla en un futuro.

El caso contrario sería por ejemplo, un código snippet que modificase el número de productos relacionados que se muestran en la página de producto de WooCommerce. Este código si afecta directamente al diseño de la plantilla que estás usando, puesto que se van a mostrar más o menos fotos de productos relacionados de los que la plantilla trae por defecto. Este cambio no debería aplicarse a otras plantillas, ya que cada diseño de plantilla WooCommerce es diferente y es muy probable que manejen el número de productos relacionados de forma diferente.

La forma correcta de insertar un código snippet en tu tienda WooCommerce.

Como ya he dicho antes, hay dos formas diferentes de insertar los códigos snippet dependiendo del tipo que sean.

Si el código sólo afecta el comportamiento de WooCommerce, pero NO al diseño de tu tienda. Y además, quieres conservar los cambios aunque cambies de plantilla en un futuro, entonces te recomiendo insertar siempre los códigos usando el plugin Code Snippets. Este plugin guarda los códigos en la base de datos asegurando que siempre se mantengan intactos aunque actualices o cambies de plantilla. Además, te permite asignar un título y una descripción a cada código y también activarlos o desactivarlos según tus necesidades.

Insertar código snippet en WooCommerce usando plugin

En el caso de que los códigos snippet alteren el estilo o la apariencia de la plantilla de tu tienda WooCommerce, deben insertarse siempre en el fichero functions.php del tema hijo de la plantilla que estés usando.

Te preguntarás; ¿por qué tengo que crear un tema hijo y no puedo insertarlo directamente en la plantilla original?

Pues la respuesta es bien sencilla. Porque si actualizas la plantilla original -cosa que es muy normal-, podrías perder todos los cambios introducidos en el fichero functions.php.

Añadir código snippet a tema hijo WooCommerce

Un tema hijo hereda todas las funcionalidades y la apariencia del tema padre. Pero además, tiene la ventaja de que se mantienen intactos los códigos snippet cuando actualizas la plantilla padre.

Crear un tema hijo para WordPress es muy sencillo y una vez entienda los pasos a seguir, no te llevará más de 5 minutos hacerlo. Aquí tienes todos los pasos a seguir y la información necesaria.

¿Qué pasa si tu tienda WooCommerce ya funciona con un tema hijo?

Supongamos que ya compraste un tema hijo o lo descargaste del repositorio de oficial de plantillas de WordPress.org para usarlo en tu tienda WooCommerce.

Ahora quieres hacer alguna modificación en el diseño de forma segura sin tocar el código fuente del tema hijo para no perder los cambios en el caso de que se actualice.

Pues bien, en este caso WordPress no te permite extender un tema hijo de otro tema hijo o lo que llamaríamos un tema «nieto«. En este caso la mejor forma de añadir códigos para modificar el diseño, sería usando de nuevo el plugin «Code Snippets« que he comentado antes, pero con la diferencia de que en este caso debes incluir como prefijo, en el título del snippet, el nombre del tema hijo al que afecta. De esa forma sabrás diferenciar qué códigos son independientes de la plantilla y cuales depende de ella.

Estos serían los dos métodos correctos para añadir códigos snippet en WooCommerce y no llevarte un susto después de actualizar tu plantilla o cambiarla por otra.

Aunque al principio pueda parecer un poco engorroso, una vez sepas diferenciar los tipos de códigos snippet, es bastante fácil aplicar estas buenas prácticas y mantener tu tienda WooCommerce libre de fallos.

Yo desde luego, te recomiendo que empieces a aplicarlos desde ya.

Masterclass Gratis

Evita los mismos ERRORES SEO que cometen el 95% de las tiendas online 

video-lead-magnet-errores-seo-tiendas-online

Déjame tu nombre y tu email para poder enviarte el enlace de acceso al vídeo de la masterclass.

Responsable: Antonio Cantero, siendo la Finalidad; envío de mis publicaciones así como correos comerciales. La Legitimación; es gracias a tu consentimiento. Destinatarios: tus datos se encuentran alojados en mi plataforma de email marketing Active Campaign ubicada en EEUU y acogida al Privacy Shield. Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos en soporte@woodemia.com. Para más información consulta la política de privacidad

15 comentarios en “Añadir códigos snippet en WooCommerce de forma correcta”

  1. Avatar

    Valeeeeeee, en los comments no aparece el código, no había caído en eso… jejejej 🙁
    Si quieres pásame el mail y te envío el trozo de código modificado.

    Un saludo y muchas gracias por todo!!!!

    1. Avatar

      Pedazo de aporte que has compartido. Muchísimas gracias!!!

      No te preocupes por el código, porque aunque no se vea en los comentarios, si he podido verlo desde el email de notificación 🙂

      Saludos!

  2. Avatar

    Hola Antonio,
    siempre que busco respuesta para alguna duda que tengo de woocommerce lo primero que me sale es uno de tus posts.
    Gracias y felicidades.
    Ahora la duda. 🙂
    Quiero utilizar el snippet que creaste para generar un código de descuento para la siguiente compra y tengo un problemilla. Mi web está en inglés y español, con WPML, y las ventas son al 50% en cada idioma. Para que el código que muestra el snippet lo haga con el idioma correspondiente del site tendría que añadir líneas de código a tu snippet, mi nivel es muy bajo, o hay algún otro método más sencillo para convertir los snippets en multilingual?

    Muchísimas gracias.

    1. Avatar

      Hola Lu!

      Gracias a ti por leerme. Me alegra que Woodemia te esté ayudando con tu tienda.

      Para que el snippet funcione con WPML hay que reescribir buena parte del código, no es algo tan directo.

      Siento no poder ayudarte con eso 🙁

      Para eso ya tendrías que tirar de algún plugin más completo como este «Smart Coupons» (soy afiliado). Aún así, pregunta antes al soporte si es compatible con WPML.

      Saludos!

      1. Avatar

        Hola Antonio,
        al final lo he resuelto modificando un poco tu código, ha sido más sencillo de lo que pensaba. Entre tu código, google y un amigo programador lo he resuelto en una tarde.
        Te paso las lineas que he modificado por si lo quieres testear y compartir, seguro que somos bastantes con webs multilingual. (recuerdo que mi setup es (Woocommerce+wpml)
        ….
        He encontrado, creo, un pequeño bug. Ya lo hacía antes de modificar el snippet.
        Cuando se crea el código, este no aparece centrado respecto al resto del texto y el borde que lo rodea no lo hace bien. Por el margen izquierdo todo correcto pero por el dereccho pasa por encima del código. Iba a enviarte un pantallazo pero no puedo subir imagenes a los comments.

  3. Avatar

    Hola Antonio,

    En primer lugar, muchas gracias por tus aportaciones, me están siendo de gran utilidad 😉

    Mira, estoy utilizando Code Snippet y tengo un tema hijo. He seguido los pasos que indicas, pero no consigo que me funcione…

    En el post comentas lo siguiente: «debes incluir como prefijo, en el título del snippet, el nombre del tema hijo al que afecta». ¿Me podrías indicar con más detalle cómo hacerlo? En mi caso lo he incluido en el campo «Título» del plugin Code Snippet.

    ¡Mil gracias!

    Saludos,
    Naiara

    1. Avatar

      Hola Naiara,

      No quiero que te líes.

      Olvídate del prefijo.

      En el campo «Título» le pones un nombre descriptivo de la función que haga el snippet y en el área de texto «Code» pegas el snippet.

      Por último, solo te queda guardar cambios y activar.

      Saludos!

  4. Avatar

    Hola Antonio, muchas gracias por todo lo que haces,
    te cuento que me surgió un problema al añadir un código snippet mediante el pluggin Code Snippets, estoy agregando el snippet del pixel de Facebook siguiendo los pasos de tu publicación, sin embargo, en el paso donde debía cambiar por el identificador del pixel activé el código sin hacer esto, por lo que la web arroja Error Fatal. La puedo recuperar la pagina eliminando el pluggin, pero al volver a instalarlo para poder editar el código me vuelve a tirar el Error Fatal impidiendome editar el código. Hay alguna solución a esto ?

    1. Avatar

      Hola Pancho,

      Seguramente se deba a que han quedado registros del plugin almacenados en las tablas de la base de datos.

      Te recomiendo que antes de volverlo a instalar, hagas una limpieza de la BD con el plugin WP Optimize.

      Espero que se solucione con eso.

      Saludos!

  5. Avatar

    Saludos, Antonio. necesito ayuda ..como puedo ampliar el ancho del head-image

    ejemplo : tiene un size de 440×114

    necesito un size de 950×114

    como puedo hacer para que el banner cubre el ancho de la cabecera?

    gracias..el cubano

  6. Avatar

    Hola! Buenisimo artículo muy útil.
    Pero tengo otra duda, en la pagina de woocomerce, cuando entro el artículo seleccionado la imagen se puede hacer un zoom.
    Hay alguna manera de quitar este zoom y que se vea la imagen normal?

    GRacias.

    1. Avatar

      Hola Jordi,

      Que yo sepa, la función de zoom no es nativa de WooCommerce sino que depende del tema que estés usando. Así que para saber cómo desactivarlo, te recomiendo que preguntes al soporte técnico del tema con el que estás trabajando.

      Un saludo!

  7. Avatar

    Acabo de descubrir tu blog y ya lo estoy flipando. Me lo guardo pero ya y empezaré a hacer los deberes.

    Mi pregunta: ¿Algún tutorial de cómo insertar paso a paso los snippets en el código de funtions ? He intentado usar el plugin de ritch snippets de Schema.org pero es imposible. Tienes que hacerlo paso a paso y a mi lo que me interesaría es que usara el campo título de woocommerce como el título del fragmento enriquecido.

    No sé si me explico: Por ejemplo:

    post_tittle del producto = Titulo del snippet
    post_excertp = Descripción del snippet
    La imagen destacada = Imagen del snippet
    regular_price = Precio en el snippet
    stock_status = Disponibilidad del producto en el snippet

    Un saludo y muchas gracias por tu blog, es una pasada. Me suscribo ahora mismo.

    1. Avatar

      Hola Juan,

      ¡Vaya! Me alegra que te esté gustando.

      Para escribir códigos en el functions.php del tema hay decenas de tutoriales paso a paso en internet, es cuestión de googlear un poco.

      Yo lo que hago es descargarme el archivo a través de FTP, pegar el código al final y volver a subirlo por FTP. Pero sinceramente, creo que es mucho más fácil usar el plugin del que hablo en esta entrada.

      Con respecto a lo que dices del fragmento enriquecido, no sé ahora mismo cómo hacer, tendría que verlo con detenimiento.

      Siento no poder ayudarte en eso.

      Un saludo!

  8. Avatar

    Hola Antonio.

    Estoy flipando con tu blog, es la leche en verso. y lo explicas todo del carajo. Sin duda es mi libro de cabecera en WooCommerce.

    Tengo una duda respecto a los snippets. Implementé el codigo que hace que el cliente deba meter el NIF como campo obligatorio, pero sale al final de todos los campos y no está muy visible. Sería posible hacer que el NIF se vea mas arriba, junto a los demás datos?.

    Muchas gracias por tu ayuda.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable: Antonio Cantero, siendo la Finalidad; envío de mis publicaciones así como correos comerciales. La Legitimación; es gracias a tu consentimiento. Destinatarios: tus datos se encuentran alojados en mi plataforma de email marketing Active Campaign ubicada en EEUU y acogida al Privacy Shield. Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos en contacto@woodemia.com