根据 Woocommerce 管理订单列表中的付款方式更改背景颜色链接

Question

有没有办法根据选择的付款方式更改管理页面表格上的订单视图颜色链接，目前我有2种付款方式：贝宝和货到付款。

IF

付款方式“货到付款”

==>

更改背景颜色链接红色

ELSEIF

付款方式“Paypal”

==>

更改背景颜色链接绿色。

这是一个例子：

Answer 1

我知道有点晚了，但也许我的答案对其他人有帮助。我在 4.9.8 版本中使用 Wordpress，在 3.4.4 版本中使用 WooCommerce

没有直接的方法来更改订单视图链接，但使用一点 JavaScript 和 CSS 就可以更改链接。

我的想法：

我为每种付款方式添加了一个 CSS 类作为订单列的隐藏字段。然后，我使用 JavaScipt 检测订单视图链接，并将 CSS 类添加到该链接。

代码：

插件 PHP 文件：

/**
 * Add payment method as hidden field
 */
function my_function_to_add_the_payment_method($column)
{
    // the hidden field is only added in the order column
    if($column == 'order_number' )
    {
        global $post, $the_order;

        // order data
        if ( empty( $the_order ) || $the_order->get_id() !== $post->ID ) {
            $the_order = wc_get_order( $post->ID );
        }

        // only continue if the order is not empty
        if ( empty( $the_order ) ) {
            return;
        }

        // the WooCommerce standard payment methods are:
        // bacs     => Direct bank transfer
        // cod      => Cash on delivery
        // paypal   => Paypal
        // cheque   => Check payments

        // add payment method as hidden field 
        // JavaScript can add the css class from the data attribute to the a.order-view link
        echo '<input type="hidden" class="my-hidden-payment-method" name="my-hidden-payment-method" data-class="css-'. esc_attr( $the_order->get_payment_method() ) .'" value="'. esc_attr( $the_order->get_payment_method() ) .'" />';

    }
}

/**
 * hook to add the payment method to the order
 */
add_action('manage_shop_order_posts_custom_column', 'my_function_to_add_the_payment_method');

/**
 * Add JavaScript and CSS
 */
function my_function_to_add_the_js_file($hook)
{
    if( is_admin() AND $hook == 'edit.php' AND $_GET['post_type'] == 'shop_order' )
    {
        // add JavaScript file and CSS file only on the "WooCommerce order overview" page (WooCommerce -> Order)

        // JS
        wp_enqueue_script( 'my_payment_script', plugin_dir_url(__FILE__) ."/js/my-payment-script.js", array('jquery'), NULL, true );

        // CSS
        wp_enqueue_style( 'my_payment_style', plugin_dir_url(__FILE__) ."/css/my-payment-style.css", array(), '1.0', 'all' );
    }
}

/**
 * hook to add the javascript and CSS file
 */
add_action( 'admin_enqueue_scripts', 'my_function_to_add_the_js_file' );

Javascipt“/js/my- payment-script.js”：

(function( $ ) {
    'use strict';

    // runs over every hidden field with the class "my-hidden-payment-method"
    $('.my-hidden-payment-method').each(function(i, obj) {

        var $element = $(this);

        // copy the css class form hidden field to the order-view link
        $element.siblings('a.order-view').addClass( $element.data('class') );

    });


})( jQuery );

CSS“/css/my- payment-style.css”：

.css-bacs, .css-cod, .css-paypal, .css-cheque
{
    padding: 10px;
    border-radius: 10px;
    color: white;
}

.css-bacs {
    background-color: yellow;
}

.css-cod {
    background-color: red;
}

.css-paypal {
    background-color: green;
}

.css-cheque {
    background-color: blue;
}

结果：

Answer 2

这是一个很棒的功能，我来寻找类似的功能，我正在处理 woocommerce 订单，并丢失周六发货的订单。我在描述的两侧添加了 ****，但订单页面上突出显示不同运输类别的内容将为我省去很多麻烦！