Avisos
Vaciar todo

[Resuelto] Personalizar Variation Swatches

9 Respuestas
4 Usuarios
0 Reacciones
21 Visitas
Respuestas: 113
Estimable Member
Topic starter
 

Buenas tardes, podríais ayudarme un poco personalizando un ítem que acabo de añadir al plugin Variation Swatches? Es el selector de Radio "Tipo de oferta", me gustaría aplicarle los cambios descritos en la imagen adjunta.

CSS variation swatches RADIO

Actualmente tengo aplicado el siguiente CSS:

table.variations td label{
color:#272519;
font-size:12px;
font-weight:300;
font-weight:300 !important;
font-family:Raleway;
text-align: left;
}
.vi-wpvs-variation-style.vi-wpvs-variation-style-horizontal {
grid-template-columns: 4fr 8fr;
}
.woocommerce div.product.elementor form.cart table.variations td.label {
width: 60% !important;
}
.reset_variations {
display: none !important;
}

Respecto a lo detallado en rojo en la imagen adjunta, me refiero a que solo quiero aplicar cambios de tamaño de fuente a las dos opciones de selección de radio ("quiero 1h videollamada (...)" y "solo quiero (...)") pero mantener lo demás (Tipo de oferta, color del hilo, de la solapa y patrón del hilo) tal y como están.

Muchísimas gracias.


 
Respondido : 10/07/2020 5:05 pm
Respuestas: 113
Estimable Member
Topic starter
 

Perdón, la página en la que se aplica esto es: https://casa9.es/carta-astral/encargar/


 
Respondido : 10/07/2020 5:18 pm
Jhon
 Jhon
Respuestas: 44954
Illustrious Member Moderator
 

Hola

Prueba con el siguiente código CSS:

table.variations label.vi-wpvs-option{
  font-weight: bold!important;
  font-size:15px;
}

 

Puedes cambiar 15px por algún otro tamaño.

Saludos.


 
Respondido : 10/07/2020 5:24 pm
Respuestas: 113
Estimable Member
Topic starter
 

@jmarreros

Hola John, gracias, ya lo prové y funciona. Para los otros 3 ajustes que me gustaría hacer, qué códigos debería añadir?

En la imagen adjunta hay 4 ajustes en total, ahora hemos resuelto el que he escrito en rojo; faltaría el que está en negro, el azul y el verde.

Muchas gracias.


 
Respondido : 10/07/2020 5:52 pm
Karen Rios
Respuestas: 20420
Illustrious Member Admin
 

Hola Carles,

Comprueba si los siguientes códigos CSS funcionan para los que necesitas.

.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-radio .vi-wpvs-option-wrap input {
margin: auto 20px auto auto !important;
}

.vi-wpvs-variation-style .vi-wpvs-variation-wrap-wrap {
margin-top: 20px !important;
}

Un Saludo


 
Respondido : 10/07/2020 6:28 pm
Respuestas: 113
Estimable Member
Topic starter
 

@karen

Muchísimas gracias Karen, todo perfecto. Respecto al ajuste en verde, habría alguna manera de agrandar/reducir el espacio entre:

"quiero 1h de videollamada (...)" y

(el espacio de aquí en medio)

"solo quiero (...)"?


 
Respondido : 10/07/2020 6:55 pm
Argenis
Respuestas: 12300
Illustrious Member Admin
 

Hola Carles,

Puedes verificar si con este código css puedes hacer lo que necesitas en cuanto al espacio extra en este elemento que nos marcas en verde:

label.vi-wpvs-option {
margin-bottom: 20px !important;
}

Saludos 🖐️ 


 
Respondido : 10/07/2020 7:06 pm
Respuestas: 113
Estimable Member
Topic starter
 

@argenis

Perfecto Argenis, muchas gracias!


 
Respondido : 10/07/2020 7:18 pm
Argenis
Respuestas: 12300
Illustrious Member Admin
 

Hola Carles,

Enhorabuena 😎, nos comentas si necesitas cualquier otro ajuste

Saludos 🖐️ 


 
Respondido : 10/07/2020 7:25 pm