اگر قصد اضافه کردن آیکون به دکمه افزودن به سبد خرید در فروشگاه ووکامرس خود را دارید در جای درست قرار دارید. در این مقاله ما نحوه انجام آن را به شما آموزش می دهیم.
این را می توان به دو روش انجام داد – اگر می خواهید آیکون های Fontawesome را نشان دهید از طریق CSS یا اگر ترجیح می دهید از نماد یونیکد ساده HTML استفاده کنید، از طریق PHP.
بیایید نگاهی به هر دو روش بیندازیم!
PHP: اضافه کردن نماد HTML به دکمه های افزودن به سبد خرید ووکامرس
شما می توانید لیست نمادهای HTML را در اینجا پیدا کنید: https://www.w3schools.com/html/html_symbols.asp. اساساً، با استفاده از برخی از موجودیت های HTML، می توانید نمادی مانند –> € <– را روی صفحه چاپ کنید.
در این مثال، می خواهیم یک نماد ساده به نام “raquo” را نشان دهیم.
کد زیر را باید به فایل functions.php قالب وردپرس فعال سایت خود اضافه کنید:
add_filter( 'woocommerce_product_single_add_to_cart_text', 'themefars_add_symbol_add_cart_button_single' );
function themefars_add_symbol_add_cart_button_single( $button ) {
$button_new = '» ' . $button;
return $button_new;
}
css: اضافه کردن آیکون به دکمه افزودن به سبد خرید ووکامرس
اگر طیف بهتری از آیکون‌ها را می‌خواهید استفاده از آیکون های FontAwesome را پیشنهاد می کنیم.
اگر قالب شما از FontAwesome پشتیبانی نمی کند، می توانید به سادگی یک اسکریپت در هدر اضافه کنید تا فونت خاص بارگیری شود.
در این مثال، می‌خواهیم آیکون “Shopping Cart +” ارائه‌شده توسط Fontawesome را اضافه کنیم که با کد “\f217” همراه است.
کد زیر را باید در قسمت نمایش » سفارشی سازی » css اضافی، اضافه کنید:
button.single_add_to_cart_button:before {
display: inline-block;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
float: right;
content: "\f217";
margin-left: 1em;
}
این تمام کاری بود که باید برای اضافه کردن آیکون به دکمه افزودن به سبد خرید در فروشگاه ووکامرس انجام می دادید.
همچنین ممکن است بخواهید آموزش های زیر را هم ببینید: