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

이제 대부분의 브라우저에서 <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

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

참고:

• Twenty Twelve 테마 + WooCommerce: 초간단 커스터마이징
• 워드프레스 우커머스에서 “바로 구매”/”쇼핑 계속하기” 버튼 추가하기