WooCommerce'de basit ve değişken ürünler için satış fiyatlarının altında "% x Tasarruf Ediyorsunuz" nasıl görüntülenir?

İndirimlerin müşterileri nasıl cezbettiğini ve satışları nasıl artırdığını hepimiz biliyoruz. Ancak, tüm perakendecilerin ve e-ticaret sitelerinin aynı anda indirimler sunduğu günümüzde, bir ürünü daha düşük bir fiyata sattığınızı göstermek yeterli değildir. Yalnızca eski ve yeni fiyatlar görüntülendiğinde, müşterinin gerçekte ne kadar tasarruf ettiğini hesaplamak için matematiği yapması gerekir. Bunu halletmenin daha iyi bir yolu, müşterinin bu satın alma işlemini yaptığında tasarruf ettiği miktarın yüzdesini görüntülemektir. Bu onlara daha iyi bir fikir verir ve bu satın alma işlemini yapıp yapmamaya karar vermeleri için daha kolay bir yol sağlar. WooCommerce'de hem basit hem de değişken ürünler için satış fiyatlarının yanında “%x Tasarruf Ediyorsunuz” ifadesini nasıl görüntüleyebileceğinizi görelim.

Basit ürünler için satış fiyatlarının altında% tasarruf ettiğinizi nasıl gösterirsiniz

Normal ve satış fiyatı bilindikten sonra, basit ürünler için tasarruf edilen miktarın yüzdesini görüntülemek kolaydır. Normal durumlarda, basit bir ürün için bu fiyatlar aşağıdaki gibi görüntülenir:

Aşağıdaki kodu alt temanızın function.php dosyasına eklemek, basit ürünün fiyatının altında “%x Tasarruf Ediyorsunuz” ifadesini gösterecek, böylece kullanıcı, anlaşmanın ne kadar iyi veya kötü olduğu hakkında hemen bir fikir edinecektir.

 function ts_you_save() {
  
  küresel $ürün;
  
   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($satış_fiyat)) {
  
              $amount_saved = $normal_fiyat - $satış_fiyat;
              $currency_symbol = get_woocommerce_currency_symbol();

              $yüzde = yuvarlak( ( ( $normal_fiyat - $indirim_fiyat ) / $normal_fiyat ) * 100);
              ?>
              <p><b>Kaydettiğiniz: <?php echo number_format($percentage,0, '', '').'%'; ?></b></p>				
              <?php		
        }
   }
}

add_action('woocommerce_single_product_summary', 'ts_you_save', 11);

Bu kod parçacığında, ürün başlığının altındaki alana işaret eden yerleşik WooCommerce kancasına woocommerce_single_product_summary ts_you_save() işlevini ekledik. ts_you_save() işlevi, ürünün türünü tanımlar ve ürün indirimdeyse tasarruf edilen miktarın yüzdesini hesaplar. Biraz CSS ekleyerek, bunu istediğiniz şekilde yazdırabilirsiniz:

Kaydedilen miktarı yüzde ile birlikte görüntülemek istiyorsanız, aynı kod parçasını aşağıdaki şekilde biraz değiştirebilirsiniz:

 function ts_you_save() {
  
  küresel $ürün;
  
   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($satış_fiyat)) {
  
              $amount_saved = $normal_fiyat - $satış_fiyat;
              $currency_symbol = get_woocommerce_currency_symbol();

              $yüzde = yuvarlak( ( ( $normal_fiyat - $indirim_fiyat ) / $normal_fiyat ) * 100);
              ?>
              <p><b>Kaydettiğiniz: <?php echo number_format($amount_saved,2, '.', '')." (". number_format($percentage,0, '', '')."%)" ; ?></b></p>						
              <?php		
        }
   }
}

add_action('woocommerce_single_product_summary', 'ts_you_save', 11);

sayı_biçimi işlevi, 4 bağımsız değişkeni kabul eden yerleşik bir PHP işlevidir:

1. Sayı veya bizim durumumuzda sırasıyla kaydedilen miktar ve yüzde (fonksiyonu iki kez kullandık).
2. Ondalık basamak sayısı. Yüzde için herhangi bir ondalık değer görüntülemek istemediğimizden, kaydedilen miktar için 2 ve yüzde için 0 olarak ayarladık.
3. Kullanmak istediğiniz ondalık ayırıcı. Bunu, kaydedilen miktar için bir nokta(.) ve yüzde için boş bir değer olarak ayarladık.
4. Bin ayırıcı. Kaydedilen miktar 1000'i aşarsa, bu argümanı kullanabilirsiniz. Şu anda boş olarak ayarladık.

Kaydedilen miktar ve yüzde artık fiyatın altında görüntülenecektir:

Değişken ürünler için satış fiyatlarının altında % Tasarruf Ettiğiniz Nasıl Görüntülenir

Değişken ürünler söz konusu olduğunda, ürünün her çeşidi farklı bir fiyata sahip olabileceğinden, bu zorlaşıyor. Örneğin, bir tişörtün fiyatı daha büyük bir beden için daha yüksek olabilirken, aynı tişörtün daha küçük bir bedeni için fiyat daha düşük olabilir. Bu gibi durumlarda, WooCommerce, ürün başlığının altında indirimli fiyat aralığını gösterirken, varyasyon seçildiğinde, ürünün her varyasyonunun normal ve indirimli fiyatları Sepete Ekle düğmesinin üzerinde görüntülenir. Bu, aşağıdaki resimlerle gösterilmiştir:

