En ocasiones, en nuestra tienda online con WooCommerce es posible que no dispongamos de un imagen para el producto y la que se establece por defecto no nos gusta.

Este fragmento o trozo de código hace precisamente eso, nos permite asignar otra imagen como imagen por defecto para el caso en el que no definamos ninguna en los productos.

El código del que os hablo es el siguiente:

https://gist.github.com/OscarAbadFolgueira/7f782b76b6947f75606cee4c3ee04eaa

¿Donde pongo este snippet?

Podéis hacerlo de diferentes formas.

Os dejo el enlace al articulo en el que hablo de esto: Gestiona todos tus trocitos de código con el plugin Code Snippets

Una vez que ya tenemos el código introducido vamos a ver lo que hace y cómo funciona.

¿Cómo funciona este Snippet?

WooCommerce establece una imagen predefinida para los casos en los que no incluimos la imagen para el producto.

La imagen a la que me refiero es la siguiente:

WooCommerce Snippet - Cambiar la imagen por defecto de producto

Lo que queremos es establecer otra imagen para estos casos. Una imagen que tendremos que subir nosotros/as mismos/as a la biblioteca de medios de WordPress.

Asumo que ya sabéis hacer esto. Si no es así, enviadme un mensaje para que lo explique en otro tutorial.

Cuando subimos la imagen, el la librería de medios, antes de cerrar, podemos ver la URL en la que se ha guardado la misma:

WooCommerce Snippet - Cambiar la imagen por defecto de producto

Copiamos el final de esa url y la pegamos en el código del snippet con el que estamos trabajando.

En mi caso, la parte de la url que deb introducir es:

/2016/06/placeholder.jpg

Y ya está.

A partir de ahora en lugar de mostrar la imagen predeterminada que WooCommerce establece, mostrará nuestra imagen, la que acabamos de subir.

WooCommerce Snippet - Cambiar la imagen por defecto de producto

Como vemos en la captura de imagen anterior, ahora aparece nuestra imagen.

Así de sencillo.

Conclusión

Hemos introducido un fragmento de código o code snippet en nuestro WordPress que permite modificar la url de la imagen que WooCommerce establece para el caso de productos en los que no hayamos subido imagen.

Hemos subido una imagen que hemos creado nosotros/as a nuestro WordPress.

Hemos localizado a url de esta imagen, hemos tomado la última parte de esta y la hemos cambiado en el snippet del inicio.

Y por supuesto hemos comprobado el resultado final. Ahora se muestra la imagen que hemos establecido nosotros.

Muy bien, ha sido sencillo, ¿verdad?

Espero que os sea de utilidad.

También espero que me mandéis vuestras dudas y sugerencias sobre este y otros tutoriales.

Nos vemos!

Saludos.

 

 

Autor: Oscar Abad Folgueira

Programador y desarrollador WordPress.