WooCommerce es un plugin fantástico para WordPress que permite a cualquier persona vender sus productos de forma rápida y efectiva por internet.
Estaba tratando de solucionar un problema para un cliente de la agencia en la que trabajo, cuando descubrí este pequeño truquito que me alegró el día.
El problema al que me enfrentaba era que el plugin Gravity Forms no mostraba el spinner cuando seleccionabas una de las posibles combinaciones de producto. Cuando un usuario seleccionaba las distintas opciones, el precio se mantenía a 0,00 € mientras se iban cargando los precios. Mostrar un spinner mejoraría la experiencia de los usuarios y sabrían que la web está calculando el precio final. Pero eso no funcionaba, y el cliente podría marcharse al pensar que no estaba pasando nada.
Tras varias horas revisando los archivos de Gravity Forms y del add-on de WooCommerce, encontré la solución con un simple CSS.
Primero seleccionamos el Spinner:
Hay infinidad de páginas webs con spinners o loaders. Yo prefiero preloaders.net. Puedes usar la que más te guste para descargar el preloader.
Añadir el código CSS:
Con el siguiente código CSS podrás mostrar el spinner que más de guste. Pégalo en la hoja de estilos (style.css) de tu plantilla (theme).
.processing .blockOverlay { background-image:url('IMAGE_URL') !important; background-position: center 30% !important; background-repeat: no-repeat !important;}El preloader que he escogido:
Simple, moderno y llama la atención. Tú puedes elegir el que más te guste.
Este pequeño truco sirve para WooCommerce 2.5.5.
