时间戳

首页 > 解决方案 > 在订单审核之前在 WooCommerce 结帐页面上添加“继续购物”

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

问题描述

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

看到这个截图：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 使其与“您的订单”文本内联？

标签： csswordpresswoocommercehook-woocommerce

解决方案

首先，您使用了错误的钩子。

虽然woocommerce_checkout_order_review会导致文本被添加到#order_reviewdiv 中，但woocommerce_checkout_before_order_review钩子会导致它被放置在#order_reviewdiv 之前。

所以你得到：

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;肯定会派上用场

推荐阅读