Question

我已经在Woocommerce结帐页面上重新格式化优惠券代码框。这本来是巨大的，在页面顶部，这是一个糟糕的设计，因为人们会看到大优惠券代码框，让你的网站去寻找优惠券，然后永远不会回来。

我有我想要的优惠券盒，如果你按回车就可以正常工作。问题是您无法看到“应用”按钮。它位于优惠券代码框的正下方。如果将鼠标悬停在它上面，则会出现小手形光标。你无法看到它。

如何让按钮显示在桌面上优惠券代码框的右侧？它会在移动设备上被推到它下面。

您必须在购物车中添加商品才能看到结帐页面：http://198.199.114.131/shop/

结帐页面：http://198.199.114.131/checkout/

Answer 1

添加：

input[name="apply_coupon"] {
    opacity: 1 !important;
    float: left;
    background-color: bisque !important;
    min-width: 100%;
    margin-top: 1em !important;
}

Answer 2

从我所看到的，background: none !important;不会让你看到优惠券附近的任何东西。删除那段代码，你可以看到按钮，但按钮上没有文字。

要将按钮放在优惠券代码输入框下，请删除您指定它的background: none !important;，然后在主题的自定义CSS或子主题的CSS文件中添加以下代码：

.woocommerce-cart .entry-content .woocommerce .actions .coupon .button {
    top: 60px;
}

目前，指定了top: 3px;。

要显示文本，请将此代码添加到主题的自定义CSS或子主题的CSS文件中：

.woocommerce-cart .entry-content .woocommerce .actions .coupon .button:before {
    content: "Apply Coupon";
}

您可以将Apply Coupon文字更改为您要在其中显示的文字。

我上面提供的是一种解决方法，因为我不知道您在重新格式化过程中对优惠券框进行了哪些编辑，但它应该可以解决您的问题。

希望这有帮助。

Answer 3

将此样式添加到主题style.css或任何前端自定义css文件中：

form.checkout_coupon input[type="submit"] {
    opacity: 1 !important;
    color: #fff !important;
    background-color: #dba633 !important;
    width: 48% !important;
}
form.checkout_coupon{
    width:100% !important;
}
form.checkout_coupon #coupon_code{
    width:50% !important;
}

应用优惠券按钮在Woocommerce Checkout上消失了

3 个答案: