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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /*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.
1 2 3 | 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.
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. 🙂
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.
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!!!
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…
Se ve que no te has leído bien la entrada 😀
Un saludo.
jajajaja que despiste… bueno, gracias nuevamente!!!!
Excelente solución. Gracias por compartir.
Genial hace mucho buscaba esto!