طراحی سایت
آیکون یا نماد دلخواه به دکمه خرید

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

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

همیشه آیکون ها و نشانه ها بیشتر از متن ها به چشم مخاطبان می آید و نظر آن ها را جلب می کند. در این محتوا می خواهیم به شما آموزش دهیم که یک آیکون خاص را به دکمه «افزودن به سبد خرید» در فروشگاه ووکامرس، اضافه کنید.

این محتوا دارای دو بخش است:

  • افزودن یک نشان ساده مثل (»،$،#و..) به دکمه «افزودن به سبد خرید»
  • افزودن یک آیکون خاص به دکمه «افزودن به سبد خرید»

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

برای اینکه بتوانید یک نشان ساده به دکمه «افزودن به سبد خرید»خود اضافه کنید، نیاز به هیچ افزونه ای ندارید، بلکه فقط کافی است یک تکه کد را در بخش توابع پوسته سایت خود بارگزاری کنید تا سبد خرید شما بدین شکل تغییر کند:

افزودن آیکن خرید

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

افزودن آیکون سبد خرید

  1. وارد پیشخوان وردپرس خود شوید.
  2. از منوی سمت چپ روی نمایش کلیک کنید.
  3. حال به بخش ویرایشگر پوسته و سپس توابع پوسته رفته و کد زیر را در انتهای این بخش جایگذاری کنید.

کد مربوطه را می توانید از باکس زیر بردارید:

add_filter( ‘woocommerce_product_single_add_to_cart_text’, ‘WOOCOMMERCE_IR_add_symbol_add_cart_button_single’ );
function WOOCOMMERCE_IR_add_symbol_add_cart_button_single( $button ) {
$button_new = ‘» ‘ . $button;
return $button_new;
}
شما می توانید برای تغییر نمادی که روی دکمه «افزودن به سبد خرید» هست، در تکه کد بالا تغییراتی ایجاد کنید، برای این کار کافی است به جای عبارت » ، کد مربوط به نماد مورد نظر خودتان را استفاده کنید. برای پیدا کردن کد نماد مورد نظرتان می توانید از لینک زیر کمک بگیرید.

افزودن آیکون خاص به دکمه «افزودن به سبد خرید»

برای اینکه بتوانید یک آیکون خاص را به دکمه «افزودن به سبد خرید» بیافزایید باز هم نیاز به افزونه ندارید، فقط کافی است که یک تکه کد CSS را به بخش CSS ها اضافی پوسته خود بیافزایید. برای اینکار کافی است:

  1. وارد پیشخوان وردپرس خود شوید.
  2. از بخش نمایش، روی سفارشی سازی کلیک کنید.
  3. به بخش  CSS های اضافی رفته کد مربوطه را جایگذاری نمایید.
  4. روی «انتشار» کلیک نمایید.

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

کد مربوطه:

 

button.single_add_to_cart_button:before {
display: inline-block;
font-family: FontAwesome;
float: left;
content: “\f217”;
font-weight: 300;
margin-right: 1em;
}

بعد از جایگذاری کد، تغییرات بدین شکل خواهد بود:

افزودن آیکن سبد خرید

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

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

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