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;
}

 

 

 

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

 

 

 

 

 

 

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

 

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

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

دیدگاه کاربران
  • مسعود چا ۱۷ دی ۱۳۹۸

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

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

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

    با تشکر

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

      سلام و درود

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

ارسال دیدگاه

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

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