根据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;
}

结果：