WooCommerce: تبديل خلفية الصورة في تحديد تباين الألوان

يمكنك تحميل 10 صور ، واحدة لكل لون لمنتجك المتغير … أو يمكنك أن تكون أكثر ذكاءً قليلاً وتحميل صورة واحدة “فارغة” ، وبعد ذلك عندما يختار المستخدم لونًا يؤدي إلى تغيير لون الخلفية!

أسهل في البرمجة من الشرح ، لذلك دعونا نلقي نظرة على لقطة الشاشة أدناه ( يجب أن تكون الصورة بتنسيق PNG بخلفية شفافة ) ومقتطف PHP. هذا يمكن أن يكون موفرًا للوقت ، استمتع!

الناتج النهائي: يتحول لون الخلفية إلى “أحمر” بمجرد تحديد الاختلاف “الأحمر”.

عندما يتم اختيار اللون الأصفر

عندما لا يتم تحديد الاختلاف

مقتطف PHP: تبديل لون خلفية الصورة المميزة على تباين الألوان حدد @ صفحة منتج واحدة

/**
 * @snippet       Switch Image Background @ WooCommerce Single Variable Product
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 4.0
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_after_variations_form', 'bbloomer_switch_image_background_variable_colors' );
 
function bbloomer_switch_image_background_variable_colors() {
    
   wc_enqueue_js( "
    
      $('input.variation_id').change(function(){
         if('' != $('input.variation_id').val()) {
            if($('#pa_color').val() =='red'){
               $('.woocommerce-product-gallery figure').css('background-color', 'red');
            } else if($('#pa_color').val() =='yellow'){
               $('.woocommerce-product-gallery figure').css('background-color', 'yellow');
            } 
         } else {
            $('.woocommerce-product-gallery figure').css('background-color', 'transparent');
         }
      });
    
   ");
    
}

المنشورات ذات الصلة:

WooCommerce: عرض الأسهم المتباينة في صفحة المتجر

WooCommerce: عرض الفيديو بدلاً من صور المنتج

WooCommerce: تحرير عنوان URL لصورة المنتج الخارجية

WooCommerce: أضف حقلًا مخصصًا إلى تنويعات المنتج

WooCommerce: أضف محتوى أسفل صور منتج واحد

WooCommerce: احصل على معرف التباين المحدد حاليًا

WooCommerce: اعرض دائمًا سعرًا مختلفًا لمنتج واحد

WooCommerce: قم بتعطيل متغيرات المخزون غير المتوفر في القائمة المنسدلة للمنتج المتغير

WooCommerce: صورة مميزة بعرض كامل @ صفحة منتج واحدة

أين تضيف هذا المقتطف؟

يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”

هل هذا المقتطف (لا يزال) يعمل؟

يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.

إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂

هل تحتاج إلى مساعدة في WooCommerce؟

تحقق من دروس الفيديو المجانية هذه. يمكنك تعلم كيفية تخصيص WooCommerce بدون مكونات إضافية غير ضرورية ، وكيفية تكوين إعدادات البرنامج المساعد WooCommerce بشكل صحيح وحتى كيفية إتقان استكشاف أخطاء WooCommerce في حالة حدوث خطأ!