WooCommerce 가격 형식을 지정하는 방법

디자인, 프리젠테이션 또는 매장 또는 브랜드 테마와 일치하기 위해 종종 다른 형식으로 가격을 표시하고자 할 수 있습니다. 이 게시물에서는 설정 옵션과 코드 편집기를 사용하여 WooCommerce 가격 형식을 지정하는 방법을 배웁니다.

이 게시물은 다음 세 가지 사항을 다룹니다.

1. 소수점 구분 기호 바꾸기
2. 천 단위 구분 기호 교체
3. 굵게, 기울임꼴 또는 밑줄과 같은 스타일을 적용하는 가격 형식 지정

1. 소수점 구분 기호 교체:

종종 제품 가격에 소수 값이 있을 수 있습니다. 이것은 야채의 무게에 따라 가격이 결정되는 온라인 식료품점의 경우 매우 일반적입니다.

많은 국가에서 소수점 구분 기호는 점(.)으로 표시됩니다. 그러나 이것은 스페인, 남아프리카 공화국, 브라질, 스웨덴, 중국 및 소수 구분 기호가 쉼표인 기타 70개 국가와 같은 다른 많은 국가에서는 해당되지 않습니다.

브라질과 같은 국가에서는 점(.)을 사용하여 천 단위를 구분하기도 합니다. 예를 들어, 12,500은 "12,500"이 아니라 "12.500" 또는 "12,500"으로 표기됩니다.

따라서 특정 고객이나 국적을 위한 매장을 디자인할 때 가격을 다르게 표시해야 합니다. WooCommerce에서 소수점을 쉼표 또는 공백으로 바꾸는 방법을 살펴보겠습니다.

WooCommerce 설정을 통해 직접 또는 코드 편집기를 통해 이를 수행하는 두 가지 방법이 있습니다.
WooCommerce 설정을 통해 소수점 구분 기호 변경
WordPress 대시보드의 WooCommerce 레이블 위에 마우스를 놓고 설정을 클릭합니다. WooCommerce->설정에서 일반 탭을 아래로 스크롤하면 다음이 표시됩니다.

여기에서 "소수 구분 기호"의 값을 "."에서 변경할 수 있습니다. 에게 ","

이렇게 하고 "변경 사항 저장"을 클릭하면 소수점이 쉼표로 표시됩니다.

이런 식으로 원하는 구분 기호를 사용할 수 있습니다.
코드 편집기를 통해 소수점 구분 기호 변경
WooCommerce는 소수 구분 기호를 변경하는 직접적인 방법을 제공하지만 코드를 통해 이를 배우는 것이 유용합니다. 이 예에서는 코드 편집기를 사용하여 소수점을 공백으로 바꾸는 방법을 보여줍니다.

이 작업을 수행하기 위해 하위 테마의 functions.php 파일에 삽입할 수 있는 작은 코드 조각이 있습니다. (왜 우리가 직접 functions.php 파일이 아니라 자식 테마 의 functions.php를 편집하는지 알고 싶다면 이 포스트를 읽어보세요.)

코드 조각:

 add_filter( 'wc_price', 'woo_hide_decimal_point', 10, 4 );
함수 woo_hide_decimal_point( $return, $price, $args, $unformatted_price ) {
$unit = intval( $price );
$decimal = sprintf( '%02d', ( $price-$unit ) * 100 );
return sprintf( '%s %d %s', get_woocommerce_currency_symbol(), $unit, $decimal );
}

결과는 소수점이 제거되고 공백으로 대체된다는 것입니다.

참고: 코드는 소수점 구분 기호를 "."로 설정한 후에만 작동합니다. WooCommerce-> 설정에서.

코드를 약간만 변경하면 비슷한 방식으로 공백을 쉼표로 바꿀 수 있습니다.

 add_filter( 'wc_price', 'woo_replace_decimal_point', 10, 4 );
함수 woo_replace_decimal_point( $return, $price, $args, $unformatted_price ) {
$unit = intval( $price );
$decimal = sprintf( '%02d', ( $price-$unit ) * 100 );
return sprintf( '%s %d,%s', get_woocommerce_currency_symbol(), $unit, $decimal );
} 

소수점 구분 기호를 대체하기 위해 WooCommerce->Settings보다 코드 스니펫을 사용하는 것이 더 나은 이유:

WooCommerce->Settings와 반대로 코드 편집기를 사용하여 소수점을 바꾸면 많은 이점이 있습니다.

하나는 원하는 방식으로 가격 형식을 지정할 수 있다는 것입니다. 위 이미지를 보시면 가격이 통화 기호 뒤에 공백이 있습니다. 이 공간은 WooCommerce->설정을 통해 소수점이 대체된 이 게시물의 첫 번째 스크린샷에서 누락되었습니다.

또 다른 이점은 상점의 모든 제품이 아닌 특정 제품에 대해서만 이러한 변경을 수행하려는 경우입니다. 코드 편집기를 사용하면 이러한 유연성을 얻을 수 있습니다.

코드 조각을 사용하여 <b>,<u>,<i>,<sup>,<sub> 등과 같은 HTML 태그를 삽입하여 가격의 소수 부분을 다양한 스타일로 표시할 수도 있습니다.

예: 가격의 소수 부분에 밑줄 추가.

 add_filter( 'wc_price', 'woo_format_decimal_value', 10, 4 ); 
함수 woo_format_decimal_value( $return, $price, $args, $unformatted_price ) { 
$unit = intval( $price ); 
$decimal = sprintf( '%02d', ( $price-$unit ) * 100 ); 
return sprintf( '%s %d.<u>%s</u>', get_woocommerce_currency_symbol(), $unit, $decimal); 
}

