[워드프레스] 우커머스 상품 버튼이 제대로 표시되지 않는 경우

Last Updated: 2016년 01월 21일 2개 댓글

이제 대부분의 브라우저에서 <input type="number" />를 지원하므로 WooCommerce 2.3에서 상품 증감 버튼(플러스/마이너스 버튼)이 제거되었습니다.

하지만 어떤 이유로 이 버튼이 제대로 표시되지 않는 문제가 발생하거나 구 버전의 브라우저를 고려하여 이 버튼을 유지하기를 원하는 경우가 있을 수 있습니다. 이 경우 아래의 방법을 통해 상품 증감 버튼을 복원할 수 있습니다.

플러그인 사용

WooCommerce Quantity Increment 플러그인를 사용할 수 있습니다. 이 플러그인을 설치한 후에 다음 코드를 워드프레스 테마의 함수 파일에 추가하도록 합니다.

add_action( 'wp_enqueue_scripts', 'wcqi_enqueue_polyfill' );
function wcqi_enqueue_polyfill() {
wp_enqueue_script( 'wcqi-number-polyfill' );
}

CSS 코드

위의 방법으로 잘 안 되는 경우, 혹은 플러그인 설치를 원하는지 않는 경우 스타일시트 파일에서 .quantity .qty 부분을 찾아서 다음 코드로 대체해주면 문제가 해결될 수 있습니다.

.quantity .qty { border-top:1px solid #ccc; border-bottom:1px solid #ccc; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; width:26px; text-align: center; }

javascript 사용

또는 다음과 같은 javascript를 사용해볼 수도 있습니다.

$('.plus').on('click',function(e){

var val = parseInt($(this).prev('input').val());

$(this).prev('input').val( val+1 );
});
$('.minus').on('click',function(e){

var val = parseInt($(this).next('input').val());
if(val !== 0){
$(this).next('input').val( val-1 );
} });
// Source: stackoverflow

최근 우커머스가 업데이트되면서 번역이 함께 업데이트가 되지 않는 문제가 발생하는 것 같습니다. 우커머스가 업데이트된 후에 번역이 업데이트되려면 번역할 시간이 필요하지 않나 생각됩니다. 그 때문에 번역 업데이트가 늦어질 수 있을 것 같습니다. 이전 버전의 우커머스 언어 파일을 업로드하면 일부 문자열을 제외한 대부분의 문자열이 한글로 표시되지 않을까 생각됩니다. 우커머스 번역과 관련해서는 이 글을 참고해보시기 바랍니다.

참고:


2 개 댓글

Leave a Comment

  1. 안녕하세요. 현재 익스플로어에서는 상품 수량 증가 버튼이 안보이고, 크롬에서는 보이는 상태입니다.
    소개해주신 플러그인에 경우 개발자가 플러그인을 닫은 상태여서, 스타일 시트에 css 코드를 입력하려고 합니다.
    현재 차일드 테마를 사용중이여서 기존 테마의 스타일시트에서 ".quantity .qty" 를 검색하니

    .woocommerce-cart .woocommerce .quantity .qty {
    font-size: 14px;
    line-height: 18px;
    }
    .woocommerce-cart .woocommerce .quantity .qty {
    padding-right: 0;
    }

    이 부분이 검색되는데 이부분 어디에

    .quantity .qty { border-top:1px solid #ccc; border-bottom:1px solid #ccc; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; width:26px; text-align: center; }

    를 넣으면 될까요?

    도움 부탁드립니다.

    응답