WooCommerce에서 가격 앞에 텍스트를 추가하는 방법 » 가격 앞에 텍스트 추가

게시 됨: 2020-10-05

WooCommerce에서 가격 앞에 텍스트 추가 WooCommerce에서 가격 앞에 텍스트를 추가하시겠습니까? 이것이 당신이 찾고 있는 솔루션이라면 WooCommerce에서 가격 뒤에 텍스트를 추가하는 방법에 대한 자습서에서 공유한 것과 같은 간단한 코드 스니펫을 사용하여 WooCommerce에서 가격 앞에 텍스트를 빠르고 쉽게 추가하는 방법을 보여 드리겠습니다.

이상적으로는 해당 튜토리얼에서 언급했듯이 WooCommerce 페이지 또는 WordPress 페이지에 텍스트나 콘텐츠를 추가하려면 WordPress 필터 후크를 사용해야 합니다.

WooCommerce 및 WordPress 후크

기본적으로 필터 후크는 WooCommerce 또는 WordPress 페이지에 표시되는 콘텐츠를 일반 '필터'처럼 필터링하도록 설계되었지만 이 경우 새로운 수정 사항이 추가되고 콘텐츠가 함께 반환되어 표시되는 특정 지점이 있습니다.

WooCommerce에서 가격이 다르지 않기 전에 텍스트를 추가하기 위해 이전 자습서에서 사용한 것과 동일한 이벤트(WooCommerce 가격 접미사 추가 방법)에서 필터 후크를 사용합니다 .

WooCommerce 가격 접두사 추가

설명을 위해 모든 WooCommerce 자습서에서 사용한 것과 동일한 설정을 사용합니다. localhost에 Storefront 기본 WooCommerce 테마가 설치되어 있습니다. 위 그림에 표시된 부분에 가격 앞에 프리텍스트를 추가하겠습니다.

WooCommerce에서 가격 앞에 텍스트를 추가하는 단계

WooCommerce 제품 페이지의 가격 앞에 텍스트를 추가하는 코드를 생성하기 위해 취할 수 있는 단계는 약 3단계입니다. 아래에서 이러한 단계를 간략하게 설명합니다.

  1. WooCommerce 사이트에 로그인하고 테마 편집기로 이동하여 코드 스니펫을 추가할 functions.php 파일을 엽니다 .
  2. WooCommerce 가격 'event'인 ''woocommerce_get_price_html'에 연결하는 필터 훅을 생성하여 필터 훅이 add_filter( 'woocommerce_get_price_html', 'njengah_text_before_price' );
  3. price 앞에 추가하려는 텍스트로 콜백 함수를 만듭니다 . 콜백 함수는 $price 매개변수를 전달하고 새 가격을 반환하기 전에 새 텍스트를 추가해야 합니다.
  4. 이러한 변경 사항을 저장하고 프런트엔드가 작동하는지 확인합니다.

이제 몇 가지 코드로 설명할 시간입니다. 가격이 ' 권장 소매 가격' 이기 전에 추가하려는 텍스트를 RRP로 축약한다고 가정하겠습니다.

