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

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

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

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

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

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

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

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

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 ها اضافی پوسته خود بیافزایید. برای اینکار کافی است:

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

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

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

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

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