Buenas tardes, se me ha actualizado el tema y tras restauar back de funcitons.php del tema y el CSS Adicional en Personalizar he perdido propiedades visuales en nuestra home de woocomerce:
https://kingsschoolofenglish.com/mensualidades/
1.- No se muestra al cambiar de producto el efecto que este CSS hace:
.woocommerce ul.products li.product .ope-woo-card-item:hover {
box-shadow: 0px 0px 15px 7px #ccc;
}
2.- Por otro lado, había un espacio entre la imagen y el titulo del prodcuto que hacia que la caja que rodea al producto y que hablamso en el punto anterior se haga enorme y no se ajuste como estaba anteriormente.
Por favor, ¿podrían ayudarme?
Gracias, un saludo.
Contenido solo visible a usuarios registrados
Hola Robert,
Puedes indicarnos en una imagen de cual sección debería aplicarse este cambio que mencionas:
1.- No se muestra al cambiar de producto el efecto que este CSS hace:
Igualmente con el segundo para poder verificar el problema que nos comentas.
Un saludo 🖐️
@argenis para ello tendría que restablecer mi sitio antes de la actualización. En temas anteriores hice lo que me aconsejasteis para una visual más atractiva de la home de woocommerce y me aconsejasteis copia de los dos archivos mencionados para que no pasaran estas cosas y mira:
https://kingsschoolofenglish.com/mensualidades/
1.- Me refiero al espacio que hay entre por ejemplo " Matrículo y Mensualidad 55" y la imagen que lo que conseguí con vuestra ayuda es ajustar ese margen.
2.- El efecto deseado se muestra en este apartado al pasar de producto
https://login.debit2go.com/debit2go_portal/agrupacion/comercio/2yu0572oa0z
Gracias, un saludo.
Que tal Robert,
Intentemos actualizar los estilos CSS con lo siguiente
.woocommerce-page-content .ope-card-product-tile{
margin-top: -50px;
}
.woocommerce-page-content .ope-woo-card-item:hover {
box-shadow: 0px 0px 15px 7px #ccc !important;
}
Asi tendrás el margen entre la imagen y el titulo reducido además del efecto hover de los contenedores de cada producto
Saludos!
@bruno-vichetti muchas gracias, ha vuelto el efecto hover pero me gustaría optimizar mi código CSS que adjunto para quitar lo que no sirva ya que en el caso del efecto hover había código a tal efecto y no funciona ahora. Por otro lado el espacio entre la parte inferiior de la imagen y el título del producto no he visto el cambio en el código que nos ha facilitado aunque se agradde la ayuda.
Quedo a la espera de vuestras respuesta, gracias.
Hola Robert,
En este caso los estilos CSS depende en gran medida de tu tema, por lo que a simple vista no podemos indicarte que puedes eliminar. Por ahora entiendo que lo que deseas es modificar el alto de la imagen se añade en los productos de acuerdo al ejemplo que nos envías, si es así puedes verificar con el siguiente código CSS
h3.ope-card-product-tile {
margin: 1.3rem 0rem 0.7rem;
font-weight: 400;
font-size: 1.2rem!important;
line-height: 1.3rem;
text-transform: uppercase;
color: inherit;
margin-top: 0;
text-align: left;
}
.ope-woo-card-item {
display: inline-block;
height: auto;
width: 80%;
color: #414141;
transition: box-shadow 0.2s ease-in-out;
padding: 1.2rem 1.2rem 0.7rem 1.2rem;
line-height: 1.72rem;
border: none;
box-shadow: 0px 2px 3px 1px rgb(122 122 122 / 30%);
background: #FFF;
text-align: left;
}
.woocommerce ul.products li.product .ope-woo-card-content-section.ope-woo-card-content-description {
padding: 0;
}
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
display: block;
color: #FFF;
border-radius: 0.2rem;
font-weight: 400;
line-height: 36px;
padding: 0.7rem 0;
margin: 0.3rem 0;
font-size: 1rem;
width: 100%;
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0 ,0.2, 1);
text-decoration: none;
text-align: center;
}
Verifica si con ello logras configurar nuevamente los productos como deseas
Un Saludo
@karen gracias pero lo que deseamos es que en la home de la tienda:
https://kingsschoolofenglish.com/mensualidades/
Ajustar el espacio que hay entre la parte inferior de la imagen y el nombre del producto para reducir el tamaño de la caja que lleva el hover. Ejemplo: un espacio de margen deseado en ese apartado compo el que hay entre el nombre del producto y el precio. Adjunto captura con circulo negro el margen a corregir y con circulo verde el margen deseado.
Con respecto al código CSS que he adjuntado mi primer post del presente tema hacia alusión a un código que me aconsejó precisamenre usted para el hover. Si ya no funciona y he añadido el del compañero mi pregunta es si lo puedo quitar. Comprend que no quiera tener código de más en el CSS adicional de la plantilla con motivo de evitar esto que me ha pasado.
Gracias.
Hola Robert,
Entiendo, en este caso si el código anterior no funciona de forma correcta puedes eliminarlo y verificar si no surge ningún cambio en la sección que anteriormente tratamos. Con respecto a la opción de eliminar el espacio prueba si el siguiente código CSS te permite reducir esto
.ope-woo-card-content-section.ope-woo-card-content-title {
margin-top: -50px!important;
}
Verifica esto y nos comentas como ha ido todo
Un Saludo
Hola Robert,
Encantados siempre de poder ayudar, si tienes alguna otra duda que puedes crear un nuevo tema y con todo gusto lo vemos.
Un saludo 🖐️