WooCommerce: عرض المحتوى أعلاه Add to Cart @ Single Product Page

قرر أحد العملاء إضافة إشعار صغير (“عرض سياسة الإرجاع لمدة 30 يومًا”) أعلى الزر “إضافة إلى عربة التسوق” في صفحة منتج WooCommerce الفردي. ليست هناك حاجة للقول إن هذا سيسمح لها بزيادة نسبة النقر إلى الظهور ومعدل تحويل المبيعات.

فكيف للقيام بذلك؟ مرة أخرى ، الأمر بسيط للغاية. ما عليك سوى نسخ / لصق المقتطف التالي في ملف نموذج jobs.php الخاص بك:

مقتطف PHP لإظهار النص أعلاه أضف إلى عربة التسوق:

/**
 * @snippet       Adds notice at single product page above add to cart
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=349
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.4.5
 */
 
add_action( 'woocommerce_single_product_summary', 'bbloomer_show_return_policy', 20 );
 
function bbloomer_show_return_policy() {
    echo '<p class="rtrn">30-day return policy offered. See Terms and Conditions for details.</p>';
}

تخصيص CSS

كما لاحظت ، فإن علامة فقرة HTML لها “معرف” بحيث يمكنك تصميمها عبر CSS. في المثال الخاص بي ، كتبت هذا في ملف custom.css:

.rtrn {
text-align: center;
font-style: italic;
}

ها هي النتيجة النهائية لمقتطف WooCommerce:

WooCommerce: إضافة إشعار @ صفحة منتج واحد

WooCommerce: إضافة إشعار @ صفحة منتج واحد

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

WooCommerce: إصلاح خطأ فادح اتصل بوظيفة غير محددة wc_get_order ()

WooCommerce: is_single () لا يعمل [محلول]

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

WooCommerce: تعطيل نشر Jetpack للمنتجات

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

WooCommerce: قم بتغيير كمية إضافة إلى عربة التسوق في قائمة اختيار المنسدلة

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

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 في حالة حدوث خطأ!