将具有唯一 CSS class 的操作按钮添加到 WooCommerce 我的帐户订单

Question

这是我向订单页面添加选项的函数：

add_filter( 'woocommerce_my_account_my_orders_actions', 'add_my_account_my_orders_custom_action', 10, 2 );
function add_my_account_my_orders_custom_action( $actions, $order ) {
    $action_slug = 'specific_name';

    $actions[$action_slug] = array(
        'url'  => home_url('/the_action_url/'),
        'name' => 'The Button Text',
    );
    return $actions;
}

我的问题是：如何将自定义 CSS 添加到新创建的选项中

（除了我的按钮，还有其他3个按钮我不想改变它们的样式，所有4个都具有相同的class）。

Answer 1

使用 $action_slug = 'specific_name'; 会自动将其作为 class 添加到按钮。

那么你可以使用下面的选择器

.woocommerce-account table.account-orders-table .specific_name {
    color: red;
}

具体应用 CSS 或覆盖现有 CSS

要执行相反的操作并删除此特定按钮的某些 classes，除了现有代码

之外，您还需要覆盖模板文件 /myaccount/orders.php

可以通过将其复制到 yourtheme/woocommerce/myaccount/orders.php 来覆盖此模板。

替换第 69 - 71 行 @version 3.7.0

foreach ( $actions as $key => $action ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
    echo '<a href="' . esc_url( $action['url'] ) . '" class="woocommerce-button button ' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>';
}

有

foreach ( $actions as $key => $action ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited                                   
    // Compare
    if ( $key == 'specific_name' ) {
        echo '<a href="' . esc_url( $action['url'] ) . '" class="' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>';                                         
    } else {
        echo '<a href="' . esc_url( $action['url'] ) . '" class="woocommerce-button button ' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>';
    }
}

Answer 2

在前端显示按钮时，操作键被分配为类名，因此您可以根据操作键分配不同的CSS，如下所示：

.shop_table .button.specific_name {
 color: #fff;
}

将具有唯一 CSS class 的操作按钮添加到 WooCommerce 我的帐户订单

Add an action button with a unique CSS class to WooCommerce my account orders

css

php

wordpress

orders

woocommerce