How can I load WooCommerce order pages style into my Custom submenu page?

Question

I have registered a new submenu under WooCommerce. What I am looking for now is to load WooCommerce admin style css on that page. So I can just use WooComerce css classes and id to make it looks like the Orders Page.

Here is my code to register new setting page.

add_submenu_page(
   'woocommerce', __('My Page Title', 'text-domain'), __('My Page Title', 'text-domain'), 'manage_options', 'my-custom-slug', array($this, 'my_custom_Page')
);

Here is my code to render my setting page elements.

public function my_custom_Page(){
   ?>
      <div class="wrap">
         <div id="root">
            <div class="woocommerce-layout">
               <div class="woocommerce-layout__header">
                  <div class="woocommerce-layout__header-wrapper">
                     <h1 class="woocommerce-layout__header-heading">My Custom Page</h1>
                  </div>
               </div>
            </div>
         </div>
      </div>
   <?php
}

I am trying to find a solution to load WooCommerce admin pages css and JS into my custom admin page under WooCommerce.

Answer 1

To use WooCommerce custom admin css on your custom settings page add this code to the same file that add_submenu_page() code resides.

function random_add_woocommerce_admin_css() {
    wp_enqueue_style( 'woocommerce_admin_styles', WC()->plugin_url() . '/assets/css/admin.css');
}
add_action( 'admin_enqueue_scripts', 'random_add_woocommerce_admin_css' );