0

Quiero cambiar el color de fondo a las fichas de todos los productos del catalogo de Woocommerce. En una tienda que hice, sin yo hacer nada el fondo se cambio a blanco y eso me gusto, pero yo no añadí ningún estilos para que esto sucediera.

Quiero cambiar el color de fondo y añadir un border-radius, incluso una sombra como se puede ver en este ejemplo.

He sado todas las clases y añadido una por una el css para conseguir el border-radius y box-shadow , sin embargo, no lo consigo.

El fondo, cambia el fondo de toda la pagina y el box-shadow, tambien se añade al contenedor de todas fichas de productos como se muestra en la imagen.

Que debo hacer para cambiar el color de fondo de los productos y darlos border-radius y box-shadow unicamente al la ficha de los productos.

.product-small div{  
border-radius: 40px 20px 40px 20px;
}

.col-inner {
-webkit-box-shadow: 3px 4px 5px lightgrey;
}

Como digo, hice pruebas en las clases de todo el producto sin éxito. Primero saque el esquema de un productos que muestro abajo, y luego fui añadiendo el css a cada una de ellas, pero lo único que conseguí fue lo que vemos en las imagenes, las sombras estan en todo el bloque

Esta es la estruptura de cada ficha de productos:

<div
    class="product-small col has-hover product type-product post-967 status-publish instock product_cat-galleteria-ecologica shipping-taxable purchasable product-type-simple">
<div class="col-inner">
  <div class="badge-container absolute left top z-1">
    <div class="product-small box">
      <div class="box-image">
        <div class="image-none">
          <a href="http://" target="_blank" rel="noopener noreferrer"></a>
        </div>
        <div class="image-tools is-small top right show-on-hover"></div>
        <div></div>
        <div></div>
      </div>
      <div class="box-text box-text-products text-center grid-style-2">
        <div class="title-wrapper"></div>
        <div class="price-wrapper"></div>
        <div class="add-to-cart-button"></div>
      </div>
    </div>
  </div>
</div>

¿ Como puedo dar un color de de fondo y box-shadow unicamente a cada ficha de productos?

¿ Cual es la clase a la que debo aplicar los estilos ?

1 respuesta 1

1

1- Identifica la clase del div que muestra los productos. div NO li. En mi caso y creo que en todo WordPress la clase es .product-inner

introducir la descripción de la imagen aquí

2- Te vas a Apariencia > Personalizar > CSS Adicional, (que es el lugar donde debes poner tus estilos personalizados) y colocas tus estilos.

.product-inner{
    border-radius: 40px 20px 40px 20px;
    -webkit-box-shadow: 3px 4px 5px lightgrey;
}

3- Pruebas los resultados

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

En mi caso funcionó tal cual lo muestro en las imágenes.


Edito mi respuesta

Cito

Gracias a tus ideas he conseguido llegar a dar los estilos deseados. Unicamente añadi el css al comienzo de Custom CSS. ya que tu me ayudaste, te mereces la respuesta y no yo. unicamente lo consegui con el siguiente texto: .product-small div{ border-radius: 40px 20px 40px 20px; } .col-inner { box-shadow: 3px 4px 5px lightgrey; } Si editas tu código, te lo dare por bueno, creo que eso es lo justo. Gracias

Así que acá dejo el código que @estudiante implemento, pero dejo el mio porque también hace lo solicitado :-)

.product-small div {
    border-radius: 40px 20px 40px 20px; } 
.col-inner {
    box-shadow: 3px 4px 5px lightgrey; 
}
5
  • Gracias por tu respuesta. Estuve haciendo pruebas y por alguna estraña razón, no se hacen efecto los estilos. La clase que tu tienes, no esta en mis productos, pero como digo. Resulta estraño, pongo los estilos en Custom CSS y en ese momento se muestran en la web, pero cuando recargo, desaparecen .product-small div{ border-radius: 40px 20px 40px 20px; background-color:white;} Esto es muy raro. Y en tu ejemplo, en la parte superior no se muestra border-radius
    – Estudiante
    Commented el 29 dic. 2022 a las 15:19
  • 1
    Puedes poner link de tu pagina??
    – OCHOA
    Commented el 29 dic. 2022 a las 16:10
  • jjjj, esto es de pelicula. pues ahora funciona con el siguiente css: .product-small div{ border-radius: 40px 20px 40px 20px;} .col-inner {box-shadow: 3px 4px 5px lightgrey;} Unicamente no cambia las sombras, la idea era que cambiara las sombras al pasar el raton por encima. Y otro problema que hay, es que cuando entramos en cualquiera de las paginas, la sombra se aplica todo el contenedor, se puede ver en la parte derecha y la parte de abajo
    – Estudiante
    Commented el 29 dic. 2022 a las 16:56
  • Gracias a tus ideas he conseguido llegar a dar los estilos deseados. Unicamente añadi el css al comienzo de Custom CSS. ya que tu me ayudaste, te mereces la respuesta y no yo. unicamente lo consegui con el siguiente texto: .product-small div{ border-radius: 40px 20px 40px 20px; } .col-inner { box-shadow: 3px 4px 5px lightgrey; } Si editas tu código, te lo dare por bueno, creo que eso es lo justo. Gracias
    – Estudiante
    Commented el 2 ene. 2023 a las 21:44
  • 1
    @Estudiante listo, editada la respuesta.
    – OCHOA
    Commented el 3 ene. 2023 a las 18:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.