为 WooCommerce 我的账户订单页面添加具有唯一 CSS 类的操作按钮

本文将指导您如何在 WooCommerce 的“我的账户”订单页面上添加一个自定义操作按钮，并巧妙应用唯一的 CSS 类，以便您可以针对该按钮进行特定的样式设置，而不会影响其他按钮的样式。文章将提供详细的代码示例和步骤，帮助您轻松实现此功能。添加自定义操作按钮

首先，我们需要使用woocommerce_my_account_my_orders_actions 过滤器来添加自定义操作按钮。以下代码示范了如何实现：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 = '具体名称'； $actions[$action_slug] = array( 'url' =gt； home_url('/the_action_url/')， 'name' =gt； 'The Button Text'， )； return $actions；}登录后复制

becode 粘贴一个名为“The Button Text”的按钮添加订单到每个的动作列表中。$action_slug = 'specific_name'；这行代码非常重要，因为它会自动为该按钮添加一个 CSS 类Specific_name。home_url('/the_action_url/') 定义了按钮点击我们后续跳转的 URL。应用自定义 CSS 样式

现在，可以使用 CSS 选择器 .woocommerce-account table.account-orders-table .specic_name 来专门针对我们新创建的按钮应用样式。

立即学习“转发免费学习笔记（深入）”；

例如，将按钮的文字颜色设置为红色，可以使用以下CSS代码：.woocommerce-account table.account-orders-table .special_name { color： red；}登录后复制

将bebe CSS代码添加到您的主题的style.css文件或通过WordPress的自定义CSS功能添加，即可生效。删除默认CSS类（任选）

如果您希望完全控制按钮的样式，并且想要去除默认的woocommerce-button按钮类，则需要覆盖WooCommerce的模板文件。

复制模板文件：将wp-content/plugins/woocommerce/templates/myaccount/orders.php文件复制到您的主题目录下的yourtheme/woocommerce/myaccount/orders.php。如果 woocommerce/myaccount/ 目录不存在，则创建它们。

编辑模板文件：打开复制后的orders.php文件，找到以下代码（大概在第69-71行，基于WooCommerce 3.7.0）：foreach ( $actions as $key =gt； $action ) { // phpcs：ignore WordPress.WP.GlobalVariablesOverride.Prohibited echo 'lt；a href=quot；' . esc_url( $action['url'] ) 。 'quot；class=quot；woocommerce-button 按钮 ' . sanitize_html_class( $key ) 。 'quot；gt；' . esc_html( $action['name'] ) 。 'lt；/agt；'；}登录后复制

替换代码：将上述代码替换为以下代码：foreach ( $actions as $key =gt； $action ) { // phpcs：ignore WordPress.WP.GlobalVariablesOverride.Prohibited // 比较 if ( $key == 'specific_name' ) { echo 'lt；a href=quot；' . esc_url( $action['url'] ) 。 'quot；类=quot；' . sanitize_html_class( $key ) 。 'quot；gt；' . esc_html( $action['name'] ) 。 'lt；/agt；'； } else { echo 'lt；a href=quot；' . esc_url( $action['url'] ) 。 'quot；class=quot；woocommerce-button 按钮 ' . sanitize_html_class( $key ) 。 'quot；gt；' . esc_html( $action['name'] ) 。 'lt；/agt；'； }}登录后复制

be代码会检查$key是否等于specific_name。如果是，则只输出specific_name类，否则输出默认的woocommerce-button按钮类。注意事项确保您的主题目录中存在woocommerce/myaccount/目录，并且orders.php文件位于该目录下。覆盖模板文件意味着您需要关注WooCommerce的更新，并在必要时更新您的模板文件，以确保兼容性。使用 sanitize_html_class() 函数来清理 CSS 类名，以防止潜在的安全问题。总结

通过以上步骤，您可以在 WooCommerce 的“我的账户”订单页面上成功添加一个自定义操作按钮，并简单应用唯一的 CSS类。您可以根据需要自定义按钮的样式，而不会影响其他按钮的样式。这种方法提供了更大的灵活性和控制力，使您可以更好地定制 WooCommerce 的用户界面。记住，在进行任何代码修改时，最好备份您的网站，以免发生意外情况。

以上就是为 WooCommerce 我的账户订单页面添加唯一 CSS 类的操作按钮的详细内容，更多请关注乐哥常识网其他相关文章！