آیا تا به حال به این فکر کردهاید که چرا دکمههای “افزودن به سبد خرید” در فروشگاههای بزرگ اینقدر جذاب به نظر میرسند؟ جزئیات کوچک، تفاوتهای بزرگ را رقم میزنند. یکی از این جزئیات تاثیرگذار، اضافه کردن آیکون به دکمه سبد خرید ووکامرس است. یک آیکون ساده مثل یک سبد خرید کوچک یا علامت مثبت، نه تنها ظاهر فروشگاه شما را حرفهایتر میکند، بلکه به کاربر کمک میکند تا سریعتر دکمه اقدام به خرید را شناسایی کند.
در این مقاله آموزشی، ما قصد داریم بدون نیاز به پلاگینهای سنگین و تنها با چند خط کد ساده، شخصی سازی دکمه افزودن به سبد خرید را یاد بگیریم. نگران نباشید؛ حتی اگر یک برنامهنویس حرفهای نیستید، با دنبال کردن این راهنمای قدم به قدم، میتوانید فروشگاه خود را بهینه تر کنید.
پیشنیازهای شروع کار
برای اینکه این آموزش ووکامرس را بدون مشکل پیش ببرید، به موارد زیر نیاز دارید:
- یک سایت وردپرسی با فروشگاهساز ووکامرس نصب شده.
- دسترسی به پیشخوان وردپرس.
- خیلی مهم: استفاده از Child Theme (پوسته فرزند) یا افزونه Code Snippets.
توجه: هرگز کدهای خود را مستقیماً در فایل functions.php قالب اصلی قرار ندهید. چرا؟ چون با اولین بروزرسانی قالب، تمام تغییرات شما پاک میشود. بهترین روش، نصب افزونه رایگان Code Snippets از مخزن وردپرس است که محیطی امن برای مدیریت کدهای PHP شما فراهم میکند.
مرحله ۱: انتخاب استراتژی و آیکون
برای اضافه کردن آیکون، ما دو راه اصلی داریم:
- استفاده از Font Icons
- استفاده از SVG
در این آموزش، ما روی روش SVG تمرکز میکنیم چون هم سبکتر است و هم نیاز به لود کردن فونتهای خارجی ندارد که سرعت سایت را پایین بیاورند. اما روش فونت آیکون را هم توضیح خواهیم داد.
مرحله ۲: تغییر دکمه در صفحات آرشیو (صفحه فروشگاه و دستهبندیها)
صفحات آرشیو (Shop Page) جایی هستند که محصولات کنار هم لیست شدهاند. دکمهای که در این بخش میبینید، با دکمه صفحه محصول تکی متفاوت است. ووکامرس برای ساخت دکمه در این بخش از فیلتری به نام woocommerce_loop_add_to_cart_link استفاده میکند.
ما میخواهیم کد HTML دکمه را قبل از نمایش به کاربر، رهگیری کرده و آیکون خود را به آن تزریق کنیم.
قطعه کد PHP برای صفحات آرشیو
کد زیر را در فایل functions.php پوسته فرزند یا در یک اسنیپت جدید در افزونه Code Snippets کپی کنید:
add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_icon_add_to_cart_loop', 10, 3 );
function custom_icon_add_to_cart_loop( $html, $product, $args ) {
// اگر محصول موجود است و دکمه خرید دارد
if ( $product && $product->is_purchasable() && $product->is_in_stock() ) {
// تعریف آیکون SVG (یک سبد خرید ساده)
$icon = '<svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" width="16" height="16" fill="currentColor" class="bi bi-cart-fill custom-cart-icon" viewBox="0 0 16 16"> <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> </svg>';
// متن دکمه را میگیریم
$button_text = $product->add_to_cart_text();
// آیکون را به قبل از متن اضافه میکنیم
// نکته: ما با استفاده از str_replace متن ساده را با "آیکون + متن" جایگزین میکنیم
$html = str_replace( '>' . $button_text, '>' . $icon . ' ' . $button_text, $html );
}
return $html;
}
تحلیل کد:
- ما از هوک woocommerce_loop_add_to_cart_link استفاده کردیم که HTML کامل دکمه را به ما میدهد.
- یک کد SVG استاندارد تعریف کردیم (شما میتوانید هر SVG دیگری جایگزین کنید).
- با تابع str_replace، دقیقاً جایی که متن دکمه شروع میشود را پیدا کردیم و آیکون را قبل از آن چسباندیم.
مرحله ۳: تغییر دکمه در صفحه تکی محصول (Single Product)
داستان در صفحه تکی محصول کمی متفاوت است. در اینجا ووکامرس معمولاً از دکمههای استاندارد فرم استفاده میکند و متن دکمه با فیلتر woocommerce_product_single_add_to_cart_text قابل تغییر است.
با این حال، چون دکمه صفحه محصول معمولاً داخل تگ <button> است، اضافه کردن HTML (مثل آیکون) گاهی اوقات توسط ووکامرس یا قالب اسکیپ (Strip) میشود. اما روش زیر در ۹۰٪ قالبهای استاندارد کار میکند.
قطعه کد PHP برای صفحه محصول
این کد را زیر کد قبلی اضافه کنید:
add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_icon_add_to_cart_single', 10, 2 );
function custom_icon_add_to_cart_single( $text, $product ) {
// تعریف همان آیکون SVG
$icon = '<svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" width="16" height="16" fill="currentColor" class="bi bi-cart-fill custom-cart-icon" viewBox="0 0 16 16"> <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> </svg>';
// چسباندن آیکون به متن با یک فاصله
return $icon . ' ' . $text;
}
نکته مهم: اگر بعد از اعمال این کد، به جای نمایش آیکون، کدِ خودِ SVG را به صورت متنی روی دکمه دیدید، به این معنی است که قالب شما اجازه درج HTML در متن دکمه را نمیدهد. در این صورت باید از روش CSS (مرحله بعدی) یا تغییر فایل قالب (که پیشنهاد نمیشود) استفاده کنید.
مرحله ۴: زیباسازی با CSS (استایلدهی حرفهای)
حالا که آیکونها اضافه شدند، احتمالا متوجه شدهاید که چسبیده به متن هستند یا تراز نیستند. اینجاست که CSS جادوی خود را نشان میدهد.
برای اضافه کردن CSS، به مسیر نمایش > سفارشیسازی > CSS اضافی بروید و کدهای زیر را وارد کنید.
/* استایل کلی برای آیکون دکمه سبد خرید */
.custom-cart-icon {
display: inline-block;
vertical-align: middle; /* تراز کردن عمودی با متن */
margin-left: 8px; /* فاصله از متن (برای سایتهای فارسی/RTL) */
width: 18px; /* عرض آیکون */
height: 18px; /* ارتفاع آیکون */
transition: all 0.3s ease; /* انیمیشن نرم */
}
/* تغییر رنگ آیکون هنگام هاور کردن موس */
.button:hover .custom-cart-icon,
.single_add_to_cart_button:hover .custom-cart-icon {
transform: translateX(3px); /* حرکت کوچک آیکون هنگام هاور */
}
/* اصلاح چیدمان دکمهها برای اطمینان از قرارگیری در یک خط */
.woocommerce .button,
.woocommerce button.button {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
نکات کلیدی در CSS:
- margin-left: چون سایتهای ما معمولاً راستچین (RTL) هستند، آیکون سمت راست متن قرار میگیرد، پس باید از سمت چپ (سمت متن) فاصله بگیرد.
- display: inline-flex: این ویژگی باعث میشود آیکون و متن دقیقاً در مرکز دکمه و روبروی هم قرار بگیرند.
- transform: یک انیمیشن ریز که حس زندهبودن به دکمه میدهد.
روش جایگزین: استفاده از فونت آیکون (FontAwesome)
اگر قالب شما از قبل FontAwesome را لود کرده است (مثل قالبهای Astra یا OceanWP)، نیازی به کد SVG طولانی ندارید. کافیست در کدهای PHP بالا، متغیر $icon را به صورت زیر تغییر دهید:
// برای FontAwesome
$icon = '<i class="fa fa-shopping-cart custom-cart-icon"></i>';
اگر قالب شما فونت آیکون ندارد، باید ابتدا کتابخانه آن را به هدر سایت اضافه کنید که به دلیل کاهش سرعت، روش SVG پیشنهاد بهتری است.
نکات حرفهای و رفع مشکلات احتمالی
در مسیر شخصی سازی دکمه افزودن به سبد خرید ممکن است با چالشهایی روبرو شوید. در اینجا چند نکته برای حل آنها آوردهایم:
۱. آیکون در برخی محصولات نشان داده نمیشود؟
برخی محصولات مثل “محصولات متغیر”، دکمه “گزینش گزینهها” دارند. کدی که در مرحله ۲ نوشتیم، متن آن دکمهها را هم تغییر میدهد زیرا از تابع add_to_cart_text() استفاده میکند. اگر میخواهید فقط برای محصولات ساده باشد، در شرط if میتوانید نوع محصول را چک کنید.
۲. تداخل با صفحهسازها (Elementor)
اگر از المنتور استفاده میکنید و ویجت اختصاصی “Add to Cart” را در صفحه محصول گذاشتهاید، ممکن است کد مرحله ۳ کار نکند. المنتور تنظیمات خود را دارد. در تنظیمات ویجت المنتور، گاهی گزینهای برای اضافه کردن آیکون وجود دارد، در غیر این صورت باید از روش CSS ::before استفاده کنید.
۳. کش (Cache) را پاک کنید
بعد از اعمال تغییرات در فایل functions.php و CSS، حتما کش سایت و کش مرورگر خود را پاک کنید تا تغییرات را ببینید.
جمعبندی
تبریک میگویم! شما اکنون موفق شدید بدون نصب افزونههای اضافی و تنها با چند خط کد بهینه، یک آیکون دلخواه به دکمه سبد خرید ووکامرس خود اضافه کنید. این تغییر کوچک، تاثیر بزرگی در ظاهر حرفهای فروشگاه شما دارد.
مرور آنچه انجام دادیم:
- از هوک woocommerce_loop_add_to_cart_link برای صفحات فروشگاه استفاده کردیم.
- از هوک woocommerce_product_single_add_to_cart_text برای صفحه محصول استفاده کردیم.
- با استفاده از SVG سرعت سایت را حفظ کردیم.
- با CSS به آیکون استایل و انیمیشن دادیم.
حالا نوبت شماست. خلاقیت به خرج دهید و با تغییر کدهای SVG یا رنگهای CSS، دکمههایی بسازید که کاملاً با برند شما هماهنگ باشند. اگر سوالی داشتید، حتما در بخش نظرات مطرح کنید.
