¿Cómo añadir iconos personalizados en los productos?

Ver imagen más grande

Contenido

Solución
Resultado
Otras alternativas
Conclusión

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 páginas 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:

/*
Campos personalizados
*/
$campos_input =array(
	'peso' => 'Peso',
	'estatica' => 'Carga estática',
	'dinamica' => 'Carga dinámica',
	'materia' => 'Materia prima',
	'categoria' => 'Categoría',
);
$campos_checkbox =array(
	'exportable' => 'Exportable',
	'homologado' => 'Homologado',
	'higienico' => 'Higiénico',
);
$iconos =array(
	'peso' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-01-100x100.png',
	'estatica' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-02-100x100.png',
	'dinamica' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-03-100x100.png',
	'materia' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-04-100x100.png',
	'categoria' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-05-100x100.png',
	'exportable' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-06-100x100.png',
	'homologado' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-07-100x100.png',
	'higienico' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-08-100x100.png',
);

//Añade los campos personalizados en la pestaña Generales del producto
function campos_personalizados_apg() {
	global $campos_input, $campos_checkbox;
	
	foreach( $campos_input as $id => $label ) {
		woocommerce_wp_text_input( array( 
			'id' => $id, 
			'class' => 'wc_input short', 
			'label' => __( $label, 'woocommerce' )
		) );
	}

	foreach( $campos_checkbox as $id => $label ) {
		woocommerce_wp_checkbox( array( 
			'id' => $id, 
			'label' => __( $label, 'woocommerce' )
		) );
	}
}
add_action( 'woocommerce_product_options_pricing', 'campos_personalizados_apg' );

//Actualiza los valores introducidos en cada campo
function guarda_campos_personalizados_apg( $product_id ) {
	global $campos_input, $campos_checkbox;

	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return;
	}
	$campos = array_merge( $campos_input, $campos_checkbox );
	
	foreach( $campos as $campo => $nombre ) {
		if ( isset( $_POST[$campo] ) ) {
			update_post_meta( $product_id, $campo, $_POST[$campo] );
		} else {
			delete_post_meta( $product_id, $campo );
		}
	}
}
add_action( 'save_post', 'guarda_campos_personalizados_apg' );

//Muestra los campos en forma de icono y valor en la página de producto
function muestra_campos_personalizados_apg() {
    global $product, $campos_input, $campos_checkbox, $iconos;

	if ( $product->product_type <> 'variable' ) {
		$campos = array_merge( $campos_input, $campos_checkbox );
	

		echo '


<div class="iconos">' . PHP_EOL;
		foreach( $campos as $campo => $nombre ) {
			$valor_campo = get_post_meta( $product->id, $campo, true );
			if ( $valor_campo ) {
				echo '


<div class="icono">' . PHP_EOL;
				echo '<img src="' . $iconos[$campo] . '" alt="' . $nombre . '" width="100" height="100" />' . PHP_EOL;
				if ( $valor_campo != 'yes' ) {
					echo '<span class="valor_icono">' . $valor_campo . '</span>' . PHP_EOL;
				}
				echo '</div>



' . PHP_EOL;
			}
		}
		echo '</div>



' . PHP_EOL;
	}
}
add_action( 'woocommerce_after_single_product_summary', 'muestra_campos_personalizados_apg', 5 );

100

101

102

103

104

Campos personalizados

$campos_input =array(

'peso' => 'Peso',

'estatica' => 'Carga estática',

'dinamica' => 'Carga dinámica',

'materia' => 'Materia prima',

'categoria' => 'Categoría',

);

$campos_checkbox =array(

'exportable' => 'Exportable',

'homologado' => 'Homologado',

'higienico' => 'Higiénico',

);

$iconos =array(

'peso' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-01-100x100.png',

'estatica' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-02-100x100.png',

'dinamica' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-03-100x100.png',

'materia' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-04-100x100.png',

'categoria' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-05-100x100.png',

'exportable' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-06-100x100.png',

'homologado' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-07-100x100.png',

'higienico' => 'http://www.europaletsgroup.com/wp-content/uploads/2015/05/Europaletsgroup-iconos-08-100x100.png',

);