위의 코드 조각은 하위 테마의 functions.php 파일에 삽입될 때 가격의 소수점 부분에 밑줄을 추가합니다.

다른 HTML 태그도 같은 방법으로 사용할 수 있습니다. 십진수 값을 위 첨자 또는 아래 첨자로 표시하는 방법을 알고 싶다면 이 게시물을 읽으십시오.

2. 천 단위 구분 기호 교체:

소수 구분 기호가 일부 국가에서 다르게 표시되는 것처럼 천 단위 구분 기호도 마찬가지입니다.

예를 들어, 브라질, 남아프리카 또는 스페인과 같은 국가에서는 천 단위 구분 기호가 공백 또는 점/점으로 표시됩니다. 이 국가에서 13,500은 13 500 또는 13.500으로 쓸 수 있습니다.

이 대상을 위한 상점을 디자인할 때 천 단위 구분 기호를 적절하게 편집해야 합니다.

소수점 구분 기호와 마찬가지로 WooCommerce->Settings 또는 코드 편집기를 통해 두 가지 방법을 사용할 수 있습니다.
WooCommerce 설정을 통해 천 단위 구분 기호 변경
WordPress 대시보드의 WooCommerce 레이블 위에 마우스를 놓고 설정을 클릭합니다. WooCommerce->설정에서 일반 탭을 아래로 스크롤하면 다음이 표시됩니다.

천 단위 구분 기호 텍스트 상자의 값을 쉼표(",") 대신 공백으로 변경하면 천 단위 구분 기호가 표시되는 방식이 변경됩니다. 이 상자에 공백을 입력해야 합니다. 단순히 쉼표를 지우면 천 단위 구분 기호가 공백으로 변경되지 않습니다.

"변경 사항 저장"을 클릭하고 제품을 봅니다.

천 단위 구분 기호 대신 공백이 있는 것을 볼 수 있습니다.

혼동을 피하기 위해 소수점 이하 자릿수가 없는 가격의 경우 WooCommerce->Settings를 통해 소수점 이하 자릿수를 "0"으로 설정할 수 있습니다.

여기에 소수점 이하 자릿수를 "0"으로 입력한 후 "변경 사항 저장"을 클릭하고 제품을 다시 봅니다.

코드 편집기를 통해 천 단위 구분 기호 변경

마찬가지로 코드 조각을 사용하여 천 단위 구분 기호를 변경할 수 있습니다. 위의 소수점 구분 기호 섹션에서 언급했듯이 코드 편집기를 사용하면 원하는 방식으로 가격을 사용자 정의하거나 스타일을 지정할 수 있고 전체 상점이 아닌 경우 특정 제품에 대해서도 항상 더 많은 이점이 있습니다.

이제 코드 조각을 사용하여 천 단위 구분 기호를 점(.)으로 변경해 보겠습니다.

참고: 이를 위한 전제 조건은 WooCommerce->설정에서 천 단위 구분 기호 상자를 비워 두어야 한다는 것입니다. 공백도 없습니다.

 add_filter( 'wc_price', 'woo_format_thousand_separator', 10, 4 ); 
함수 woo_format_thousand_separator( $return, $price, $args, $unformatted_price) 
{ 
  $formatted_price=number_format($price,0,' ','.'); 
  return sprintf( '%s %s', get_woocommerce_currency_symbol(), $formatted_price); 
}

number_format 함수는 4개의 인수를 허용하는 내장 PHP 함수입니다.

1. 숫자 또는 우리의 경우 가격입니다.
2. 소수 자릿수. 십진수 값을 표시하지 않기 위해 0으로 설정했습니다.
3. 사용하려는 소수 구분 기호입니다. 이것을 공백 값으로 설정했습니다.
4. 천 단위 구분 기호입니다. 이것을 점(.)으로 설정했습니다.

이 코드 조각은 하위 테마의 functions.php 파일에 추가될 때 아래 스크린샷과 같이 천 단위 구분 기호를 점 또는 점(.)으로 표시합니다.

3. WooCommerce 가격 형식 지정:

이제 십진수 값과 천 단위 구분 기호의 형식을 지정하는 방법을 알았으므로 일반 가격에도 동일하게 적용됩니다. 설정 옵션을 사용하여 이러한 값의 형식을 직접 지정할 수는 없지만 위의 코드를 약간 수정하여 코드 편집기를 사용하여 그렇게 할 수 있습니다.

예: 이탤릭체로 제품 가격 쓰기.

기본 상황에서 제품 가격은 다음과 같이 표시됩니다.

여기에 스타일을 추가하려면(예: 기울임꼴로 작성) 어떻게 합니까?

위의 코드 조각을 약간 수정하여 이를 달성할 수 있습니다.

이 코드를 하위 테마의 functions.php 파일에 복사하기만 하면 됩니다.

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
function woo_format_price_italics( $return, $price, $args, $unformatted_price ) { 
$unit = intval( $price ); 
$decimal = sprintf( '%02d', ( $price-$unit ) * 100 ); 
return sprintf( '<i>%s %d.%s</i>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

이렇게 하면 가격이 소수점과 함께 기울임꼴로 표시됩니다.

코드 스니펫을 약간 변경하면 소수점 이하 자릿수가 표시되지 않습니다.

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
function woo_format_price_italics( $return, $price, $args, $unformatted_price ) { 
$unit = intval( $price ); 
return sprintf( '<i>%s %d</i>', get_woocommerce_currency_symbol(), $unit); 
}

보시다시피 여기에서 소수점 없이 이탤릭체로 가격을 볼 수 있습니다.

스니펫을 연구하면 자신만의 방식으로 WooCommerce 가격의 형식을 쉽게 지정할 수 있습니다.