本文旨在指导 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 '' . 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 的外观。
以上就是为 WooCommerce 我的账户订单操作按钮添加自定义 CSS 类的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1269122.html
微信扫一扫 
支付宝扫一扫 
