本文旨在指导 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。
步骤：
- 复制模板文件： 将 woocommerce/templates/myaccount/orders.php 文件复制到你的主题目录下的 yourtheme/woocommerce/myaccount/ 目录中。
- 修改模板代码： 在复制后的 orders.php 文件中，找到以下代码（通常在 69-71 行，基于 WooCommerce 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>';
}
}这段代码会检查当前操作按钮的 slug 是否为 specific_name。如果是，则只应用 specific_name 类，否则应用默认的 woocommerce-button button 类。
注意事项：
- 修改 WooCommerce 模板文件需要谨慎操作，确保备份原始文件，以防出现意外情况。
- 如果 WooCommerce 版本更新，模板文件可能会发生变化，需要重新检查并修改代码。
- 这种方法可以让你完全控制按钮的 CSS 类，从而实现更灵活的样式定制。
总结
本文介绍了两种为 WooCommerce 我的账户订单操作按钮添加自定义 CSS 类的方法。第一种方法简单快捷，通过操作按钮的 slug 作为 CSS 类进行样式覆盖。第二种方法更加灵活，通过修改 WooCommerce 模板文件来移除默认的 CSS 类。选择哪种方法取决于你的具体需求和对样式的控制程度。希望本文能够帮助你更好地定制 WooCommerce 的外观。
