Add an action button with a unique CSS class to WooCommerce my account orders-CodePudding

Here is my function for adding an option to my orders page:

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;
}

My question is this : How Can I add my custom CSS to ONLY my newly created option

(There are 3 other buttons except my button that I do not want to change their style and all 4 of them have same class).

CodePudding user response：

When displaying the buttons on the frontend, the action key is assigned as a classname, so you can assign different CSS based on action key like this:

.shop_table .button.specific_name {
 color: #fff;
}

CodePudding user response：

Using $action_slug = 'specific_name'; will automatically add this as a class to the button.

Then you can use the following selector

.woocommerce-account table.account-orders-table .specific_name {
    color: red;
}

To apply CSS specifically or to overwrite existing CSS

To do the reverse and remove certain classes for this particular button, you need to overwrite the template file /myaccount/orders.php in addition to your existing code

This template can be overridden by copying it to yourtheme/woocommerce/myaccount/orders.php.

Replace line 69 - 71 @version 3.7.0

foreach ( $actions as $key => $action ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
    echo '<a href="' . esc_url( $action['url'] ) . '" hljs-variable">$key ) . '">' . esc_html( $action['name'] ) . '</a>';
}

With

foreach ( $actions as $key => $action ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited                                   
    // Compare
    if ( $key == 'specific_name' ) {
        echo '<a href="' . esc_url( $action['url'] ) . '" hljs-variable">$key ) . '">' . esc_html( $action['name'] ) . '</a>';                                         
    } else {
        echo '<a href="' . esc_url( $action['url'] ) . '" hljs-variable">$key ) . '">' . esc_html( $action['name'] ) . '</a>';
    }
}