如何为WooCommerce我的账户订单页新增操作按钮添加唯一CSS类

方法1：使用WooCommerce自动生成的专属类（最简单） #

WooCommerce渲染我的账户页订单操作按钮时，会自动将你定义的操作标识$action_slug作为后缀生成专属CSS类，你的示例中$action_slug = 'specific_name'，对应按钮默认会携带button-specific_name类，直接针对该类写样式即可，不会影响其他原有按钮：

/* 仅匹配你新增的自定义按钮 */
.woocommerce-orders-table .button.button-specific_name {
    /* 下方填写你的自定义样式 */
    background: #007cba;
    color: #ffffff;
    border-radius: 4px;
    padding: 6px 12px;
}

方法2：手动添加自定义CSS类（灵活度更高） #

如果需要自定义专属类名，可以通过WooCommerce提供的钩子修改按钮HTML，额外注入你需要的类：

// 将钩子名中的specific_name替换为你自己的$action_slug值
add_filter( 'woocommerce_my_account_my_orders_action_specific_name', 'add_custom_class_to_custom_order_btn', 10, 3 );
function add_custom_class_to_custom_order_btn( $button_html, $order, $action ) {
    // 给按钮新增custom-order-action-btn类，可自定义类名
    $button_html = str_replace( 'class="button ', 'class="button custom-order-action-btn ', $button_html );
    return $button_html;
}

添加完上述代码后，就可以用自定义类名写CSS样式：

.woocommerce-orders-table .button.custom-order-action-btn {
    /* 自定义样式 */
}

注意事项 #

• CSS代码可以放到主题自定义面板的「额外CSS」输入框，或者子主题的style.css文件中
• 修改后如果页面有缓存，清理缓存即可看到效果

内容的提问来源于stack exchange，提问作者Nima