How to move quantity input field next to add to cart button - wordpress

user_1096892 0
Viewed 1108

enter image description here

How do I move an input field container next to a button so they're inline and touching each other? As you can see not been able to get the above right with the code below.

.archive .woocommerce-variation-add-to-cart{
        display:inline-flex;
}
.archive .qib-container, .archive .single_add_to_cart_button{
  float:left;
}
<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
 <div class="qib-container">
   <button type="button" class="minus qib-button">-</button>
   <div class="quantity buttons_added">
    <label class="screen-reader-text" for="quantity_610094fe7a505">Espresso Taster Pack (x3 Bags) quantity</label>
    <input type="number" id="quantity_610094fe7a505" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" placeholder="" inputmode="numeric">
    <span class="q_inc"></span><span class="q_dec"></span></div>
    <button type="button" class="plus qib-button">+</button>
 </div>
        
 <button type="submit" class="single_add_to_cart_button button alt">Add to Cart</button>
</div>

woocommerce wordpress css html
4 Answers
user_34433190

In your case you simply need to make .qib-container and .woocommerce-variation-add-to-cart a flexbox container and adjust the width of the input :

.woocommerce-variation-add-to-cart {
  display: flex;
}

.qib-container {
  display: flex;
}

input.qty {
  width: 30px;
}

Here is the full example:

.woocommerce-variation-add-to-cart {
  display: flex;
}

.qib-container {
  display: flex;
}

input.qty {
  width: 30px;
}
<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
  <div class="qib-container">
    <button type="button" class="minus qib-button">-</button>
    <div class="quantity buttons_added">
      <input type="number" id="quantity_610094fe7a505" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" placeholder="" inputmode="numeric">
      <span class="q_inc"></span><span class="q_dec"></span></div>
    <button type="button" class="plus qib-button">+</button>
  </div>

  <button type="submit" class="single_add_to_cart_button button alt">Add to Cart</button>
</div>

user_85836690

Since you only provided HTML code and not the CSS, I made my own CSS that may help you place the quantity text field next to the "Add to cart" button, while also slightly editing the HTML file.

Edited HTML:

<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
    <div class="qib-container">
        <button type="button" class="minus qib-button">-</button>
        <div class="quantity buttons_added">
            <button class="screen-reader-text" for="quantity_610094fe7a505">Espresso Taster Pack (x3 Bags) quantity
                <input type="number" id="quantity_610094fe7a505" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" placeholder="" inputmode="numeric">
            </button>          
            <span class="q_inc"></span><span class="q_dec"></span>
        </div>
        <button type="button" class="plus qib-button">+</button>
        <button type="submit" class="single_add_to_cart_button button alt">Add to Cart</button>
    </div>
</div>

All I did here was change the label to a button (though the label text does not appear on the image you sent) and placed the text box inside of it. I also added the Add to Cart button inside of the container.

As for styling:

<style>
.qib-container button {
        background-color: #04AA6D; /* Green background */
        border: 1px solid green; /* Green border */
        color: white; /* White text */
        padding: 10px 24px; /* Some padding */
        cursor: pointer; /* Pointer/hand icon */
        float: left; /* Float the buttons side by side */
    }

    .qib-container button:not(:last-child) {
        border-right: none; /* Prevent double borders */
    }

    /* Clear floats (clearfix hack) */
    .qib-container:after {
        content: "";
        clear: both;
        display: table;
    }

    /* Add a background color on hover */
    .qib-container button:hover {
        background-color: #3e8e41;
    }
</style>

I added some features to the container that make everything appear side by side. Assuming you change the colors and sizes to fit your need, I think this fixes your problem of the buttons not appearing side by side, but let me know if I interpreted your problem wrong.

This is how it looks: enter image description here

user_146451010 

.qib-container {display: inline- 
block;}
.quantity {float: left;}
.single_add_to_cart_button 
{background-color: 
green; border-radius: 10px;
box-shadow: 0px 4px 6px rgba(0, 
0, 0, 0.5);}
input.qty {width: 30px;}
<div class="woocommerce- 
variation-add-to-cart 
variations_button 
woocommerce-variation-add-to- 
cart-enabled">
<div class="qib-container"><label 
class="screen-reader-text" 
for="quantity_610094fe7a505">
Espresso Taster Pack (x3 Bags) 
<br><br></label><button 
type="button" class="minus qib- 
button">- 
</button><button type="button" 
class="plus qib-button">+ 
</button>
<div class="quantity 
buttons_added">
<input type="number" 
id="quantity_610094fe7a505" 
class="input- 
text qty text" step="1" min="1" 
max="" name="quantity" value="1" 
title="Qty" size="4" 
placeholder="" 
inputmode="numeric">
<span class="q_inc"></span><span 
class="q_dec"></span></div>
</div><br>
<button type="submit" 
class="single_add_to_cart_button 
button 
alt">Add to Cart</button>
</div>

user_112395900
Related