سفارشی سازی و افزودن ویژگی به قسمت عنوان محصولات ووکامرس .

بسم الله الرحمن الرحیم

با سلام
شاید سایت فروشگهی شما به گونه ای باشد که احتیاج پیدا کنید در قسمتی که کالا ها نمایش داده میشود ، عنوان نمایش داده شده را ویرایش کنید .
شاید بخواهید قیمت را نشان ندهد .
یا بخواهید رنگ آن عوض شود .
شاید هم بخواهیم بخشی از ویژگی های محصول خود را در آن وارد کنید .
برای استفاده از مطلب لازم است آشنایی اولیه با وردپرس و ووکامرس داشته باشید .

اولین قدم این است که شما از child theme در ورد پرس خود استفاده کنید .
برای یادگیری کار با child theme کافی است به این صفحه سر بزنید .
در صورتی که از قالب enfold استفاده میکنید کافی است به این صفحه سر بزنید .

بعد از نصب child theme در فایل functions.php در پوشه ی child-theme میتوانید اسکریپت های خود را نوشته و سایت را شخصی سازی کنید

ابتدا باید با خود مسخص کنید که چگونه میخواهید عنوان را سفارشی کنید .
سفارشی سازی ای که ما در این آموزش آن را پی میگیرم بدین شکل است :
در سایت ما عنوانی که متصدی سایت از آن استفاده میکند با عنوان نمایش تفاوت دارد . برای مشتری نامی که زیر عکس می افتد باید به فرمت “خلاصه نام | کد” باشد برای این کار ابتدا محصول را ازنوع متغیر انتخاب میکنیم و در قسمت ویژگی ها دو ویژگی با نام های “خلاصه نام” با نامک “name” و “کد” با نامک “code” اضافه میکنیم .
سپس در قسمت ویژگی های محصول کد و خلاصه نام دلخواه را به محصول نسبت میدهیم .

برای نمایش این نوع عنوان با فرمت دلخواه کافیست کد زیر را در فایل functions.php اضافه کنیم

remove_action('woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title',10);
add_action('woocommerce_shop_loop_item_title', 'display_attributes_after_product_loop_title', 15);
function display_attributes_after_product_loop_title(){
    global $product;

    $output ='<div style="">'; // Initializing

    if( $name = $product->get_attribute('name') ){
        $output ='<span style="color:black ; font-weight:bold ; font-size:large">'. $output.$name."|";
    }

    if( $code = $product->get_attribute('code') ){
        $output= $output . $code . "</span><br>";
    }
}

نتیجه ی این کد به شکل زیر خواهد بود . شما میتوانید خود ویرایش های لازم را روی کد انجام دهید

در تابع display_attributes_after_product_loop_title که در کد تعریف نموده ایم میتوانیم تغییرات دیگری نیز بدهیم

برای مثال ما میخواهیم دو قیمت را یکی خط خورده و دیگری خط نخورده را در کنار یکدیگر برای اجناس تخفیف دار اعمال کنیم . همچنین میخواهیم سایز بندی و رنگ بندی که جز ویژگی های کالای ما میباشد نیز اضافه شود .
برای اعمال تخفیف ویژگی ای با نامک discount میسازیم و در صد تخفیف مورد نظر را اعمال میکنیم . لازم به ذکر است . درصد تنها نمایشی میباشد و شما باید به صورت دستی قیمت خط خورده و خط نخورده را وارد نمایید
برای این کار دو ویزگی با نامک های strike , nostrike را به ترتیب برای قیمت خط نخورده و خط خورده قرای میدهیم . و نامک ویژگی سایز ، size و نامک ویژگی رنگبندی ، color است .

برای اضاقه کردن این دو به قسمت عنوان کافی است کد زیر را جایگزین کد بالا کنید .

add_action('woocommerce_shop_loop_item_title', 'display_attributes_after_product_loop_title', 15);
function display_attributes_after_product_loop_title(){
    global $product;

    $output ='<div style="">'; // Initializing

    if( $name = $product->get_attribute('name-sum') ){
        // Save the value in the array
        $output ='<span style="color:black ; font-weight:bold ; font-size:large">'. $output.$name."|";
    }

    if( $code = $product->get_attribute('code') ){
        $output= $output . $code . "</span><br>";
    }
    if($takhfif = $product->get_attribute('discount')){
    if( $lined = $product->get_attribute('lined') ){
        $output= $output . '<table class="pricetable" style="background:transparent;margin-bottom:0px;width:100%;" ><tr style="background:transparent"><td style=" border:none;text-align:center;"><strike style="">'.$lined.'</strike></td><td style="border:none;text-align:center"><strong>';

        }

    if( $unlined = $product->get_attribute('unlined') ){


    $output.= $unlined.'</strong></td></tr></table>';
}
    }
    if( $color = $product->get_attribute('color') ){
        $output .= '<div style="text-align:center" class=""><span style="color:#c459cd;font-size:small ; font-weight:bold">ﺮﻧگ ﺐﻧﺩی : </span>'. '<span style=  "color:black ; font-size:small">' . $color . '</span><br>';
    }
    if( $size = $product->get_attribute('size') ){
            $output .= '<span style="color:#c459cd;font-size:small ; font-weight:bold">ﺱﺍیﺯ ﺐﻧﺩی : </span>'. '<span style= "color:black ; font-size:small">' . $size . '</span></div></div>'  ;
    }

    // Output
    if( sizeof($output) > 0 ){
        echo  $output;
    }
}

همچنین برای افزودن نوار تخفیف در گوشه بالای تصویر ، کد زیر را به فایل functions.php اضافه کنید .

این کد عددی که در ویژگی تخفیف با نامک discount هر محصول نوشته میشود را نمایش میدهد .

      add_action( 'woocommerce_before_shop_loop_item_title', wk_shop_product_label);

    function wk_shop_product_label() {
      global $product;
          if($takhfif = $product->get_attribute('discount')){

        echo '<div class="ribbon">
                <span> ﺖﺨﻓیﻑ ٪ '. $takhfif  . '  </span>

</div>' ;
          }
    }

همچنین کد زیر را در فایل style.css در پوشه ی enfold-child قرار دهید .

.thumbnail_container{
	position:unset;
}
.ribbon {
  margin: 0 ;
  width: 110px;
  height: 110px;
  display: block;
  position: absolute;
  overflow: hidden;
}
.ribbon span {
  width: 150px;
  height: 34px;
  top: 20px;
  right: -40px;
  position: absolute;
  display: block;
  background: #c459cd;
  color: #fff;
  font-size: 100%;
  color:black;
  text-align: center;
  line-height: 34px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}


نتیجه به این شکل خواهد بود .

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *