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

Question

我一直在重新格式化 Woocommerce 结帐页面上的优惠券代码框。它原本很大并且位于页面顶部，这是一种糟糕的设计，因为人们会看到大的优惠券代码框并离开您的网站去寻找优惠券，然后就再也不会回来了。

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

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

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

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

Answer 1

将此样式添加到您的主题 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;
}

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

添加这个：

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