Añadir al carro siempre visible en Woocommerce

A continuación 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 en Woocommerce aún cuando no haya ninguna 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?…

Solución o alternativa para mostrar el botón Añadir al carro siempre

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 nos preguntamos si esta es la forma correcta (la de añadir la función directamente a nuestra plantilla), la respuesta es 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 la solución en algo más simple: «el CSS».

Tras un rato comparando varios tipos de soluciones, ésta es la que ví más 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.

Bueno, ahora ya conoces otra manera de dejar el » añadir al carro siempre visible en Woocommerce «. Si os ha gustado, compartir!!!