本教程详细指导如何在WooCommerce的“我的账户”订单页面添加自定义操作按钮，并为其应用独立的CSS样式。文章首先介绍如何使用woocommerce_my_account_my_orders_actions过滤器添加按钮，并揭示其$action_slug如何自动成为CSS类，从而实现特定样式控制。此外，教程还提供了通过覆盖WooCommerce模板文件实现更高级样式定制的方法，以满足更精细的样式需求，确保自定义按钮的视觉独特性。
在woocommerce中，为“我的账户”订单列表添加自定义操作按钮，并确保其样式独立于其他默认按钮，是提升用户体验和功能性的常见需求。本教程将分步指导您如何实现这一目标。
1. 添加自定义操作按钮
WooCommerce提供了一个名为woocommerce_my_account_my_orders_actions的过滤器钩子，允许开发者向“我的账户”订单列表中的每个订单添加自定义操作。
以下是添加自定义按钮的基本PHP代码，您需要将其添加到主题的functions.php文件或自定义插件中：
add_filter( 'woocommerce_my_account_my_orders_actions', 'add_my_account_my_orders_custom_action', 10, 2 );/** * 向WooCommerce我的账户订单添加自定义操作按钮。 * * @param array $actions 现有操作按钮数组。 * @param WC_Order $order 订单对象。 * @return array 修改后的操作按钮数组。 */function add_my_account_my_orders_custom_action( $actions, $order ) { // 定义自定义操作的唯一标识符（slug） $action_slug = 'specific_name'; // 建议使用有意义的名称 // 添加自定义操作到 $actions 数组 $actions[$action_slug] = array( 'url' => home_url( '/the_action_url/' ), // 替换为您的实际URL 'name' => '我的自定义按钮', // 按钮显示的文本 ); return $actions;}
代码解析：
add_filter(): 注册一个过滤器，用于修改WooCommerce的订单操作。$action_slug = ‘specific_name’;: 这是关键一步。您在此处定义的字符串（specific_name）不仅是操作的内部标识符，它也将自动作为CSS类添加到生成的按钮元素上。’url’ 和 ‘name’: 定义了按钮的链接地址和显示文本。
2. 应用独立CSS样式
由于$action_slug会自动作为CSS类添加到按钮上，我们可以利用这一点来为自定义按钮应用独特的样式，而不会影响其他默认按钮。
假设您的$action_slug是specific_name，那么您的自定义按钮将拥有一个名为specific_name的CSS类。结合WooCommerce订单列表的现有结构，您可以编写如下CSS来精确地 targeting 您的按钮：
/* 针对WooCommerce我的账户订单页面中特定按钮的样式 */.woocommerce-account table.account-orders-table .specific_name { color: red; /* 示例：将按钮文本颜色设为红色 */ background-color: #f0f0f0; /* 示例：添加背景色 */ border: 1px solid #ccc; /* 示例：添加边框 */ padding: 8px 15px; /* 示例：调整内边距 */ border-radius: 5px; /* 示例：圆角 */ text-decoration: none; /* 示例：移除下划线 */ display: inline-block; /* 示例：确保样式正常应用 */}/* 如果需要覆盖默认的按钮样式，可能需要更强的选择器或 !important */.woocommerce-account table.account-orders-table a.specific_name.woocommerce-button.button { /* 针对同时具有默认和自定义类的按钮进行样式覆盖 */ background-color: #007bff !important; /* 蓝色背景 */ color: #ffffff !important; /* 白色文本 */}
CSS选择器说明：
.woocommerce-account: 确保样式只在“我的账户”页面生效。table.account-orders-table: 进一步限定在订单表格内。.specific_name: 精确匹配我们自定义按钮的类名。
通过这种方式，您可以完全控制自定义按钮的外观，使其与网站的整体设计保持一致，或使其在众多操作中脱颖而出。
3. 高级定制：通过模板覆盖实现更精细控制
在某些情况下，您可能希望对自定义按钮的HTML结构有更细致的控制，例如移除WooCommerce默认添加到所有按钮上的woocommerce-button和button类。这需要通过覆盖WooCommerce的模板文件来实现。
步骤：
识别并复制模板文件：找到WooCommerce插件目录下的plugins/woocommerce/templates/myaccount/orders.php文件。将此文件复制到您的主题目录中，路径为：yourtheme/woocommerce/myaccount/orders.php。重要提示： 始终通过复制模板文件到主题目录来覆盖，切勿直接修改插件文件。
修改模板文件：打开您主题目录下的orders.php文件。查找负责渲染订单操作按钮的代码段。在WooCommerce 3.7.0及更高版本中，这通常位于第69-71行附近：
$action ) : // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited ?> <a href="" class="woocommerce-button button ">
将其替换为以下代码：
$action ) : // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited ?> <?php // 检查当前操作是否是我们的自定义操作 if ( $key === 'specific_name' ) { // 替换 'specific_name' 为您的 $action_slug // 为自定义按钮只添加其特有的类，不添加默认的 woocommerce-button 和 button 类 echo '' . esc_html( $action['name'] ) . ''; } else { // 对其他默认按钮保持原有的类 echo '' . esc_html( $action['name'] ) . ''; } ?>
代码解析：
if ( $key === ‘specific_name’ ): 这个条件语句用于判断当前正在渲染的按钮是否是您通过$action_slug定义的自定义按钮。在if块中，我们移除了woocommerce-button和button类，只保留了由$key（即specific_name）生成的类。在else块中，其他默认按钮保持其原有的类。
注意事项：
模板版本兼容性： 覆盖模板文件意味着您需要关注WooCommerce未来的更新。如果WooCommerce在后续版本中更改了orders.php的结构，您覆盖的文件可能需要相应更新，否则可能导致显示问题。谨慎操作： 模板覆盖是一种强大的工具，但也需要谨慎使用。在进行任何修改之前，请务必备份您的文件。
总结
通过上述方法，您可以灵活地在WooCommerce“我的账户”订单页面添加自定义操作按钮，并通过其自动生成的CSS类轻松实现独立样式。对于需要更深层次控制，例如移除默认按钮类的情况，模板覆盖提供了必要的解决方案。选择最适合您需求的实现方式，并始终遵循最佳实践，以确保网站的稳定性和可维护性。
以上就是WooCommerce 我的账户订单：添加自定义按钮与独立样式化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1269120.html
微信扫一扫 
支付宝扫一扫 