WooCommerce 테마의 functions.php 파일에 다음 코드를 추가하면 가격 앞에 텍스트를 추가해야 합니다.

 /**
 * 가격 앞에 텍스트 추가
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_before_price' );

함수 njengah_text_before_price($price){

    $text_to_add_before_price = ' RRP '; //괄호 안의 텍스트를 원하는 텍스트로 변경 
		  
		  
	$text_to_add_before_price 를 반환합니다. $ 가격 ;
		  
}

이 코드를 functions.php 파일에 추가한 후 변경 사항을 저장합니다. 아래 이미지와 같이 가격 앞에 텍스트가 추가되면 프런트 엔드를 확인하십시오.

WooCommerce에서 가격 앞에 텍스트 추가

위와 같이 WooCommerce 제품 페이지에서 가격 앞에 텍스트를 성공적으로 추가했습니다.

그러나 발생할 수 있는 일반적인 질문은 제품이 할인가이기 때문에 두 가격 사이에 텍스트를 추가하는 방법입니다.

제품이 판매 중인지 확인하고 코드를 다음과 같이 수정하여 이를 달성할 수 있습니다.

 /**
 * 판매 가격 앞에 텍스트 추가
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_onsale_price', 100, 2 );

function njengah_text_onsale_price( $price, $product ) {
  
  if ( $product->is_on_sale() ) {
    
	  $text_to_add_before_price = str_replace( '<ins>', '<ins><br>RRP ', $price);
	  
			$text_to_add_before_price 반환 ;
    
	    }또 다른{
     
	 반환 $ 가격;
  
   }
  
}

이 코드를 추가하면 아래 이미지와 같이 판매 가격 앞에 텍스트가 표시되어야 합니다.

WooCommerce에서 가격 앞에 텍스트 추가

마지막으로 이전 자습서에서 추가한 필터(WooCommerce에서 가격 앞에 텍스트를 추가하는 방법)와 WooCommerce 가격 전후에 텍스트를 추가하는 완벽한 솔루션을 갖도록 만든 이 필터를 결합할 수 있습니다.

WooCommerce 제품 페이지에서 가격 전후에 텍스트를 추가하는 전체 코드는 다음과 같아야 합니다.

 /**
 * 가격 전후에 텍스트 추가
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_before_and_after_price', 100, 2 );

함수 njengah_text_before_and_after_price($price) {
  
    $text_to_add_before_price = ' RRP '; //따옴표 안의 텍스트를 원하는 텍스트로 변경 
    
       $text_to_add_after_price = ' 한 쌍의 제동기 '; //따옴표 안의 텍스트를 원하는 텍스트로 변경
	  
    $text_to_add_before_price 를 반환합니다. $ 가격 . $text_to_add_after_price ;
  
  
}

보시다시피 필터 후크는 하나만 필요하지만 콜백 함수의 반환에서 변수를 결합하여 가격 전후의 텍스트를 출력합니다.

결론

이 WooCommerce 튜토리얼에서는 제품 페이지의 가격 앞에 텍스트를 추가하는 방법에 대해 설명했으며 WooCommerce 제품의 가격 전후에 텍스트를 추가하기 위해 이전 필터를 결합할 수도 있음을 보여주었습니다.

이 코드는 하위 테마 functions.php 파일에 배치하고 변경 사항이 적용되도록 업데이트해야 합니다. 이 코드 조각에 대한 추가 사용자 지정이 필요한 경우 언제든지 자유롭게 연락할 수 있습니다.

유사한 기사

  1. 실용적인 예를 통해 WordPress에서 Slug로 게시물 ID를 얻는 방법
  2. WooCommerce 제품 속성을 단계별로 사용하는 방법 [전체 가이드]
  3. WordPress에 사이드바를 추가하는 방법 » 궁극적인 단계별 가이드
  4. WordPress에서 사용자 정의 위젯 영역을 단계별로 만드는 방법
  5. WooCommerce에서 추천 제품을 설정하는 방법
  6. 예를 들어 장바구니에 추가 텍스트 WooCommerce 가이드를 변경하는 방법
  7. WooCommerce '장바구니에 추가됨' 알림 변경 방법
  8. WooCommerce에서 가격에 대한 텍스트 호출로 가격을 바꾸는 방법
  9. WordPress 페이지 새로 고침 시 리디렉션하는 방법 » 페이지 새로 고침 PHP 감지
  10. WooCommerce 테마의 제품 페이지에서 사이드바를 제거하는 방법
  11. 프론트엔드에서 Woocommerce 제품을 추가하는 방법
  12. WooCommerce에서 가격 뒤에 설명을 추가하는 방법
  13. WordPress에 로그인하지 않은 경우 사용자를 리디렉션하는 방법 » 페이지 리디렉션
  14. WooCommerce에서 가격 뒤에 텍스트를 추가하는 방법 » 가격 접미사 추가
  15. 장바구니 메시지에 제거하는 방법이 추가되었습니다. WooCommerce
  16. WooCommerce에서 장바구니에 추가 버튼을 숨기는 방법
  17. WordPress Gutenberg 및 Classic Editor에서 추천 이미지를 설정하는 방법
  18. WooCommerce에서 품절 텍스트를 변경하는 방법
  19. WordPress Post Editor에 기본 콘텐츠를 동적으로 삽입하는 방법
  20. 스토어프론트 설정 후 제품 추가 방법 [초보자 가이드]