php - 在 WooCommerce 结账时在 "Place Order"按钮下添加文本

Question

我想在 WooCommerce 结账时在“下订单”按钮下添加一些文本。

我正在使用 woocommerce_review_order_after_submit Hook :

add_action( 'woocommerce_review_order_after_submit', 'add_after_checkout_button' );

function add_after_checkout_button() {
echo '<p>By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}

结果(截图):https://ibb.co/F38bxDf

有人可以帮我编辑这段代码:

• 在顶部添加一些空间(在文本和“Place Order”之间)按钮)
• 居中对齐文本
• 将“服务条款”和“隐私政策”变成可点击的链接
• 降低文本的行高
• 减小字体大小

有没有办法给这个文本一个 CSS 类，这样我就可以用自定义 CSS 控制它的样式？或者是否有可能以某种方式在代码片段本身中键入自定义 CSS？

编辑:

我有 2 段代码。

第一名:

add_action( 'woocommerce_review_order_after_submit', 'add_after_checkout_button' );

function add_after_checkout_button() {

echo '<p class="text-under-place-order">By clicking on the purchase button, you agree to our <a href="https://www.exampledomain.com/terms-of-service/">Terms of Service</a> and <a href="https://www.exampledomain.com/privacy-policy/">Privacy Policy</a></p>';
}

和

2 号:

<script src="https://kit.fontawesome.com/5e15d2f246.js" crossorigin="anonymous"></script>

<div class="row">
    <div class="column">
        <i class="fas fa-lock"></i>
        SSL encrypted payment
    </div>
    <div class="column">
        <i class="fas fa-undo"></i>
        100% money-back guarantee
    </div>
</div>

代码片段 Nr 1 解决了我最初的问题。

代码片段 Nr 2 是根据我在评论中的要求在文本上方显示“加密支付”和“退款保证”的补充。

我不知道如何将这 2 段代码合并为 1 段。

Answer 1

你可以像这样添加一个类:

function add_after_checkout_button() {
    echo '<p class="yourClassName">By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}

或者像这样使用内联 css:

function add_after_checkout_button() {
    echo '<p style="padding-top: 10px;">By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}

要将文本转换为链接，只需使用 <a href="link">Terms and Service</a>标签里面，就像你已经对 <p> 所做的一样.

编辑:根据评论中的要求添加“加密支付”和“退款保证”的 HTML 和 CSS 代码:

<script src="https://kit.fontawesome.com/5e15d2f246.js" crossorigin="anonymous"></script>

<div class="row">
    <div class="column">
        <i class="fas fa-lock"></i>
        SSL encrypted payment
    </div>
    <div class="column">
        <i class="fas fa-undo"></i>
        100% money-back guarantee
    </div>
</div>

.row {
    display: flex;
    text-align: center;
}

.column {
    flex: 50%;
}