¿Cómo añadir iconos personalizados en la ficha de productos?

El otro día os hablamos de nuestro cliente EuroPalets Group y de cómo creamos su catálogo y tienda virtual simultáneas en WooCommerce en modo catálogo para usuarios no registrados. Pues bien, hoy os vamos a hablar del mismo cliente y de otra de las necesidades que nos planteó.

EuroPalets Group necesitaba que le añadiéramos a las fichas de productos de su tienda online bajo WooCommerce una serie de campos personalizados en el que todos debían mostrar un icono personalizado, y algunos, pero sólo algunos de ellos, un texto que se pudiera personalizar en la pestaña Generales disponible en la edición de los productos.

Solución

Para hacer realidad los deseos de EuroPalets Group creamos una serie de funciones PHP, concretamente tres, en el archivo functions.php del tema hijo que indican cuáles de los ocho campos personalizados solicitados son campos de texto y cuáles son campos de selección, además de su etiqueta label e identificación interna, así como el icono gráfico que le corresponde a cada uno de los campos. Esto lo hicimos con tres arrays para que en el futuro se puedan añadir fácilmente más campos e iconos personalizados, si son necesarios.

Aquí tienes el código PHP empleado en este caso concreto:

Ver en el sitio web oficial.

Para darle el estilo que necesitábamos a los iconos sólo tuvimos que añadir en el fichero style.css del tema hijo el siguiente código CSS:

/*Iconos*/
.iconos {
    clear: both;
    display: block;
    margin: 0px auto 20px;
    text-align: center;
}
.iconos::after {
    clear: both;
}
.icono {
    display: inline-block;
    vertical-align: top;
}
.icono img {
    max-width: 75px;
}
.valor_icono {
    display: block;
    color: #97be0c;
    font-weight: bold;
}

Resultado

En la ficha interna del producto veremos los nuevos campos personalizados en la ficha Generales.

Mientras que en la ficha de producto pública se verá de esta forma tan gráfica.

Otras alternativas

En nuestro caso hemos optado por mostrar los iconos en la ficha de producto tras el resumen, las imágenes y el precio, si bien también se pueden mostrar en otros sitios alternativos o de forma simultánea simplemente modificando la última línea del código PHP propuesto, o añadiendo cualquiera de estos ejemplos, aunque hay muchas más alternativas.

add_action( 'woocommerce_after_single_product_summary', 'muestra_campos_personalizados_apg', 5 );
add_action( 'woocommerce_single_product_summary', 'muestra_campos_personalizados_apg', 40 );
add_action( 'woocommerce_after_shop_loop_item_title', 'muestra_campos_personalizados_apg' );

De esta forma podemos hacer que los iconos aparezcan en la pestaña Descripción de cada producto, o en los listados de productos, por ejemplo. Las alternativas son múltiples y variadas, aunque para eso os recomendamos que creáis distintas clases CSS para poder personalizar los campos según la ubicación de los mismos.

Conclusión

Con estos pequeños códigos PHP y CSS hemos creado una solución a la par simple que elegante a la demanda planteada por EuroPalets Group, mostrar iconos personalizados en sus fichas de producto.

Esperamos que os guste y os resulte útil este pequeño tutorial, y como siempre quedamos a la espera de vuestros comentarios y aportaciones.