Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How to move quantity input field next to add to cart button – wordpress – Woocommerce

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>
Tags:

4

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    How about this? Make the buttons and inputs float left.

    https://jsfiddle.net/62quL5yn/

    input, button {float: left;}
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0 
    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search