Bu durumda, belirli bir varyasyon için görüntülenen fiyatın altında kaydedilen yüzde ile birlikte “Kaydettiğiniz” metnini yazdıracağız. Alt temanızın hem function.php hem de footer.php dosyalarına kod parçacıkları eklemeniz gerekecek.

Footer.php dosyasına ekleyeceğiniz aşağıdaki kod parçası, varyasyon değiştiğinde tetiklenen bir fonksiyon içermektedir. Bizim durumumuzda bu, Boyut açılır menüsü kullanılarak boyut varyasyonu seçildiğinde veya değiştirildiğinde tetiklenir. Bu işlev, belirli varyasyon kimliğini yakalar ve onu bir ajax çağrısı yoluyla function.php'ye gönderir.

 <script>
jQuery(belge).ready(işlev($) {
             
  $('input.variation_id').change( function(){
    	
    if( '' != $('input.variation_id').val() ) {
                     
        	        var var_id = $('input.variation_id').val(); // Seçtiğiniz varyasyon kimliği
      $.ajax({
        url: "https://<your_woocommerce_site_url>/wp-admin/admin-ajax.php",
        		        veri: {'action':'ts_calc_percentage_saved','vari_id': var_id} ,
        		        başarı: işlev(veri) {

              eğer (veri>0)
          {
            $( ".woocommerce-variation-price" ).append( "<p>Kaydettiğiniz: "+data+"%</p>");
          }
        		         },
        		        error: function(errorThown){
           			        konsol.log(errorThown);
        		         }
    		        });                       
          }
   });
});
</script>

<your_woocommerce_site_url> öğesini WooCommerce web sitenizin temel URL'si ile değiştirmeniz gerekir.

Functions.php dosyasına ekleyeceğiniz aşağıdaki kod parçacığı, varyasyon kimliğine göre ürünün normal fiyatını ve satış fiyatını getiren, yüzdeyi hesaplayan ve aynısını altbilgideki ajax işlevine döndüren ts_calc_percentage_saved işlevini içerir. php dosyası.

 // WordPress'te ajax tarafından çağrılan bir işlevi bu şekilde bağlarsınız
add_action("wp_ajax_ts_calc_percentage_saved", "ts_calc_percentage_saved");

//Aşağıdaki işlev, footer.php içindeki bir ajax betiği aracılığıyla çağrılır
function ts_calc_percentage_saved(){
          // $_REQUEST, ajax aracılığıyla gönderilen tüm verileri içerir
   		if ( isset($_REQUEST) ) {
       		        $yüzde=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($satış_fiyat)) {
  
                             $amount_saved = $normal_fiyat - $satış_fiyat;
                             $currency_symbol = get_woocommerce_currency_symbol();

                             $yüzde = yuvarlak( ( ( $normal_fiyat - $indirim_fiyat ) / $normal_fiyat ) * 100);
     			}
     			ölmek($yüzde);
   		}
}

sanitize_text_field() işlevi, istemci tarafından aldığımız girdiyi temizlemeye yardımcı olan bir WordPress işlevidir.

Böylece, varyasyon fiyatının altında tasarruf edilen miktarın yüzdesi ile birlikte “Tasarruf Ediyorsunuz” ifadesini göreceksiniz.

Bunu, ajax işlevinin kendisinde, bu satırdaki ekleme işlevinin içine HTML ve CSS ekleyerek istediğiniz gibi biçimlendirebilirsiniz:

$( “.woocommerce-variation-price” ).append( “<p>Kaydettiğiniz: “+data+”%</p>”);

Değişken ürünler için Sepete Ekle düğmesinin üstünde değil, ürün başlığının altında Tasarruf Etme %'nizi görüntüleyin

Dilerseniz, yukarıda belirtilenlere biraz daha kod parçacığı ekleyerek, “Sepete Ekle” butonunun üstünde değil, ürün başlığının altında kaydedilen yüzde ile birlikte Kaydettin metnini görüntüleyebilirsiniz.

Bu kod parçası, yukarıda bahsedilen kod parçacıklarına ek olarak (footer.php ve function.php dosyalarında) alt temanızın functions.php dosyasına eklenmelidir.

 //Aşağıdaki kod fiyatı kaydırmak içindir

function ts_shuffle_variable_product_elements(){
    if ( is_product() ) {
        küresel $yazı;
        $ürün = wc_get_product( $post->ID );
        if ( $product->is_type( 'değişken' ) ) {
            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');

Bu kodun esas olarak yaptığı şey, öğeleri (başlık dahil) kaldırmak ve istediğiniz şekilde yeniden düzenlemektir. Bunun sonucunda, bir varyasyon seçtiğinizde fiyat aralığı silinir ve varyasyon fiyatı, aşağıda gösterildiği gibi, altındaki Siz Kaydet metniyle birlikte görüntülenir: