[Resuelto] Otros diseños página carrito.

Hola Francisco,

Recuerda dejar enlace directo al apartado donde deseas que se ejecuten estos cambios, debo suponer que todos los ajustes corresponden a la vista detalle de un producto

1. Eliminar el texto que se refleja en letra pequeña encima de la imagen del producto: "Inicio/sin categorízar + nombre del producto"

Puedes aplicar los siguientes estilos CSS, ya sabes donde hacerlo, desde Apariencia -> Personalizar -> CSS agregado

.single-product .woocommerce-breadcrumb {
display: none;
}

2. Los precios, tanto el tachado como el actual, así como la etiqueta "oferta" en lo alto y a la izquierda de la foto, deben reflejarse en el mismo color corporativo, c700ae.

Continuamos con los estilos personalizados

.woocommerce span.onsale {
background-color: #c700ae !important;
}
.single-product .price {
color: #c700ae !important;
}

3. Eliminar en los productos "mentorías" y "cursos" otros sugeridos que aparecen como "También te puede interesar" al pie de la página.

No logro ver este apartado, recuerdo en consultas pasadas esto ya lo habiamos abordado, si nos muestras donde aparece lo revisamos

Saludos!

Hola Bruno.

La próxima vez dejaré el enlace directo. Disculpa.

Los dos primeros puntos están resueltos y el tercero, misteriosamente, se arregló jajaja.

Gracias por todo.

Quería comentarte que la etiqueta "oferta" en "productos recomendados" al pie de la página del carrito, aparece a diferencia de las demás, a la derecha, tapando el título de uno de los tomos. Es siempre la saga la que recomiendo para todos los tomos.

¿Habría posibilidad de que citada etiqueta apareciese en lo alto de la imagen, pero a la izquierda, sin tapar el nombre de la saga, por favor?.

Por ejemplo, en la url que te adjunto aparece bien: https://franciscomvega.com/producto/saga-yo-me-amo-y-tu/

Te comparto url para que visualices el cambio a realizar: Contenido solo visible a usuarios registrados .

Gracias por todo.

Hola Francisco,

Agrega los siguientes estilos CSS para lograr el siguiente aspecto

.woocommerce ul.products li.product .onsale {
right: auto !important;
left: 0 !important;
margin: -10px !important;
}
.woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
text-align: center;
}
.woocommerce ul.products li.product .button {
background-color: #c700ae !important;
color: #fff !important;
}
.woocommerce-loop-product__title{
color: #000 !important;
}

Con eso deberiaa de bastar

Saludos!

Hola Bruno.

Gracias, y también porque aunque se me pasó comentarte que reflejaras los precios en el mismo color corporativo, lo hiciste.

Quería comentarte que la etiqueta "oferta" tapa el comienzo del nombre de la saga, haber si había posibilidad de rodarla: Contenido solo visible a usuarios registrados

Y que el botón "Añadir al carrito" debe estar ovalado por sus extremos. En el enlace que te acabo de compartir puedes observar que el botón en cuestión no es igual que el que se refleja en lo alto de la página.

Gracias por todo.

Hola Francisco, 

Hacía que espacio quieres moverlo, por ejemplo si quieres moverlo de esta forma puedes probar el siguiente código CSS

.woocommerce span.onsale {
top: -2.5em;
left: -1.5em;
}

Con respecto el botón lo veo totalmente ovalado en sus extremos

Un Saludo 

Hola Karen.

No, tal y como expliqué, me refiero a la etiqueta "oferta" de la imagen que aparece en la parte inferior de la página, así como el botón "Añadir al carrito" que se refleja debajo de tal imagen.

Hago referencia al botón que aparece en lo alto de la página, para que se observe que de esa forma debe quedar el que se debe corregir y que hice mención antes.

Gracias.

Que tal Francisco,

Continuemos con los ajustes que has solicitado para el apartado de productos recomendados

Para que tenga el siguiente aspecto

Aplica los siguientes estilos CSS

.upsells h2 {
padding-bottom: 50px;
}

Estos estilos ya existen valida que debas actualizarlos no debes repetir estilos o solo se aplicaran en jerarquia de arriba hacia abajo

.woocommerce ul.products li.product .onsale {
right: auto !important;
left: 0 !important;
margin: -30px !important;
}

.woocommerce ul.products li.product .button {
background-color: #c700ae !important;
color: #fff !important;
border-radius: 50px;
}

Saludos!

Hola Bruno.

Resuelto. Gracias.

Hola Francisco,

Excelente, cualquier otra duda estaremos atentos

Saludos!