مرة أخرى هذا الأسبوع ، نلقي نظرة على بعض تخصيصات WooCommerce التي أضفتها شخصيًا إلى A Piece of Sicily ، وهو سوق للحرف والأطعمة في صقلية أديره مع زوجتي التي ستصبح قريبًا.
هذا الأسبوع نلقي نظرة على صفحة منتج واحد. هناك المئات من المكونات الإضافية لمشاركة الوسائط الاجتماعية ، لكنني قررت أن أكون خفيف الوزن وقم ببساطة بتضمين أزرار Twitter Share و Facebook Like ، بحيث لا داعي للقلق بشأن تحديثات المكونات الإضافية ، والتعارضات ، وما إلى ذلك. يمكنك رؤية النتيجة النهائية على إحدى صفحات منتجي ، مثل https://www.apieceofsicily.com/en/shop/sicilian-food/confetture-iddu-e-idda-e-arancella/
إذن ، إليك كيف يتم ذلك. يتمتع!
ها هي النتيجة النهائية: بعض أزرار مشاركة الوسائط الاجتماعية المفيدة على صفحة منتج WooCommerce ، دون استخدام مكون إضافي!
ملاحظة 1: يمكنك الانتقال إلى https://publish.twitter.com/؟buttonType=TweetButton&widget=Button و https://developers.facebook.com/docs/plugins/like-button/ على التوالي لإنشاء HTML الخاص بك بحاجة إلى تضمينها في المقتطف أدناه.
ملاحظة 2: يمنحك كلا النظامين الأساسيين للوسائط الاجتماعية بعض HTML للواجهة الأمامية ، وبعض JAVASCRIPT أيضًا. عليك التأكد من وضع هذين في الأماكن الصحيحة أدناه.
/**
* @snippet Social Media Buttons - WooCommerce Single Product Page
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 5
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'woocommerce_single_product_summary', 'bbloomer_fb_twitter_single_product', 6 );
function bbloomer_fb_twitter_single_product() {
echo '<div>';
echo '<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-hashtags="apieceofsicily" data-related="apieceofsicily" data-show-count="false">Tweet</a>'; // GET THIS HTML FROM TWITTER DOCS LINK ABOVE
echo '<div class="fb-like" data-href="' . get_permalink() . '" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="true"></div>'; // GET THIS HTML FROM FACEBOOK DOCS LINK ABOVE BUT KEEP THE get_permalink() PART
echo '</div>';
}
add_action( 'wp_footer', 'bbloomer_twitter_facebook_js', 9999 );
function bbloomer_twitter_facebook_js() {
if ( is_product() ) {
echo 'https://platform.twitter.com/widgets.js'; // GET THIS HTML FROM TWITTER DOCS LINK ABOVE
echo '<div id="fb-root"></div>https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0'; // GET THIS HTML FROM FACEBOOK DOCS LINK ABOVE
}
}WooCommerce: كيفية تقصير عناوين المنتج
WooCommerce: إزالة / تحرير رسالة “تمت الإضافة إلى عربة التسوق”
WooCommerce: عرض معرض المنتجات عموديًا (صفحة منتج واحدة)
WooCommerce: نموذج الاستفسار عن المنتج @ صفحة منتج واحد (CF7)
WooCommerce: أضف رمزًا إلى أزرار إضافة إلى عربة التسوق
WooCommerce: أعد تسمية زر “إضافة إلى عربة التسوق” إذا كان المنتج بالفعل @ سلة التسوق
WooCommerce: إعادة تسمية وصف المنتج Tab Label @ Single Product Page
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 في حالة حدوث خطأ!
