لقد رأينا بالفعل كيفية فتح زر “شراء منتج” منتج خارجي في علامة تبويب متصفح جديدة – والآن حان الوقت لإكمال الصورة الكاملة لمنتجات WooCommerce الخارجية / التابعة: كيف نربط أيضًا الصورة “المميزة” بـ نفس عنوان URL الخارجي؟
هدفنا هو جعل الصورة المميزة للمنتج الخارجي مرتبطة بعنوان URL “شراء المنتج” نفسه
مقتطف PHP الجزء 1: تعطيل التكبير / المعرض (للمنتجات الخارجية)
إذا أردنا الارتباط بعنوان URL ، فنحن بحاجة أولاً إلى تعطيل وظائف WooCommerce Zoom و lightbox Gallery الافتراضية.
يمكنك استخدام https://businessbloomer.com/woocommerce-disable-zoom-gallery-slider-lightbox-single-product/ لذلك.
تأكد أيضًا من تعطيل معرض المنتجات ، على سبيل المثال أن المنتج الخارجي يحتوي على صورة مميزة واحدة فقط.
مقتطف PHP الجزء 2: ربط صورة مميزة بعنوان URL خارجي للمنتج @ WooCommerce صفحة منتج واحد
/**
* @snippet Image to External URL - WooCommerce Single Product
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 3.8
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'bbloomer_image_link_external_url', 100, 2 );
function bbloomer_image_link_external_url( $html, $post_thumbnail_id ) {
global $product;
if ( ! $product->is_type( 'external' ) ) return $html;
$url = $product->add_to_cart_url();
$pattern = "/(?<=href=(\"|'))[^\"']+(?=(\"|'))/";
$html = preg_replace( $pattern, $url, $html );
return $html;
}
المنشورات ذات الصلة:
WooCommerce: عرض الفيديو بدلاً من صور المنتج
WooCommerce: أضف محتوى أسفل صور منتج واحد
WooCommerce: صورة مميزة بعرض كامل @ صفحة منتج واحدة
WooCommerce: كيفية تقصير عناوين المنتج
WooCommerce: عرض معرض المنتجات عموديًا (صفحة منتج واحدة)
WooCommerce: نموذج الاستفسار عن المنتج @ صفحة منتج واحد (CF7)
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 في حالة حدوث خطأ!