Php 在“下添加文本”；下单“；在WooCommerce结帐处的按钮

我想在WooCommerce结帐处的“下订单”按钮下添加一些文本

我在提交后使用

woocommerce\u review\u order\u

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

add_操作（'woocommerce_review_order_after_submit'，'add_after_checkout_button'）；
函数“签出后添加”按钮（）{
echo'点击购买按钮，表示您同意我们的服务条款和隐私政策
；
}

结果（截图）：

请有人帮我编辑此代码，以便：

• 在顶部（文本和“下订单”之间）添加一些空格 按钮）
• 将文本居中对齐
• 将“服务条款”和“隐私政策”变成可点击的链接
• 减小文本的行高
• 减小字体大小

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

编辑：

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

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

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

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

add_操作（'woocommerce_review_order_after_submit'，'add_after_checkout_button'）；
函数“签出后添加”按钮（）{
echo“
点击购买按钮，表示您同意我们的和；
}

及

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

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

SSL加密支付
100%退款保证

代码片段nr1解决了我最初的问题

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

---

我不知道如何将这两段代码合并为一段。

您可以添加如下类：

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

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

函数在签出按钮（）后添加{
echo“
点击购买按钮，表示您同意我们的服务条款和隐私政策
”；
}

或者像这样使用css内联：

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

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

函数在签出按钮（）后添加{
echo'
点击购买按钮，表示您同意我们的服务条款和隐私政策；
}

要将文本转换为链接，只需在内部使用

标记，就像您已经使用

一样

编辑： 添加“加密付款”和“退款保证”的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%;
}

SSL加密支付
100%退款保证
.行{
显示器：flex；
文本对齐：居中；
}
.栏目{
弹性：50%；
}

您可以添加如下类：

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

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

函数在签出按钮（）后添加{
echo“
点击购买按钮，表示您同意我们的服务条款和隐私政策
”；
}

或者像这样使用css内联：

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

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

函数在签出按钮（）后添加{
echo'
点击购买按钮，表示您同意我们的服务条款和隐私政策；
}

要将文本转换为链接，只需在内部使用

标记，就像您已经使用

一样

编辑： 添加“加密付款”和“退款保证”的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%;
}

SSL加密支付
100%退款保证
.行{
显示器：flex；
文本对齐：居中；
}
.栏目{
弹性：50%；
}

您只需在标记中添加一个类，并在子主题的style.css文件中设置它的样式即可。

---

对于链接，只需在“服务条款”和“隐私政策”的周围添加标签

，

您只需在标签

中添加一个类，并在子主题的style.css文件中设置其样式即可。

---

对于链接，只需在“服务条款”和“隐私政策”周围添加标签即可。

Hi@crossi100。谢谢你的回答，一切顺利。我还想在文本上方添加类似的内容：这可能吗？当然可以，@JOKKER。看看这个。我使用Fontsomeous是因为他们的自由设置中有两个图标。你可以使用任何你想要的图标库。您可能需要稍微调整一下样式以获得正确的文本位置。如果代码笔不可用，我也会将这段代码编辑成答案。新的HTML代码片段应该放在以前的代码中的什么地方？嘿@crossi100。很抱歉打扰您，但我似乎不知道如何将2段代码合并为1段。你能帮我一下吗？我试图将新的HTML代码放置在前一个代码段的不同位置时出错。很抱歉，不知怎的错过了您的第一条注释@JOKKER。我创建了一个新的。我将CSS类替换为内联样式，这样您就可以将完整的html代码复制粘贴到echo中（脚本标记除外）。您需要将脚本标记添加到html的头部。当你使用WordPress时，你应该会在谷歌上找到几十个教程，向你解释如何添加新的内容。请注意，我也不是CSS专家，我只是把一些东西放在一起，从一个角度看，看起来还行。这可能需要一些微调。Hi@crossi100。谢谢你的回答，一切顺利。我还想在文本上方添加类似的内容：这可能吗？当然可以，@JOKKER。看看这个。我使用Fontsomeous是因为他们的自由设置中有两个图标。你可以使用任何你想要的图标库。您可能需要稍微调整一下样式以获得正确的文本位置。如果代码笔不可用，我也会将这段代码编辑成答案。新的HTML代码片段应该放在以前的代码中的什么地方？嘿@crossi100。很抱歉打扰你，但我似乎不明白