WooCommerce 订单按钮自定义 CSS 类添加方法

本文旨在指导 WooCommerce 开发者如何为“我的账户”页面订单列表中的自定义操作按钮添加唯一的 CSS 类，从而实现针对特定按钮的样式定制，避免影响其他按钮的默认样式。文章将提供两种方法：一种是通过操作按钮的 slug 作为 CSS 类进行样式覆盖，另一种是通过修改 WooCommerce 模板文件来移除默认的 CSS 类，从而实现更精细的控制。

添加自定义操作按钮

首先，你需要使用 woocommerce_my_account_my_orders_actions 过滤器来向“我的账户”订单列表添加自定义操作按钮。以下代码展示了如何添加一个名为 specific_name 的按钮：

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

这段代码会将一个链接添加到每个订单的“操作”列中。 url 属性定义了链接的目标地址，name 属性定义了按钮上显示的文本。 action_slug 用于定义按钮的唯一标识符，稍后我们将使用它来添加自定义 CSS 样式。

方法一：使用 Slug 作为 CSS 类进行样式覆盖

WooCommerce 会自动将操作按钮的 slug 添加为 CSS 类。因此，你可以使用以下 CSS 选择器来针对特定按钮应用样式：

.woocommerce-account table.account-orders-table .specific_name {
    color: red; /* 示例：将按钮文本颜色设置为红色 */
}

通过这种方式，你可以轻松地覆盖现有 CSS 样式，并为你的自定义按钮添加独特的外观。

注意事项：

• 确保 CSS 选择器的优先级高于 WooCommerce 的默认样式，以便你的样式生效。
• 你可以根据需要修改 CSS 属性，例如 background-color、font-size 等。

方法二：修改 WooCommerce 模板文件移除默认 CSS 类

如果你需要更精细的控制，例如完全移除默认的 CSS 类，则需要覆盖 WooCommerce 的模板文件 myaccount/orders.php。

步骤：

1. 复制模板文件： 将 woocommerce/templates/myaccount/orders.php 文件复制到你的主题目录下的 yourtheme/woocommerce/myaccount/ 目录中。
2. 修改模板代码： 在复制后的 orders.php 文件中，找到以下代码（通常在 69-71 行，基于 WooCommerce 3.7.0 版本）：

foreach ( $actions as $key => $action ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
    echo '' . esc_html( $action['name'] ) . '';
}

将其替换为以下代码：

foreach ( $actions as $key => $action ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
    // Compare
    if ( $key == 'specific_name' ) {
        echo '' . esc_html( $action['name'] ) . '';
    } else {
        echo '' . esc_html( $action['name'] ) . '';
    }
}

这段代码会检查当前操作按钮的 slug 是否为 specific_name。如果是，则只应用 specific_name 类，否则应用默认的 woocommerce-button button 类。

注意事项：

• 修改 WooCommerce 模板文件需要谨慎操作，确保备份原始文件，以防出现意外情况。
• 如果 WooCommerce 版本更新，模板文件可能会发生变化，需要重新检查并修改代码。
• 这种方法可以让你完全控制按钮的 CSS 类，从而实现更灵活的样式定制。

总结

本文介绍了两种为 WooCommerce 我的账户订单操作按钮添加自定义 CSS 类的方法。第一种方法简单快捷，通过操作按钮的 slug 作为 CSS 类进行样式覆盖。第二种方法更加灵活，通过修改 WooCommerce 模板文件来移除默认的 CSS 类。选择哪种方法取决于你的具体需求和对样式的控制程度。希望本文能够帮助你更好地定制 WooCommerce 的外观。