如何在添加到购物车按钮旁边移动数量输入字段 - wordpress

Posted 2023-03-05

【中文标题】如何在添加到购物车按钮旁边移动数量输入字段 - wordpress

【英文标题】：How to move quantity input field next to add to cart button - wordpress

【发布时间】：2021-10-03 18:00:45

【问题描述】：

如何将输入字段容器移动到按钮旁边，以便它们内联并相互接触？如您所见，使用下面的代码无法获得上述权利。

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

【参考方案1】：

由于您只提供了 html 代码而不提供 CSS，因此我制作了自己的 CSS，可以帮助您将数量文本字段放置在“添加到购物车”按钮旁边，同时还可以稍微编辑 HTML 文件。

编辑的 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>

我在这里所做的只是将标签更改为按钮（尽管标签文本不会出现在您发送的图像上）并将文本框放在其中。我还在容器内添加了“添加到购物车”按钮。

关于造型：

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

我为容器添加了一些功能，使所有内容都并排显示。假设您更改颜色和尺寸以满足您的需要，我认为这可以解决您的按钮未并排显示的问题，但如果我对您的问题的解释有误，请告诉我。

这是它的外观：

【参考方案2】：

这个怎么样？使按钮和输入向左浮动。

https://jsfiddle.net/62quL5yn/

input, button float: left;

【参考方案3】：

在您的情况下，您只需将 .qib-container 和 .woocommerce-variation-add-to-cart 设为 flexbox 容器并调整输入的 width ：

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


.qib-container 
  display: flex;


input.qty 
  width: 30px;

这里是完整的例子：

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

【参考方案4】：

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