//Añade los campos personalizados en la pestaña Generales del producto

function campos_personalizados_apg() {

global $campos_input, $campos_checkbox;

foreach( $campos_input as $id => $label ) {

woocommerce_wp_text_input( array(

'id' => $id,

'class' => 'wc_input short',

'label' => __( $label, 'woocommerce' )

) );

}

foreach( $campos_checkbox as $id => $label ) {

woocommerce_wp_checkbox( array(

'id' => $id,

'label' => __( $label, 'woocommerce' )

) );

}

add_action( 'woocommerce_product_options_pricing', 'campos_personalizados_apg' );

//Actualiza los valores introducidos en cada campo

function guarda_campos_personalizados_apg( $product_id ) {

global $campos_input, $campos_checkbox;

if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {

return;

}

$campos = array_merge( $campos_input, $campos_checkbox );

foreach( $campos as $campo => $nombre ) {

if ( isset( $_POST[$campo] ) ) {

update_post_meta( $product_id, $campo, $_POST[$campo] );

} else {

delete_post_meta( $product_id, $campo );

}

add_action( 'save_post', 'guarda_campos_personalizados_apg' );

//Muestra los campos en forma de icono y valor en la página de producto

function muestra_campos_personalizados_apg() {

global $product, $campos_input, $campos_checkbox, $iconos;

if ( $product->product_type <> 'variable' ) {

$campos = array_merge( $campos_input, $campos_checkbox );

echo '

<div class="iconos">' . PHP_EOL;

foreach( $campos as $campo => $nombre ) {

$valor_campo = get_post_meta( $product->id, $campo, true );

if ( $valor_campo ) {

echo '

<div class="icono">' . PHP_EOL;

echo '<img src="' . $iconos[$campo] . '" alt="' . $nombre . '" width="100" height="100" />' . PHP_EOL;

if ( $valor_campo != 'yes' ) {

echo '<span class="valor_icono">' . $valor_campo . '</span>' . PHP_EOL;

}

echo '</div>

' . PHP_EOL;

}

echo '</div>

' . PHP_EOL;

}

add_action( 'woocommerce_after_single_product_summary', 'muestra_campos_personalizados_apg', 5 );

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;
}

/*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 pestaña Generales.

Mientras que en la página 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 página 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' );

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 páginas 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.

Art Project Group2017-12-13T15:17:37+02:003 de junio de 2015|Categorías: Tutoriales|Etiquetas: Clientes, Comercio electrónico, CSS, functions.php, PHP, style.css, WooCommerce|10 Comentarios

10 Comments

Manuel miércoles, 17 de junio de 2015 en 20:08 - Responder
Vaya, vaya, este código tiene muy buena pinta, pero… a mi me da error 🙁
A ver si podemos encontrar la solución…
1º Me da tres errores de este tipo:
Parse error: syntax error, unexpected ‘}’ in /home/…/themes/tema-child/functions.php on line 51
Parse error: syntax error, unexpected ‘}’ in /home/…/themes/tema-child/functions.php on line 64
Parse error: syntax error, unexpected ‘}’ in /home/…/themes/tema-child/functions.php on line 90
Los soluciono moviendo la apertura “{” para un renglón nuevo. Creo que en las lineas 27,43 y 55 del código vuestro código que indicáis arriba, el comentario de cada línea afecta también a la apertura “{” quedando esta a su vez comentada… Corregidme si me equivoco…
2º Pero luego me da un error diferente que no se como solucionar…
Fatal error: Call to undefined function woocommerce_wp_text_input() in in /home/…/themes/tema-child/functions.php on line 41
¿Cómo puedo solucionarlo?
¿Puede ser que me esté pasando por usar la ultima versión de woocommerce?
Muchas gracias de antemano por vuestra ayuda. Vuestros comentarios y post siempre son de mucho interés. 🙂
- Art Project Group miércoles, 17 de junio de 2015 en 20:59 - Responder
  A veces WordPress hace código creativo con el código PHP que insertamos en las entradas, y esta vez ha sido una de ellas.
  Ya está arreglado el código fuente original, por lo que ahora no debe devolverte ningún tipo de error. En cuanto al segundo error, no debería de existir, ya que la función woocommerce_wp_text_input es nativa de WooCommerce.
  Muchas gracias por el aviso.
Manuel jueves, 18 de junio de 2015 en 11:19 - Responder
jajajaja me ha gustado eso de que WordPress hace código creativo, 🙂 muy bueno…
Al lío, efectivamente ya está corregido y a mi me funciona bien, me queda jugar con las imágenes y cambiar todas las variables y css para mi caso concreto, que nada tiene que ver con vuestro ejemplo, pero me viene de perlas.
Buen código chicos, felicidades!!!
Manuel jueves, 18 de junio de 2015 en 12:30 - Responder
Se me acaba de ocurrir una cosa… ¿sería posible hacer que estos iconos sean visibles desde la descripción genérica de todos los productos en la tienda? para que sea más fácil de identificar sin tener que entrar a cada producto uno por uno para ver sus características… no sé si es factible vamos…
- Art Project Group jueves, 18 de junio de 2015 en 12:32 - Responder
  Se ve que no te has leído bien la entrada 😀
  Un saludo.
Manuel jueves, 18 de junio de 2015 en 13:24 - Responder
jajajaja que despiste… bueno, gracias nuevamente!!!!
adrian miércoles, 24 de junio de 2015 en 22:16 - Responder
Excelente solución. Gracias por compartir.
Carlos viernes, 20 de mayo de 2016 en 10:11 - Responder
Genial hace mucho buscaba esto!
Jorge jueves, 26 de julio de 2018 en 14:26 - Responder
Hola buenas tardes!
Aunque parece que hace tiempo que no se comenta en este artículo yo acabo de encontrarme con este pedazo código y bueno probando he visto que cuando seleccionas producto variable en lugar de producto simple desaparecen los checkbox.
Hay una parte del código que parece ir enfocada a mostrar los checkboxes cuando el precio es variable, entiendo que es variable en función de si hay o no variaciones.
Podéis echarme una mano?
Muchas gracias por haber compartido este código chicos! Buen trabajo!!
- Art Project Group jueves, 26 de julio de 2018 en 18:41 - Responder
  El código publicado está creado y pensado exclusivamente para productos simples y nunca va a ser funcional en productos variables.
  Si necesitas ayuda con la personalización del mismo no dudes en contactar con nosotros para que podamos presupuestarte lo que necesites.
  Un saludo.

Deja tu comentario Cancelar respuesta

Información básica sobre Protección de Datos

Responsable: Art Project Group Developers, SL.
Fin del tratamiento: Mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios.
Legitimación: El consentimiento del usuario.
Comunicación de los datos: No se comunicarán los datos a terceros, salvo por una obligación legal.
Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.
Contacto: info@artprojectgroup.es.
Información adicional: Puede consultar la información adicional y detallada sobre Protección de Datos en Política de Privacidad.

Suscríbeme a la lista de correos.

Recibir un email con los siguientes comentarios a esta entrada.

Recibir un email con cada nueva entrada.

He leído y acepto la Política de Privacidad y consiento en el tratamiento de mis datos personales. *

Solución

Resultado

Otras alternativas

Conclusión

10 Comments

Deja tu comentario Cancelar respuesta

Información básica sobre Protección de Datos

Correo electrónico

Teléfono

Dirección

¿Cómo añadir iconos personalizados en los productos?

Solución

Resultado

Otras alternativas

Conclusión

Entradas relacionadas

Media File Renamer y la transliteración

WooCommerce y el RGPD: la guía definitiva

El placeholder, los campos de selección y Contact Form 7

Añadiendo la política de privacidad en los comentarios

Personalizando el widget suscripciones de Jetpack

10 Comments

Deja tu comentario Cancelar respuesta

Información básica sobre Protección de Datos

Correo electrónico

Teléfono

Dirección