چطوری تو ووکامرس عین دیجیکالا قابلیت + آیکونی مثل ارسال امروز، اکونومی و... بسازم؟

[parsa.m 0]

سلام

چطوری تو ووکامرس عین دیجیکالا قابلیت + آیکونی مثل ارسال امروز، اکونومی و... بسازم؟

تشکر

[zarinhost 65]

در 2 دقیقه قبل، parsa.m گفته است :

چطوری تو ووکامرس عین دیجیکالا قابلیت + آیکونی مثل ارسال امروز، اکونومی و... بسازم؟

سلام @parsa.m عزیز

برای ایجاد قابلیتی مشابه با نشان‌هایی مانند "ارسال امروز" یا "اکونومی" در ووکامرس، می‌توانید از ترکیبی از امکانات ووکامرس و افزونه‌های شخصی‌سازی استفاده کنید. در ادامه، مراحل ایجاد چنین قابلیتی آورده شده است:

1. استفاده از برچسب‌های سفارشی (Custom Badges)

افزونه‌هایی وجود دارند که به شما امکان می‌دهند نشان‌های سفارشی را برای محصولات خود ایجاد کنید. برخی از افزونه‌های پیشنهادی:

• Product Labels for WooCommerce
• YITH WooCommerce Badge Management
• Advanced Product Labels for WooCommerce

مراحل:

1. نصب افزونه: یکی از افزونه‌های بالا را نصب و فعال کنید.
2. ایجاد نشان (Badge): به تنظیمات افزونه بروید و نشان‌هایی مانند "ارسال امروز" یا "اکونومی" را با طراحی دلخواه ایجاد کنید.
3. شرایط نمایش: برای هر نشان، شرایط خاصی تنظیم کنید (مانند نمایش نشان برای محصولات خاص، دسته‌بندی‌ها، یا در صورت فعال بودن روش ارسال خاص).

2. افزودن نشان با استفاده از ویژگی‌های محصول (Product Attributes)

اگر افزونه نمی‌خواهید، می‌توانید از ویژگی‌های ووکامرس استفاده کنید:

1. ایجاد ویژگی جدید:

   • به پیشخوان وردپرس > محصولات > ویژگی‌ها بروید.
   • یک ویژگی جدید به نام مثلاً "ارسال" ایجاد کنید.
   • مقادیر این ویژگی را مانند "ارسال امروز"، "اکونومی" و ... اضافه کنید.

2. افزودن به محصول:

   • به صفحه ویرایش یک محصول بروید.
   • در بخش ویژگی‌ها، ویژگی "ارسال" را انتخاب کرده و مقدار مناسب را برای آن محصول وارد کنید.

3. نمایش در قالب:
   برای نمایش این ویژگی به شکل یک نشان (Badge)، باید کمی کدنویسی کنید:

   • به پیشخوان وردپرس > نمایش > ویرایشگر پوسته بروید.
   • فایل single-product.php را ویرایش کرده و کدی مانند زیر را اضافه کنید:

      
     <?php global $product; $attributes = $product->get_attributes(); if ( isset( $attributes['ارسال'] ) ) { echo '<div class="product-badge">' . esc_html( $attributes['ارسال'] ) . '</div>'; } ?>

      
   • با CSS، ظاهر نشان را سفارشی کنید.

3. استفاده از افزونه‌های ارسال حرفه‌ای

اگر نشان‌ها مرتبط با روش ارسال هستند (مانند "ارسال امروز" یا "اکونومی")، می‌توانید از افزونه‌هایی استفاده کنید که روش‌های ارسال سفارشی ایجاد می‌کنند. برخی از افزونه‌های پیشنهادی:

• Flexible Shipping for WooCommerce
• WooCommerce Advanced Shipping
• Table Rate Shipping for WooCommerce

مراحل:

1. ایجاد روش ارسال:
   • به بخش ووکامرس > تنظیمات > حمل‌ونقل بروید و روش‌های ارسال را تنظیم کنید.
2. افزودن برچسب:
   • برای هر روش ارسال، نامی مانند "ارسال امروز" انتخاب کنید.
   • افزونه به‌طور خودکار این برچسب را به کاربران نشان می‌دهد.

4. ایجاد نشان با کدنویسی (بدون افزونه)

اگر به کدنویسی مسلط هستید، می‌توانید نشان‌ها را مستقیماً در قالب خود ایجاد کنید:

1. ویرایش فایل قالب:
   فایل functions.php یا فایل‌های مربوط به ووکامرس را باز کنید.
2. افزودن کد برای نمایش نشان:
   کدی مانند زیر را اضافه کنید:

   add_action( 'woocommerce_after_shop_loop_item_title', 'custom_product_badge', 10 ); function custom_product_badge() { global $product; $categories = wp_get_post_terms( $product->get_id(), 'product_cat' ); foreach ( $categories as $category ) { if ( $category->slug == 'ارسال-امروز' ) { // نام دسته‌بندی یا شرط خاص echo '<span class="product-badge">ارسال امروز</span>'; } } }

    
   • ظاهر نشان را با CSS تنظیم کنید.

5. طراحی اختصاصی با CSS

اگر فقط می‌خواهید ظاهری خاص داشته باشید:

1. اضافه کردن کلاس به محصولات:
   در تنظیمات یا کدنویسی، یک کلاس مثل .badge-today به محصولات اضافه کنید.
2. سفارشی کردن ظاهر:
   در فایل CSS قالب، استایل دلخواه خود را اضافه کنید:

   .badge-today { background-color: #f0c14b; color: #111; padding: 5px 10px; border-radius: 3px; font-size: 12px; font-weight: bold; }

    

نتیجه نهایی

با روش‌های بالا، می‌توانید نشان‌هایی مشابه دیجی‌کالا در سایت خود داشته باشید. اگر به مشاوره بیشتر یا کدنویسی خاص نیاز داشتید، اطلاع دهید! 😊