어드민 커스텀 css 적용하기 – 우커머스 주문 리스트 튜닝하기 1탄

angdry-

사실 우커머스는 주문 내역을 관리하기에 썩 편하다고 볼 수 없습니다.
주문 내역을 클릭할 때마다 페이지 이동의 퍼포먼스도 좋지 않죠.
우커머스에서 주문내역을 확인 할때마다 시간이 꽤 빨리 줄어드는 느낌입니다.
조금만 고쳐 쓰면 꽤 편하게 사용할 수 있는데 말입니다.

그래서 몇 가지 준비를 해보았습니다.
실제로 히빈드라이가 사용하고 있는 방법입니다.
크게 어렵진 않고 대부분 functions.php와 style.css만으로 충분히 고쳐쓸 수 있는 수준입니다.

  1. 어드민 커스텀 css적용 하여 보류됨, 처리중, 완료됨 주문내역 컬러로 구분하기
  2. 배송현황에 따른 SMS 자동 발송하기
  3. 주문 리스트 클릭 없이 리스트상에서 주문내용 모두 확인하고 처리하기
  4. 전화번호와 주문상품 리스트 주문 리스트에 표현하기

순으로 진행됩니다.
오늘은 어드민에 커스텀 css를 적용하여 주문 리스트의 상태별 컬러 적용하는법을 알아보도록 하겠습니다.

위 이미지는 히빈드라이의 우커머스 주문 리스트입니다.
여러분이 사용하고 계신 화면과 꽤 상이하실겁니다.
우커머스 주문 리스트의 커스텀 목적은 주문 리스트에서 모든 주문 내역을 확인하고 처리한다가 목적이었습니다.
대충 훑어보아도 오늘 발송내역을 확인할 수도 있어야 하고요.

우커머스의 주문은 처리중까지 진행 되어야 발송할 수 있는데요.
이는 모든 결제 메소드의 처리가 성공했다는 의미입니다.
즉 결제 완료상태를 말합니다.

그에 반해 보류나 결제 대기중등은 결제가 완료되지 않아 발송하면 안됨을 의미합니다.
위 이미지를 살펴보시면 완료됨은 파란색으로, 결제 대기중은 빨간색으로 표현을 해두었는데 위 설명의 의미를 부여한것입니다.

위 이미지 처럼 우커머스의 주문 리스트를 튜닝하는 방법은 2가지 조치만 취하면 가능해집니다.

  1. 어드민에 커스텀 css 적용하기.
  2. 커스텀 css를 활용하여 주문 상태에 따라 css 적용하기.

어드민에 커스텀 CSS 적용하기.

일단 준비해둔 child theme의 functions.php를 준비해줍니다.
그리고 아래의 코드를 삽입해줍니다.

/* admin css custom */
function wpse239532_load_admin_style() {
    wp_enqueue_style( 'admin_css', get_stylesheet_directory_uri() . '/admin-css.css', false, '1.0.0' );
   }

add_action( 'admin_enqueue_scripts', 'wpse239532_load_admin_style' );

커스텀 css를 활용하여 주문 상태에 따라 css 적용하기.

그리고 같은 위치에 admin-css.css파일을 새로 생성해줍니다.
생성한 admin-css.css파일엔 아래의 코드를 넣어줍니다.

/* order list custom */
.wp-list-table tr.status-wc-completed {
    background: #ADECF4;
}
.wp-list-table tr.status-wc-processing {
    background: #D0F4AD
}
.wp-list-table tr.status-wc-pending {
    background: #F4ADAD;
}

각 상태별 컬러를 바꾸시려면 background: 뒤의 컬러 헥사코드를 변경하시면 됩니다.

별로 어렵지 않죠?
다음 게시물엔 발송현황에 따른 SMS 발송하기 게시물로 찾아뵙겠습니다.

감사합니다.

Leave a Comment

0

Start typing and press Enter to search

구버전 웹 브라우저를 사용하고 계시는군요.

히빈드라이 웹사이트는 보안을 위해 구버전 웹브라우저의 지원을 중단합니다.
구버전 웹브라우저 사용으로 인한 불이익을 보장하지 않습니다.웹브라우저 업데이트하기

×