ووکامرس

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

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

توسعه فروشگاه اینترنتی

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

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

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

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

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

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

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

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

شما می توانید برای تغییر نمادی که روی دکمه «افزودن به سبد خرید» هست، در تکه کد بالا تغییراتی ایجاد کنید، برای این کار کافی است به جای عبارت » ، کد مربوط به نماد مورد نظر خودتان را استفاده کنید. برای پیدا کردن کد نماد مورد نظرتان می توانید از لینک زیر کمک بگیرید.

کد مربوط به نماد های HTML

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

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

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

تکه کد مربوطه:

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

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

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