[Resuelto] Plugin product bundles rompe css

Hola Pedro, 

Ya que la estructura es muy especifica y mueve los elementos en diferentes blooques es posible necesites editar y modifcar esto no solo con CSS si no la plantilla como tal, sin embargo prueba si el sigueinte codigo CSS te permite mover lo que entiendo quieres ubicar que es la metadata del producto

body.postid-13508 .elementor-element-5435ff01 > .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}

body.postid-13508 .elementor-element-94a8762 {
order: 999 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
align-self: stretch !important;

position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;

margin: 12px 0 0 0 !important;
padding: 0 !important;
clear: both !important;
}

body.postid-13508 .elementor-element-94a8762 .elementor-widget-container {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}

body.postid-13508 .elementor-element-94a8762 .product_meta {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: center !important;

width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;

gap: 4px 10px !important;
font-size: 12.5px !important;
line-height: 1.35 !important;
text-align: left !important;
color: #000 !important;
box-sizing: border-box !important;
}

body.postid-13508 .elementor-element-94a8762 .product_meta > span {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
font-weight: 700 !important;
color: #000 !important;
}

body.postid-13508 .elementor-element-94a8762 .product_meta .sku,
body.postid-13508 .elementor-element-94a8762 .product_meta .detail-content,
body.postid-13508 .elementor-element-94a8762 .product_meta .detail-content a,
body.postid-13508 .elementor-element-94a8762 .product_meta a {
font-weight: 400 !important;
color: #000 !important;
text-decoration: none !important;
}

body.postid-13508 .elementor-element-94a8762,
body.postid-13508 .elementor-element-94a8762 * {
float: none !important;
}

@media (max-width: 767px) {
body.postid-13508 .elementor-element-94a8762 {
margin-top: 10px !important;
}

body.postid-13508 .elementor-element-94a8762 .product_meta {
font-size: 12px !important;
gap: 4px 8px !important;
}

body.postid-13508 .elementor-element-94a8762 .product_meta > span {
white-space: normal !important;
}
}

Revisa con este y nos comentas como va todo

Un Saludo

Gracias.  Probare. Te paso la respuesta de los creadores del plugin

El div “sku” está fuera del div “populated” en la página del paquete de productos.

Consulte la captura de pantalla adjunta para obtener más información.

https://ibb.co/d42JRmg2

Después de colocar el div “sku” en el lugar correcto (dentro del div “populated”), funciona correctamente.

Que tal Pedro,

Considerando que el ajuste es de nivel estructural para lograr lo deseado, probablemente no solo sea suficiente el aplicar estilos CSS

Tal como sugiere el soporte del plugin se debe insertar el div correspondiente al contenedor para que se muestre de manera correcta

Si con los estilos sugeridos no logras dar con el resultado, toca contemplar un ajuste a medida, el cual lamentablemente no podemos ofrecer directamente por este medio

Sin embargo, siempre puedes elevar tu solicitud a nuestros colaboradores, que con gusto podran ver tu caso

https://www.webempresa.com/directorio-colaboradores.html

Saludos!

Una pena no funciona, ¿y si intentamos eliminar de este producto el div product meta para que se pueda estirar el div populated y así después modificar a:

display: grid;
grid-template-columns: repeat(3, 1fr)

solo es una idea

Hola Pedro, 

Es una alternativa, porque este contenedor de Elementor que tienes en el producto no es compatible con el plugin, puedes probar eliminarlo para este producto con el siguiente codigo CSS

.postid-13508 .elementor-element.elementor-element-94a8762.elementor-woo-meta--view-inline.elementor-widget.elementor-widget-woocommerce-product-meta {
display: none !important;
}

Verificalo y nos comentas como va todo

Un Saludo 

funciona, faltaría que en móvil dos productos por columna y en ordenador 3. y si es posible me gastaría controlar tamaño y colores de esta parte:

muchas gracias

Que tal Pedro,

faltaría que en móvil dos productos por columna y en ordenador 3.

En este caso te recomendaría reducir el padding aplicado en el contenedor general, en este momento esta a 70px, puedes reducirlo a unos 30px

Imagen de referencia 

y si es posible me gastaría controlar tamaño y colores de esta parte:

Puedes especificarnos que ajustes deseas aplicar sobre cada elemento? de esta forma por medio del inspector del navegador podremos identificar el elemento y sus clases asociadas y asi estipular estilos CSS directos

Saludos!

Hola, quiero conseguir que se parezca lo máximo posible a las paginas de la misma categoría.

ejem

Tela Mariposas Verde 50x74cm - Mercería Ninot

He probado a padding 30px en herramientas de desarrolladores pero al cambiar a movil se cambia a 4 productos

Hola Pedro, 

Dando continuidad el tema principal de la consulta para obtener un aspecto como el siguiente (dejo imagen de referencia)

Debes aplicar los siguientes estilos CSS

.asnp-App-GridItem-wrapper .asnp-bundle-item {
width: 100% !important;
max-width: 100% !important;
}
.asnp-App-GridItem-wrapper {
display: grid !important;
grid-template-columns: repeat(3, 1fr); 
gap: 16px !important;
}

.asnp-BundleGridItem-ProductBox {
margin: 0 auto;
}

@media (max-width: 768px) {
.asnp-App-GridItem-wrapper {
grid-template-columns: repeat(2, 1fr) !important;
}
}

Recordar que el padding del contenedor debe ser de 30px, tal como se hizo la sugerencia en el comentario anterior

Saludos!

Hola. Me puedes ayudar con el cambio de padding? Porque lo se hacer en herramientas de desarrollador pero no consigo encontrar el código correcto para aplicarlo solo en este producto en apariencia/personalizar. Gracias

Hola Pedro.

Si quieres que un código CSS se aplique solo a un producto lo tienes que hacer por el id del producto

.- Edita el producto al que quieres aplicar ese CSS:

.- En la URL veras el ID de ese producto:

Con ese ID podemos construir el código que afectará solo a ese producto, por ejemplo:

.post-32 h1.product_title.entry-title.elementor-heading-title.elementor-size-small{
display:none!important;
}

Un saludo

en herramientas de desarrollador si lo cambien el padding pero no soy capaz en paraciencia/personalizar. no es lo mio 🙁

Hola Pero, 

En este caso la solución no es quitar el padding sino añadir el ancho definido a cada contenedor de los productos para que el mismo contendor padre lo ubique en 4 columnas como quieres en movil, para ello prueba si el suguiente codigo te permite añadir lo que necesitas

@media (max-width: 768px) {
.postid-13508 .asnp-BundleGridItem-ProductBox.asnp-medium {
width: 86px;
}
}

Un Saludo 

2 columnas en movil y 3 en ordenador