WooCommerce에서 단순 및 가변 제품의 판매 가격 아래에 "You Save x%"를 표시하는 방법
게시 됨: 2019-04-03우리 모두는 할인이 고객을 유인하고 매출을 높이는 방법을 알고 있습니다. 그러나 모든 소매업체와 전자상거래 웹사이트에서 동시에 할인을 제공하는 요즘에는 더 저렴한 가격에 상품을 판매하고 있다는 것을 보여주는 것만으로는 충분하지 않습니다. 이전 가격과 새 가격만 표시되면 고객은 계산을 통해 실제로 절약한 금액을 계산해야 합니다. 이를 처리하는 더 좋은 방법은 고객이 구매할 때 절약한 금액의 백분율을 표시하는 것입니다. 이것은 그들에게 더 나은 아이디어와 구매 여부를 결정하는 더 쉬운 방법을 제공합니다. WooCommerce에서 단순 및 가변 제품의 판매 가격 옆에 "You Save x%"를 표시하는 방법을 살펴보겠습니다.
간단한 제품의 경우 판매 가격보다 % 할인된 금액을 표시하는 방법
일반 상품과 판매가를 알면 단순 상품의 경우 절약된 금액의 백분율을 표시하는 것이 쉽습니다. 일반적인 경우 단순 제품에 대한 이러한 가격은 다음과 같이 표시됩니다.
하위 테마의 functions.php 파일에 아래 코드를 추가하면 단순 제품 가격 아래에 "You Save x%"가 표시되므로 사용자는 거래가 얼마나 좋은지 나쁜지 즉시 알 수 있습니다.
함수 ts_you_save() {
글로벌 $product;
if( $product->is_type('simple') || $product->is_type('external') || $product->is_type('grouped') ) {
$regular_price = get_post_meta( $product->get_id(), '_regular_price', true );
$sale_price = get_post_meta( $product->get_id(), '_sale_price', true );
if( !empty($sale_price) ) {
$amount_saved = $regular_price - $sale_price;
$currency_symbol = get_woocommerce_currency_symbol();
$percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
?>
<p><b>저장: <?php echo number_format($percentage,0, '', '').'%'; ?></b></p>
<?php
}
}
}
add_action( 'woocommerce_single_product_summary', 'ts_you_save', 11 );이 코드 스니펫에서 내장된 WooCommerce 후크 woocommerce_single_product_summary 에 ts_you_save() 함수를 추가했습니다. 이 후크는 제품 제목 아래 영역을 가리킵니다. ts_you_save() 함수는 제품의 유형을 식별하고 제품이 세일 중인 경우 절약된 금액의 백분율을 계산합니다. CSS를 추가하여 원하는 방식으로 인쇄할 수 있습니다.
저장된 금액을 백분율과 함께 표시하려면 다음과 같은 방법으로 동일한 코드 조각을 약간만 수정할 수 있습니다.
함수 ts_you_save() {
글로벌 $product;
if( $product->is_type('simple') || $product->is_type('external') || $product->is_type('grouped') ) {
$regular_price = get_post_meta( $product->get_id(), '_regular_price', true );
$sale_price = get_post_meta( $product->get_id(), '_sale_price', true );
if( !empty($sale_price) ) {
$amount_saved = $regular_price - $sale_price;
$currency_symbol = get_woocommerce_currency_symbol();
$percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
?>
<p><b>저장: <?php echo number_format($amount_saved,2, '.', '')." (". number_format($percentage,0, '', '')."%)" ; ?></b></p>
<?php
}
}
}
add_action( 'woocommerce_single_product_summary', 'ts_you_save', 11 );number_format 함수는 4개의 인수를 허용하는 내장 PHP 함수입니다.
- 숫자 또는 우리의 경우에는 각각 저장된 금액과 백분율입니다(함수를 두 번 사용했습니다).
- 소수 자릿수. 백분율에 대해 소수 값을 표시하고 싶지 않기 때문에 저장된 금액에 대해 2로 설정하고 백분율에 대해 0으로 설정했습니다.
- 사용하려는 소수 구분 기호입니다. 저장된 금액은 점(.)으로, 백분율은 공백으로 설정했습니다.
- 천 단위 구분 기호입니다. 저장된 금액이 1000을 초과하는 경우 이 인수를 사용할 수 있습니다. 현재는 공백으로 설정했습니다.
이제 저장된 금액과 백분율이 가격 아래에 표시됩니다.
당신을 표시하는 방법 가변 제품에 대한 판매 가격보다 % 할인
가변 제품의 경우 제품의 모든 변형이 다른 가격을 가질 수 있기 때문에 이것이 까다로워집니다. 예를 들어, 티셔츠는 더 큰 사이즈의 경우 더 높은 가격이 책정될 수 있는 반면 더 작은 사이즈의 동일한 티셔츠의 경우 가격은 더 낮을 수 있습니다. 이러한 경우 WooCommerce는 제품 제목 아래에 판매 가격 범위를 표시하고 변형을 선택하면 제품의 각 변형에 대한 일반 및 할인 가격이 장바구니 에 추가 버튼 위에 표시됩니다. 이것은 아래 이미지로 설명되었습니다.
이 경우 특정 변형에 대해 표시된 가격 아래에 저장된 백분율과 함께 "저장했습니다" 텍스트를 인쇄합니다. 하위 테마 의 functions.php 와 footer.php 파일 모두 에 코드 조각을 추가해야 합니다.
footer.php 파일에 추가할 다음 코드 조각에는 변형이 변경될 때 트리거되는 함수가 포함되어 있습니다. 이 경우 크기 드롭다운을 사용하여 크기 변형을 선택하거나 변경할 때 트리거됩니다. 이 함수는 특정 변형 ID를 캡처하여 ajax 호출을 통해 functions.php로 보냅니다.
<스크립트>
jQuery(문서).ready(함수($) {
$('input.variation_id').change( function(){
if( '' != $('input.variation_id').val() ) {
var var_id = $('input.variation_id').val(); // 선택한 변형 ID
$.ajax({
URL: "https://<your_woocommerce_site_url>/wp-admin/admin-ajax.php",
데이터: {'액션':'ts_calc_percentage_saved','vari_id': var_id} ,
성공: 함수(데이터) {
만약 (데이터>0)
{
$( ".woocommerce-variation-price" ).append( "<p>저장: "+data+"%</p>");
}
},
오류: 함수(errorThrown){
console.log(errorThrown);
}
});
}
});
});
</스크립트>
<your_woocommerce_site_url> 을 WooCommerce 웹사이트의 기본 URL로 바꿔야 합니다.
functions.php 파일에 추가할 다음 코드 조각에는 변형 ID를 기반으로 제품의 정상 가격 및 판매 가격을 가져오고 백분율을 계산하고 바닥글의 ajax 함수에 동일한 값을 반환하는 ts_calc_percentage_saved 함수가 포함되어 있습니다. .php 파일.
//이것은 WordPress에서 ajax가 호출하는 함수를 연결하는 방법입니다.
add_action("wp_ajax_ts_calc_percentage_saved", "ts_calc_percentage_saved");
//아래 함수는 footer.php의 ajax 스크립트를 통해 호출됩니다.
함수 ts_calc_percentage_saved(){
// $_REQUEST에는 ajax를 통해 전송된 모든 데이터가 포함됩니다.
if ( isset($_REQUEST) ) {
$퍼센트=0;
$variation_id = Sanitize_text_field($_REQUEST['vari_id']);
$variable_product = wc_get_product($variation_id);
$regular_price = $variable_product->get_regular_price();
$sale_price = $variable_product->get_sale_price();
if( !empty($sale_price) ) {
$amount_saved = $regular_price - $sale_price;
$currency_symbol = get_woocommerce_currency_symbol();
$percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
}
다이($퍼센트);
}
}Sanitize_text_field() 함수는 클라이언트 측에서 수신한 입력을 살균하는 데 도움이 되는 WordPress 함수입니다.
따라서 이제 변형 가격 아래에 저장된 금액의 백분율과 함께 "저장했습니다"가 표시됩니다.
다음 줄의 추가 기능 내에 HTML 및 CSS를 추가하여 Ajax 기능 자체 내에서 원하는 대로 스타일을 지정할 수 있습니다.
$( ".woocommerce-variation-price" ).append( "<p>저장: "+data+"%</p>");
가변 제품의 경우 장바구니에 추가 버튼 대신 제품 제목 아래에 저장 % 표시
원하는 경우 위에 언급된 코드 스니펫에 코드 스니펫을 추가하여 "장바구니에 추가" 버튼 대신 제품 제목 아래에 저장된 백분율과 함께 저장 텍스트를 표시할 수 있습니다.
이 코드 조각은 위에서 언급한 코드 조각(footer.php 및 functions.php 파일에 있음) 외에 하위 테마의 functions.php 파일에 추가해야 합니다.
//아래 코드는 가격을 이동하는 코드입니다.
함수 ts_shuffle_variable_product_elements(){
if ( is_product() ) {
글로벌 $post;
$product = wc_get_product( $post->ID );
if ( $product->is_type( '변수' ) ) {
remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_title', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_excerpt', 30 );
}
}
}
add_action( 'woocommerce_before_single_product', 'ts_shuffle_variable_product_elements' );이 코드가 본질적으로 하는 일은 요소(제목 포함)를 제거하고 원하는 방식으로 재배열하는 것입니다. 그 결과 그림과 같이 가격 범위가 삭제되고 변형 가격이 아래에 저장 텍스트와 함께 변형을 선택하면 표시됩니다.
