Modificar estilo precios de productos variables en la página de producto  

 
Miguel
 Miguel
Estimable Member

Buenos días:

He estado buscando dónde modificar el color y el tamaño del precio del producto variable y no veo la forma de hacerlo desde la plantilla que tengo creada en el constructor de DIVI

¿Podéis ayudarme con esto?

Mampara anti Covid 19 Painox Test Mamparas anti Covid 19 Vidrio Templado

Otra cosa que me gustaría cambiar, también en la página de producto, es el color de las estrellas de valoración, en la pestaña "Valoraciones" de la descripción larga del producto.

¡Muchas gracias! 👍 

Citar
Respondido : 21/05/2020 7:04 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Miguel.

Prueba con lo siguiente:

.woocommerce div.product span.price, .woocommerce-page div.product span.price{
font-size:20px!important;
color:#181818!important;
}

En este enlace tienes una tabla de colores:

-> https://htmlcolorcodes.com/es/

 

Un saludo

 

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 21/05/2020 8:52 am
Miguel me gusta
Miguel
 Miguel
Estimable Member

@pepesoler

¡Fenomenal, Pepe! Funcionando.

Una sola cosa más ¿cómo hago para añadirle un margen o un relleno debajo, para que se me separe del botón de comprar?

¡Muchísimas gracias por tu ayuda!

ResponderCitar
Respondido : 21/05/2020 9:51 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Miguel.

Prueba con lo siguiente:

.woocommerce-variation-price {
margin-bottom: 3em;
}

 

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 21/05/2020 10:36 am
Miguel
 Miguel
Estimable Member
¡Gracias de nuevo, Pepe! Efecto conseguido. 👍 
Respondido por: @pepesoler

.woocommerce-variation-price {
margin-bottom: 3em;
}

En mi primera consulta os preguntaba también cómo cambiar en la pestaña "valoraciones" de la descripcion larga de los productos, el color de las estrellas, pero como lo puse abajo supongo que no lo habéis visto. Sorry

Respondido por: @mdominguezathair-es

Otra cosa que me gustaría cambiar, también en la página de producto, es el color de las estrellas de valoración, en la pestaña "Valoraciones" de la descripción larga del producto.

Para no tener que estar molestando con este tipo de consultas CSS ¿tenéis algún vídeo o artículo sobre cómo utilizar el inspector del navegador para identificar las clases CSS? 😉 👍 Yo me defiendo más o menos, pero me cuesta indentificar las clases concretas donde insertar las modificaciones.

¡Gracias!

 

ResponderCitar
Respondido : 21/05/2020 10:49 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Miguel.

 cómo cambiar en la pestaña "valoraciones" de la descripcion larga de los productos, el color de las estrellas

.woocommerce .star-rating span:before, .woocommerce-page .star-rating span:before {
color:#edc100!important;
}

¿tenéis algún vídeo o artículo sobre cómo utilizar el inspector del navegador para identificar las clases CSS? 

Una vez abierto puedes seleccionar el elemento que quieres modificar pulsando en el icono superior de seleccionar elemento:

screenshot nimbus capture 2020.05.21 12 57 48

 

Con el selector de elementos activo selecciona el elemento que quieres modificar y en la parte del styles mostrara el codigo de ese elemento:

screenshot nimbus capture 2020.05.21 13 00 21 (2)

 

Este enlace tienes documentación de Mozilla:

https://developer.mozilla.org/es/docs/Tools/Page_Inspector

 

Un saludo

 

This post was modified hace 5 meses por Pepe

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 21/05/2020 12:03 pm
Miguel me gusta
Miguel
 Miguel
Estimable Member

@pepesoler

Hola, Pepe.

Probé tu código y me funcionó perfectamente. Depués me di cuenta de que las estrellas para añadir una valoración seguían en azul, pero en lugar de volveros a dar la lata,  le eché un vistazo a tus capturas y me puse a investigar un ratillo. Finalmente probé con el siguiente código y conseguí lo que quería.

/* Cambio color estrellas en dejar valoracion en pestaña valoraciones desc. larga producto */
.woocommerce p.stars a {
color:#edc100!important;
}

Espero no haberme cargado nada.... 🤓 

Cuando tenga algo de tiempo me miraré tranquilamente el enlace de Mozilla que me has indicado.

¡Muchas gracias por tu ayuda! 😉 

 

ResponderCitar
Respondido : 22/05/2020 10:30 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola Miguel

Que bien que pudiste solucionarlo, dejo este hilo en espera por si tienes dudas adicionales relacionadas a este tema.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 23/05/2020 2:53 am
Miguel me gusta

Por favor Iniciar Sesión o Registro