在WooCommerce结帐"Place Order"按钮下添加文本

Question

我想在"下订单"按钮。

我正在使用woocommerce_review_order_after_submit钩子:

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

谁能帮我把这个代码编辑成:

• 在顶部(文本和"下订单"之间)添加一些空格。按钮)
• 居中对齐文本
• Turn"服务条款";及"隐私政策";变成可点击的链接
• 降低文本的行高
• 减小字体大小

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

编辑:

我有两段代码。

Nr 1:

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>';
}

和

Nr 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是显示"加密支付"的附加功能;以及"退款保证"。

我不知道如何把这两段代码合并成一个。

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

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%;
}

Answer 2

您应该只是添加一个类到您的标记<p></p>和样式在您的子主题的style.css文件。对于链接，只需在"服务条款"周围添加<a href="your-link"></a>标签即可。及"私隐政策">