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

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

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

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:

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:

Puedes añadirlo en Personalizar -> Css Adicional.

Un saludo

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

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

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?

Muchas gracias y un saludo. 

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

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!!!

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;
}