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.