Avisos
Vaciar todo

¿Cómo separar el campo de cantidad, y atributos del elemento de añadir el carrito en DIVI?  

 
César Manuel
 César Manuel
Usuario experto

Hola, alguien por favor sabe como poner por separados el campo de cantidad y los atributos a seleccionar (el color, la talla..) del elemento "añadir al carrito" con el constructor de divi, lo digo porque por defecto el elemento de "boton de añadir al carrito" de DIVI tiene la opción de que te aparezca el campo de cantidad o no, y siempre te sale acompañado de los atributos que tienes que seleccionar (talla, color etc)  pero no hay ninguna opción para que estos campos esten aislados.

Lo necesito porque me gustaría añadir un efecto rebote solo al botón de añadir al carrito, y que este botón estuviese solo como en el ejemplo que adjunto.

 

FIVER 5

Contenido solo visible a usuarios registrados

Citar
Respondido : 12/02/2021 3:44 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Cesar,

Disculpa no logro comprender muy bien la consulta,de manera el botón de añadir al carrito no puedes estar separado ya que esta relacionado con la variación que se seleccionar del producto y este se activará cuando se seleccione una de las opciones disponibles

Si es posible puedes detallarnos un poco mejor lo que deseas realizar? de esta forma podemos ayudarte con mayor detalle

Por otro lado veo que tu sitio web esta en mantenimiento, para poder comprobar lo que nos comentes necesitamos poder acceder y visualizarlo

Un Saludo

ResponderCitar
Respondido : 12/02/2021 3:54 pm

César Manuel
 César Manuel
Usuario experto

Hola @karen, lo que necesito es poder "separar" el campo de cantidad del botón de añadir al carrito de manera que no este en el lateral, como enseño en la foto, sino que este por encima del botón, para poder ampliar el botón al máximo.

 

El sitio es 

 

gimnasioalache.es/tienda

ResponderCitar
Respondido : 20/02/2021 3:19 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola César

¿ Puedes indicarnos una URL donde podamos verlo y hacer las pruebas?

Esto es lo que yo veo en al URL que indicas y no es lo mismo que muestras:

screenshot gimnasioalache.es 2021.02.20 16 47 18

 

Cada web es distinta y utiliza sus propias clases y necesitamos realizar las pruebas en al web donde se tiene que realizar la modificación.

Si lo que quieres es que el botón de la captura que te muestro no este junto al precio, añade lo siguiente:

.et_pb_wc_add_to_cart form.cart .button {
display:block!important;
margin-top: 1em;
}

 

El resultado seria este:

screenshot gimnasioalache.es 2021.02.20 16 57 55

 

Puedes añadirlo en Personalizar -> Css Adicional.

 

Un saludo

 

ResponderCitar
Respondido : 20/02/2021 3:59 pm

César Manuel
 César Manuel
Usuario experto

Hola @pepe muchas gracias por el aporte, si, tienes razón, esa no es la url de la pagina en la que necesito el cambio, es esta:

 

 

Lo que necesito es que el botón del añadir al carrito quede separado del campo de cantidad y ocupe el ancho completo, tanto el botón de añadir al carrito como el campo de cantidad, te adjunto un ejemplo.

 

Luego me gustaría si se pudiese, que solo el botón de añadir el carrito se quedase fijo (pegajoso) solo en vista para móviles sin las variaciones ni el campo de cantidad

asi en móvil
así en ordenador

 

Esta publicación ha sido modificada el hace 2 años por Pepe
ResponderCitar
Respondido : 25/02/2021 11:25 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola, 

Agrega el siguiente CSS desde Apariencia -> Personalizar -> CSS Adicional:

.quantity .qty{
max-width:100% !important;
width:100% !important;
}


.quantity{
max-width:100% !important;
width:100% !important;
}

button.single_add_to_cart_button {
width: 100% !important;
}

Respecto a:

Respondido por: @m-cesar_27hotmail-com

Luego me gustaría si se pudiese, que solo el botón de añadir el carrito se quedase fijo (pegajoso) solo en vista para móviles sin las variaciones ni el campo de cantidad

 

Disculpa si lo interpreto mal pero al sder un producto variable Woocommerce te pedirá forzosamente que elijas las opciones acrode a sus variaciones, por lo que quitar estos elementos el cliente no podría realizar la compra en los móviles.

Saludos

ResponderCitar
Respondido : 26/02/2021 1:25 am

César Manuel
 César Manuel
Usuario experto

Hola @bulmaro-webempresa, el código funciona perfectamente, te adjunto foto de cómo quedó. Aunque me gustaría poner antes del campo de cantidad, un texto que ponga "cantidad y que no ocupase toda la linea el selecionador de numeros, un poco como la foto que adjunto en la foto. Podrías recomendarme algún tutorial de como hacerlo por favor?

 

Y sobre lo último que te comentaba, el problema que tengo es que quiero hacer pegajoso el botón de añadir al carrito solo para móviles porque las variaciones ya las tengo selecionadas por defecto, y no es que quiera eliminar las variaciones del modulo del boton de "añadir al carrito" solo me gustaría separarlas de él, que estuviesen todas en el mismo módulo porque me gustaría añadirle al módulo el efecto de rebote, pero claro si añado el efecto de rebote al botón "añadir al carrito" se aplica también a las variaciones y al campo de cantidad. No se si me he explicado bien. ¿Podrían decirme como poner solo el efecto de rebote o zumbido al botón de "añadir al carrito" sin que afecte al campo de cantidad ni a las variaciones? ¿y como podría poner solo el botón de añadir al carrito como pegajoso en móviles?

Captura para Web Empresa 1

 

Captura para web empresa 2

Muchas gracias y un saludo. 

 

ResponderCitar
Respondido : 26/02/2021 8:00 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Cesar,

Verifica agregando el siguiente código en tu archivo functions.php:

add_action( 'woocommerce_before_add_to_cart_quantity', 'bbloomer_echo_qty_front_add_cart' );function bbloomer_echo_qty_front_add_cart() {
 echo '<div class="qty">Cantidad: </div>';
}

Adicional a esto puedes agregar el siguiente código css en Apariencias > Personalizar > Css adicional:

div.qty {
    float: left;
    padding: 10px;
}

Este css es cambiante, con respecto a tu consulta sobre el botón seria mejor abordarlo en un nuevo tema y que nos expliques un poco mejor lo que deseas.

Un saludo 🖐️ 

ResponderCitar
Respondido : 26/02/2021 8:47 pm

César Manuel
 César Manuel
Usuario experto

Hola @argenis, he probado el código de php y el css y queda así, justo encima del campo de cantidad, podría ponerse al lado como en el del ejemplo?

Y con lo otro tienes razón, abriré otro nuevo tema, muchisimas gracias!!!

Webempresa3

 

ResponderCitar
Respondido : 26/02/2021 9:20 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola,

Inserta el siguiente CSS desde Apariencia -> Personalizar -> CSS Adicional:

.woocommerce-page div.product form.cart div.quantity, .woocommerce div.product form.cart div.quantity {
   margin: 0px 0px 10px !important;
   width: 30% !important;
   float: right !important;

}

div.qty {
 /* top: -44px; */
   width: 70%;
   height: 40px;
float: left;
   padding: 10px;
 display: contents;
   font-weight: 700;
 color: black;
   margin: 0px 0px 10px !important;
}

Saludos 🙂

ResponderCitar
Respondido : 26/02/2021 11:00 pm