Avisos
Vaciar todo

Hosting WordPress 70% dto Dominios promo

[Resuelto] Problemas con la página de inicio de tienda woocomercce tras actualziación del tema  

 
Robert
 Robert
Reputable Member

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

Respondido : 11/02/2022 4:51 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Robert,

Puedes indicarnos en una imagen de cual sección debería aplicarse este cambio que mencionas:

Respondido por: @kingsschoolofenglishgmail-com

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 🖐️ 

Respondido : 11/02/2022 5:08 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Robert
 Robert
Reputable Member

@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.

 

Respondido : 11/02/2022 11:43 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

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!

Respondido : 11/02/2022 11:52 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Robert
 Robert
Reputable Member

@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.

 

Respondido : 12/02/2022 10:02 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

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

Respondido : 12/02/2022 1:14 pm

Robert
 Robert
Reputable Member

@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.

Captura

 

Respondido : 12/02/2022 7:32 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

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 

Respondido : 12/02/2022 8:03 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Robert
 Robert
Reputable Member

@karen muchas gracias. Ahora se muestra como deseamos.

 

Saludos, gracias por todo a tod@s.

Respondido : 12/02/2022 10:04 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

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 🖐️ 

Respondido : 12/02/2022 10:16 pm
Robert me gusta

Cursos Gratuitos WordPress