Question 3450 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

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

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).

Tags:

2

Answers


  1. 0

    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'] ) . '" class="woocommerce-button button ' . sanitize_html_class( $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'] ) . '" class="' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>';                                         
    } else {
        echo '<a href="' . esc_url( $action['url'] ) . '" class="woocommerce-button button ' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>';
    }
}
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search