在订单审核之前在 WooCommerce 结帐页面上添加“继续购物”答案

【问题标题】：Add 'continue shopping' on WooCommerce checkout page before order review在订单审核之前在 WooCommerce 结帐页面上添加“继续购物”
【发布时间】：2021-11-16 19:55:21
【问题描述】：

我想在结帐页面上的订单审核之前添加“继续购物”/“添加产品”链接。但我希望它与“您的订单”文本内联。

看这个截图：https://ibb.co/47f6vd7

我试过这段代码：

add_action('woocommerce_checkout_order_review','woocommerce_checkout_before_order_review_add_product');
function woocommerce_checkout_before_order_review_add_product(){
    
    $continue_shopping_url = wc_get_page_permalink( 'shop' );
    $add_product_label = 'add product';

    if(!empty($continue_shopping_url)){
        echo "$add_product_label";
    }
}

但它显示在“您的订单”文本下方的行中。所以看起来很丑。

如何使用额外的 CSS 使其与“您的订单”文本内联？

【问题讨论】：

标签： css wordpress woocommerce hook-woocommerce

【解决方案1】：

首先你用错了钩子。

虽然woocommerce_checkout_order_review 会导致将文本添加到#order_review div 中，但woocommerce_checkout_before_order_review 挂钩会导致将其放置在#order_review div 之前。

所以你得到：

function action_woocommerce_checkout_before_order_review(){
    $continue_shopping_url = wc_get_page_permalink( 'shop' );
    $add_product_label = 'add product';

    if ( ! empty ( $continue_shopping_url ) ) {
        echo '<div class="my-label">' . $add_product_label . '</div>';
    }
}
add_action( 'woocommerce_checkout_before_order_review', 'action_woocommerce_checkout_before_order_review', 10, 0 );

您必须为此申请的 CSS 完全取决于主题，但是使用display: inline-block;肯定可以派上用场

【讨论】：

【解决方案2】：

确保您有a child theme 设置。然后，您可以通过 woocommerce_checkout_before_order_review 操作挂钩添加“继续购物”链接：

add_action( 'woocommerce_checkout_before_order_review', 'woocommerce_checkout_add_continue_shopping_link' );
function woocommerce_checkout_add_continue_shopping_link() {
    printf( '<a href="%s" class="checkout-continue-shopping">Continue shopping</a>', wc_get_page_permalink( 'shop' ) );
}

将上面的代码sn-p添加到你的子主题的functions.php中。然后处理子主题的 style.css 中的 CSS 样式。

比如这样：

body.woocommerce-checkout h3#order_review_heading {
    float: left;
    width: auto;
}

body.woocommerce-checkout a.checkout-continue-shopping {
    font-size: 0.8em;
    float: left;
    padding: 0.5em 1em;
    background: #444;
    text-decoration: none;
    color: white;
    margin-left: 2em;
    margin-top: 0.25em;
}

这将为您提供以下结果：

您可能还需要添加一些 CSS media queries 以使其在移动设备和平板电脑上看起来不错。

【讨论】：