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

  • WooCommerce - Blog

¿Cómo añadir iconos personalizados en los 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 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 );

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

Campos personalizados en la página de configuración de producto

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

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

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' );

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.

2017-03-27T18:08:40+02:00 Miércoles, 3 de Junio de 2015|Categorías: Art Project Group|Etiquetas: , , , , , , , , |8 comentarios

8 Comentarios

  1. 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.

  2. 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!!!

  3. 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…

  4. Manuel Jueves, 18 de Junio de 2015 en 13:24- Responder

    jajajaja que despiste… bueno, gracias nuevamente!!!!

  5. adrian Miércoles, 24 de Junio de 2015 en 22:16- Responder

    Excelente solución. Gracias por compartir.

  6. Carlos Viernes, 20 de Mayo de 2016 en 10:11- Responder

    Genial hace mucho buscaba esto!

Deje un comentario

Comparte esto con un amigo