Botón de Añadir al Carro siempre visible

“Añadir al Carro” siempre visible en Woocommerce

Comparte!

Hola! Os voy a explicar la manera más sencilla de todas las que he testeado para que nuestro botón de “añadir al carro” esté siempre visible aún cuando no haya ninga selección en las posibles variaciones si es que el producto es variable. Por defecto Woocommerce “oculta” dicho botón en los productos variables si no se ha seleccionado ninguna variación, y muchas veces nos preguntamos “¿por qué?”, ¿qué ventajas puede tener el que este botón esté oculto?. Bajo mi opinión la ventaja que me puede venir a la cabeza es estética pura y dura. Si haces una web o tienda online minimalista, éstos pequeños detalles pueden llegar a no quedar bien del todo con la imagen de la Marca o simplemente con la estructura de la web.

El hecho es que si haces una tienda online, tiene su lógica que aparezca siempre el botón de añadir tus productos al carro, no crees?…

Bueno, dicho esto, al lío. Como digo he estado probando varios métodos, la mayoría de ellos para añadir un filtro a nuestro “functions” donde una vez añadido un buen pedazo de código y declarada la función en sí… no llegaba a mostrarse o a dar los resultados esperados (botones de añadir al carro duplicados, etc…)

Si, teóricamente ésta es la mejor opción a la hora de realizar este tipo de cambios, como añadir el campo del CIF al formulario de compra, etc…, pero ahí que dándo vueltas al tema, decidí buscar en lo más simple: “el CSS”.

Tras un rato buscando en foros de woocommerce, encontré la solución más que sencilla:

Si la capa que contiene los campos de cantidad y añadir al carro es en el caso de woocommerce “.single_variation_wrap”, sólo debemos de decirle que la muestre SIEMPRE.

¿Cómo?, pues añadiendo a nuestro custom CSS de nuestro tema la siguiente linea:

.single_variation_wrap{

display:block !important;

}

Simplemente le estamos diciendo que muestre esa capa (display: block para que lo muestre en bloque como si de un párrafo se tratara) y la declaración !important; para que tome precedencia sobre otras reglas de estilos que pueda encontrar en toda la web.

Con éstas sencillas lineas en nuestro CSS, a buen seguro que nos quitaremos algún dolor de cabeza para terminar de configurar el aspecto de nuestra tienda online.

¿Os ha gustado?, compartir!!!