09128364675

افزودن دکمه سفارشی به صفحه محصول

افزودن دکمه سفارشی در کنار دکمه افزودن به سبد خرید

افزودن دکمه سفارشی به صفحه محصول – یکی از مهمترین صفحات سایت فروشگاهی شما، صفحه محصول می باشد که می توانید با سفارشی سازی آن امکانات بیشتری به این صفحه اضافه کنید و تعامل بیشتری با مشتریان داشته باشید.

از جمله تسریع در امر پشتیبانی در هنگام خرید، قرار دادن فایل آموزشی، ارائه پیشنهاد به مشتریان ، قرار دادن لینک دانلود و …

 

افزودن دکمه سفارشی به صفحه محصول

 

برای اینکار کافیست قطعه کد زیر را به فایل Functions.php قالب خود اضافه کنید.

 


add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );

function my_extra_button_on_product_page() {
  echo '<a class= "extra_button" href="#">متن دکمه</a>';
}

 

کاربرانی که از محصولات ماهدیس وب استفاده می کنند، باید این کد را به فایل myfunctions اضافه کنند.

 

برای استایل دهی به دکمه باید  کد های css زیر را در فایل style.css قالب خود اضافه کنید :



.extra_button{
display: inline-block;
background: #147427;
color: #fff;
height: 35px;
line-height: 35px;
padding: 0;
border-radius: 0;
border: 1px solid #e5e5e5;
padding: 0 20px 0 20px;
-webkit-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
font-family: IRANSans;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-indent: unset;
font-weight: 300;
font-size: 12px;
}
.extra_button:hover {
color: #fff;
background:#0063D1;
}

 

 

 

بعد از افزودن کد و ذخیره فایل می توانید نتیجه کار را در سایت مشاهده کنید

 

 

 

 

 

 

مطلب مرتبط : نمایش تعداد فروش محصول در ووکامرس

 

امیدواریم از خواندن این مقاله لذت برده باشید.

اگر نظری دارید میتوانید با ا به اشتراک بگذارید.

دیدگاه کاربران
  • ehsan ۲۱ اردیبهشت ۱۴۰۰

    سلام وقت بخیر تشکر از این مطلب خوب شما
    امکان داره لینک برای هر صفحه متفاوت باشه و با توجه به sku محصول تغییر کنه اون لینکه مثلا
    محصول site.com/product/4000 سپس دکمه سفارشی لینک بشه به preview.site.com/preview/4000
    و محصول بعدی به همین صورت تکرار بشه برای همه محصولات
    محصول site.com/product/4001 سپس دکمه سفارشی لینک بشه به preview.site.com/preview/4001
    دکمه سفارشی بر اساس sku لینک بشه یا لینک محصول

    امکان داره در لیست محصولات هم نمایش داده بشه این دکمه سفارشی ؟؟
    میشه برای محصولات یک ویژگی ساخت و اون وِیژگی مثل این باشه ایا پیش نمایش دارد ؟
    اگر بله بود نمایش داده بشه اگر نه بود نمایش داده نشه

    امکان داره کدش بگید ؟؟

    تشکر از همه زحمات شما

    • ماهدیس وب ۲۲ اردیبهشت ۱۴۰۰

      با سلام
      برای دسترسی به شناسه محصول و ساخت لینک اختصاصی میتونید از کد زیر استفاده کنید.


      global $product;
      $product->get_sku();

      برای درج دکمه در آرشیو محصولات بستگی به قالب داره و میتونه متفاوت باشه که میتونید به فایل content-product..php ووکامرس رجوع کنید.

  • سعید ۱۶ دی ۱۳۹۹

    نمیشه کاری کرد که این دکمه اطلاعاتش رو از یک custom field بگیره ؟ یعنی لینک توی همه صفحه ها ثابت نباشه ؟

    • ماهدیس وب ۱۷ دی ۱۳۹۹

      سلام
      بله میشه

  • سیاوش محمدی ۱۸ آبان ۱۳۹۹

    سلام
    اگر بخواهیم به همین دکمه ساخته شده لینک بدهیم چه باید کرد؟
    ممنون

    • کارشناس ۱۸ آبان ۱۳۹۹

      سلام و درود

      به جای علامت # میتونید آدرس مورد نظر را وارد کنید.

  • امید ۲۴ تیر ۱۳۹۹

    این کد ها را فقط میشه تو قالب ماهدیس وب زد یعنی تو قالب های دیگه جواب میده؟

    • ماهدیس وب ۲۴ تیر ۱۳۹۹

      سلام
      امکان استفاده در هر قالبی وجود دارد

  • هومن ۲۶ خرداد ۱۳۹۹

    سلام.خیلی ممنوا ز آموزشتون.
    اگر ما بخواهیم این دکمه ای که ساخته شده بصورت شرطی باشه چی.یعنی وقتی محصول موجود بود فقط نمایش داده بشه و با ناموجود بودن اون مثله خود دکمه افزودن به سبد خریم غیر نمایش و غیر فعال باشه.

    • ماهدیس وب ۲۷ خرداد ۱۳۹۹

      سلام وقتتون بخیر و شادی


      add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );

      function my_extra_button_on_product_page() {
      global $product;
      if ($product->is_in_stock()) {
      echo 'متن دکمه';
      }
      }

  • مسعود چا ۱۷ دی ۱۳۹۸

    با تشکر از مطلب کاربردی و خوبتان
    دو درخواست داشتم

    1) اگر بخواهیم همین دکمه ای را که ساخته ایم ارتباط بدهیم به یک لینک خارجی چه کار باید کنیم. بطور مثال من یک فیلد دلخواه میسازم که آدرس یک سایت را درون آن میگزارم، میخواهم عنوان آنر بگزارم “لینک نمایش” تا هنگامی که کاربر بر روی آن کلیک کرد، برود و آن لینک را نمایش دهد.

    2) کد استایلی که در فایل style.css مثال بالا گذاشته اید را هم کدش را بگذارید.

    با تشکر

    • جواد مرادی ۱۸ دی ۱۳۹۸

      سلام و درود

      نوشته بروز شد.کدهای css اضافه شدند.

ارسال دیدگاه

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

کد امنیتی Time limit is exhausted. Please reload CAPTCHA.