[Resolved] Problemas de estilos en página de producto

[Pedro]

Hola! En mi sitio tengo una opción para que los clientes puedan ser avisados cuando un producto vuelve a estar disponible (WooCommerce Waitlist)

La cuestión es, en la página de producto tengo un hook que muestra una imagen justo debajo del botón “añadir al carrito”

Así como se puede ver aquí: https://mega.nz/file/epcFUYhB#rqK9COJkXanq0HfWS7d4_bSid6l8bJ5DPR5kQ1fjhAI

Sin embargo, cuando el producto está agotado, se muestra el campo de agregar a la lista de espera.

Lo normal sería que el hook se muestre justo debajo del botón. Sin embargo por alguna extraña razón aparece un gran espacio entre el botón y el hook.

Aquí se puede ver el problema: https://mega.nz/file/vwMjQYTK#JKIGPvp7P2V7GGNnSa365TMajSse_CEx-YIksEMxVCk

¿Pueden ayudarme a que el hook se muestre justo debajo del botón como cuando el producto está disponible?

Aquí pueden ver un producto que tiene algunas variaciones agotadas y otras disponibles: https://www.rebajaslocas.com/cuidado-personal/faja-reductora-hot-shapers/

[David]

Hi there,

try adding this CSS:

.woocommerce-variation-add-to-cart-disabled {
    display: none !important;
}

[Pedro]

Hola David! El código arregla el problema que mencioné al inicio.

Sin embargo, si no se ha seleccionado ninguna opción oculta el botón de “añadir al carrito”

¿Puedes ayudarme con esto?

[Pedro]

Actualización: Al parecer el botón se visualiza de manera diferente en productos simples y variables.

Por ejemplo, en productos simples el botón por alguna razón es más pequeño. Me gustaría que fuera igual de grande al botón de “añadir al carrito”.

Aquí puedes ver un ejemplo: https://www.rebajaslocas.com/cuidado-personal/corrector-de-juanetes-x2-uds/

Y en productos variables, el botón si es del tamaño correcto.

Aquí un ejemplo: https://www.rebajaslocas.com/cuidado-personal/faja-reductora-hot-shapers/

Entonces, solo harían falta dos cosas:

1. Que el botón de los productos simples sea igual de tamaño al de los productos variables.
2. Que el hook que aparece justo debajo del botón no se vea afectado por el espacio que aparece en productos variables.

[David]

1. Replace this CSS:

.woocommerce div.product form.cart .button {
    width: 100%;
    margin-top: 10px;
    padding:20px;
}

with:

.woocommerce div.product form.cart .button, 
.button.woocommerce_waitlist {
    width: 100%;
    margin-top: 10px;
    padding:20px !important;
}

2. I cannot see an easy fix for this. You will need to speak to the Waiting List plugin developer

[Pedro]

Muchas gracias David!

[David]

You’re welcome

[Author]

Posts