首页 > 解决方案 > 在 WooCommerce 结帐中为特定选择的运输方式添加正文类

问题描述

基于Add a body class for specific selected shipping option in Woocommerce checkout answer code,我一直在使用以下代码片段:

add_filter( 'wp_footer','weekend_selected' );
function weekend_selected(){
    if( ! is_page( 8 ) ) return; // only on checkout

    $method_id = "''";
    // Find the Shipping Method ID for the Shipping Method label name 'Delivery price on request'
    foreach( WC()->session->get('shipping_for_package_0')['rates'] as $rate_key => $rate ){
        if( 'Saturdays DPD' == $rate->label ){
            $method_id = $rate_key;
            break;
        }
    }
    ?>
        <script type="text/javascript">
            (function($){
                // variables initialization
                var a = 'input[name^="shipping_method[0]"]',
                    b = a+':checked',
                    c = 'weekend-selected',
                    d = '<?php echo $method_id; ?>';

                if( $(b).val() == d )
                    $('body').addClass(c);
                else
                    $('body').removeClass(c);

                $( 'form.checkout' ).on( 'change', a, function() {
                    if( $(b).val() == d )
                        $('body').addClass(c);
                    else
                        $('body').removeClass(c);
                });
            })(jQuery);
        </script>
    <?php
}

但是我注意到它在页面加载时不再触发,我必须刷新页面才能触发它,这使它无用。

用例基本上是加载一个body标签(周末选择),然后隐藏(使用CSS)日历上的某些日子。

首先,我认为这是因为在添加地址之前没有加载运输选项,所以我预先填写了必填的地址字段以查看这是否是问题,但同样的事情发生了,我必须刷新页面才能触发代码。

标签: phpjquerywordpresswoocommerceshipping-method

解决方案


尝试以下简单轻巧的方式(不使用 Jquery)

add_filter( 'body_class', 'add_shipping_classes_to_body_class' );
function add_shipping_classes_to_body_class( $classes ) {
    // only on checkout page
    if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) 
        return; 
        
    $chosen_method  = WC()->session->get('chosen_shipping_methods')[0];
    $shipping_rates = WC()->session->get('shipping_for_package_0')['rates'];
   
    if( 'Saturdays DPD' === $shipping_rates[$chosen_method]->label ){
        $classes[] = 'weekend-selected';
    }
    return $classes;
}

代码位于活动子主题(或活动主题)的 functions.php 文件中。它应该更好地工作。

相关:在 WooCommerce 结帐页面上将运输类别添加到正文类别


推荐阅读