• I am able to add my own button to the woocommerce Orders page (by hooking into woocommerce_admin_order_actions and adding my own array), but i am now wondering how i can use an image/glyph on the button instead of text?

    Looking at the code for the other buttons, i can see that content (unicode?) is added in a stylesheet – however i do not see what icons are available / already loaded in woocommerce so are available to use?

    (I am also adding a custom stylesheet (via wp_enqueue_scripts) where the button styles can be defined).

    https://wordpress.org/plugins/woocommerce/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Mike Jolley (a11n)

    (@mikejolley)

    Use a dashicon in your custom CSS perhaps? https://developer.wordpress.org/resource/dashicons/

    Thread Starter ts_hamlet

    (@ts_hamlet)

    Even with my own stylesheet added, it does not seem to add the icon to the button. Instead i get the button text, with a square box with the unicode or hex code of the icon – so the stylesheet is actually adding the content – just not rendering it as an icon?

    Thread Starter ts_hamlet

    (@ts_hamlet)

    Here is my plugin code to add a new button to the orders page:

    function foo_add_my_action($actions, $the_order){
            /**
             * Merge arrays so that our button is first
             */
            $newActions = [];
            if($the_order->is_paid()){
                $newActions['myLink'] = array(
                    'url' => plugin_dir_url( __FILE__ ) . 'somepage.php?bookId=' . $the_order->id,
                    'name' => 'my link',
                    'action' => 'my-link'
                );
            }
    
            return array_merge($newActions, $actions);
        }
        add_filter( 'woocommerce_admin_order_actions', 'foo_add_my_action', 10, 2);

    And the css rule:

    .my-link:AFTER{
        content: "\f227";
    }

    …results in a button (that works btw) with the text my-link and a square with F227 in it.

    Thread Starter ts_hamlet

    (@ts_hamlet)

    Ignore previous post, the glyph is now showing in the button fine.

    The problem i am now having is displaying JUST the icon. At the moment it displays the icon and the link text. The other buttons don’t do this, despite having the link text defined too (and if i leave the text blank in the above array, i lose the data-tip, which i want).

    Plugin Author Mike Jolley (a11n)

    (@mikejolley)

    There is CSS in WC which hides text when there is an icon.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding icon to button in admin orders page’ is closed to new replies.