Storefront هو موضوع مجاني (مع أكثر من 100000 تثبيت نشط) ، تم تطويره وتصميمه بواسطة WooCommerce Core Developers. لقد قمت بتجميع قائمة من المقتطفات بحيث يمكنك تخصيص الصفحة الرئيسية لواجهة المتجر الخاصة بك بسرعة وسهولة.
تحتوي الصفحة الرئيسية لموضوع واجهة المتجر على 6 أقسام:
محتوى الصفحة
قسم فئات المنتجات
قسم المنتجات المميزة
قسم المنتجات الحديثة
قسم المنتجات الأعلى تقييما
قسم المنتجات المعروضة للبيع
قسم المنتجات الأكثر مبيعاً
لعرض أقسام الصفحة الرئيسية على صفحتك الرئيسية ، يجب عليك تعيين قالب الصفحة الرئيسية لصفحتك.
قالب الصفحة الرئيسية لواجهة المتجر
اتبع هذه الخطوات لعرض أقسام واجهة المحل على صفحتك الرئيسية:
انتقل إلى لوحة المعلومات -> الصفحات وأنشئ صفحة رئيسية لعنوان الصفحة
على الجانب الأيمن ، ستجد مربعًا بعنوان ” سمات الصفحة “
حدد ” الصفحة الرئيسية ” من القائمة المنسدلة ” النموذج “.
انقر فوق ” تحديث” لحفظ التغيير.
يمكنك بسهولة إعادة ترتيب أقسام الصفحة الرئيسية لواجهة المتجر باستخدام المكون الإضافي WooThemes Homepage Control. اتبع الخطوات أدناه لإعادة ترتيب أقسام صفحتك الرئيسية:
قم بتنزيل وتثبيت Homepage Control
انتقل إلى المظهر -> تخصيص -> التحكم في الصفحة الرئيسية
قم بسحب وإعادة ترتيب الأقسام حسب حاجتك.
انقر فوق حفظ ونشر لحفظ التغييرات.
يمكنك إزالة أو إخفاء أي أقسام (على سبيل المثال: فئة المنتج ، الأخيرة ، الأكثر مبيعًا) من صفحتك الرئيسية باستخدام المكون الإضافي للتحكم في الصفحة الرئيسية.
اتبع هذه الخطوات لإزالة أقسام الصفحة الرئيسية:
قم بتنزيل وتثبيت Homepage Control
انتقل إلى المظهر -> تخصيص -> التحكم في الصفحة الرئيسية
قم بإلغاء تحديد المربع الموجود بجوار الأقسام التي تريد عرضها.
انقر فوق حفظ ونشر .
يمكنك إضافة أي شريط تمرير إلى الصفحة الرئيسية لواجهة متجرك باستخدام المكون الإضافي Storefront Add Slider. اتبع هذه الخطوات:
قم بتنزيل وتثبيت Storefront Add Slider
انتقل إلى المظهر -> تخصيص -> الصفحة الأمامية الثابتة
الصق الرمز القصير المنزلق في حقل Slider Shortcode
انقر فوق حفظ ونشر
بشكل افتراضي ، تحتوي الصفحة الرئيسية لواجهة المتجر على 6 أقسام. يمكنك عرض فئات المنتجات ، المنتجات الحديثة ، المنتجات المميزة ، المنتجات الشعبية ، المنتجات المعروضة للبيع والمنتجات الأفضل مبيعًا.
إذا أردنا إضافة صورة خلفية إلى تلك الأقسام ، فعلينا تحديد فئة كل قسم. هنا فئة كل قسم.
.storefront-product-categories{}
.storefront-recent-products{}
.storefront-featured-products{}
.storefront-popular-products{}
.storefront-on-sale-products{}
.storefront-best-selling-products{}
الآن دعنا نضع صورة خلفية لقسم المنتجات المميزة في الصفحة الرئيسية لواجهة المتجر. أدخل css أدناه في المظهر -> تخصيص -> CSS إضافية
.storefront-featured-products{
background-image: url(https://www.storefront.www.businessbloomer.com/wp-content/uploads/2017/08/Featured-pattern.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-o-background-size: cover;
}.storefront-featured-products {
background-color:#FFEB3B;
}إذا كنت تريد التخلص من عنوان القسم (تسوق حسب الفئة “أو” جديد في “أو” أفضل البائعين “) من صفحتك الرئيسية ، فأدخله في CSS الإضافية
.storefront-recent-products .section-title {
display:none;
}إذا كنت تريد تغيير عنوان القسم (تسوق حسب الفئة “أو” جديد في “أو” أفضل البائعين “) إلى شيء آخر ، فعليك القيام بذلك عن طريق الخطافات.
فيما يلي قائمة بجميع عوامل تصفية أقسام الصفحة الرئيسية لواجهة المتجر:
storefront_product_categories_args
storefront_recent_products_args
storefront_featured_products_args
storefront_popular_products_args
storefront_on_sale_products_args
storefront_best_selling_products_args
أدخل هذا في وظائف السمات الخاصة بك .php لتغيير عنوان قسم المنتج المميز:
add_filter( 'storefront_featured_products_args', 'bbloomer_storefront_product_featured_title');
function bbloomer_storefront_product_featured_title( $args ) {
$args['title'] = 'New Featured Products Title Here';
return $args;
}add_filter( 'storefront_featured_products_shortcode_args', 'bbloomer_storefront_featured_product_per_page' );
function bbloomer_storefront_featured_product_per_page( $args ) {
$args['per_page'] = 10;
return $args;
}add_filter( 'storefront_featured_products_shortcode_args', 'bbloomer_storefront_featured_product_per_row' );
function bbloomer_storefront_featured_product_per_row( $args ) {
$args['columns'] = 2;
return $args;
}add_filter( 'storefront_product_categories_shortcode_args', 'bbloomer_storefront_category_per_page' );
function bbloomer_storefront_category_per_page( $args ) {
$args['number'] = 10;
return $args;
}add_action( 'storefront_homepage_after_featured_products_title', 'bbloomer_storefront_product_featured_description');
function bbloomer_storefront_product_featured_description(){
echo '<p>Section description here</p>';
}هناك طريقتان يمكنك من خلالهما إزالة قسم المنتجات الأعلى تقييمًا من قالب الصفحة الرئيسية. أحدهما يقوم بتثبيت المكون الإضافي Homepage Control والآخر يزيل باستخدام الخطافات. لنرى كيف يمكننا إزالة قسم المنتجات الأعلى تقييمًا باستخدام الخطافات. ضع هذا في وظائف السمات الخاصة بك
remove_action( 'homepage', 'storefront_popular_products', 50 );إذا كنت تريد تغيير لون الخلفية لقسم المنتجات الأعلى تقييمًا أو المنتجات الشائعة ، فقم بإدراج هذا في المظهر> التخصيص> CSS الإضافية.
.storefront-popular-products {
background-color:#FFEB3B;
}أدخل هذا في المظهر> تخصيص> CSS إضافية لإزالة أو إخفاء عنوان قسم المنتجات المعروضة للبيع.
.storefront-popular-products .section-title {
display:none;
}إذا كنت تريد تغيير عنوان القسم من “للبيع” إلى أي شيء آخر ، فما عليك سوى إدخال هذا المقتطف في الجزء السفلي من وظائف السمة الفرعية الخاصة بك.
add_filter( 'storefront_popular_products_args', 'bbloomer_storefront_product_popular_title');
function bbloomer_storefront_product_popular_title( $args ) {
$args['title'] = __( 'Top Products', 'storefront' );
return $args;
}بشكل افتراضي ، يعرض قسم المنتجات الأعلى تقييمًا في واجهة المتجر 4 منتجات. لنزيدها إلى 12 منتجًا.
add_filter( 'storefront_popular_products_shortcode_args', 'bbloomer_storefront_top_product_per_page' );
function bbloomer_storefront_top_product_per_page( $args ) {
$args['per_page'] = 12;
return $args;
}سيتيح لك مقتطف الشفرة هذا إضافة نص أو HTML بناءً على حاجتك أسفل عنوان قسم المنتجات الأعلى تقييمًا. ما عليك سوى وضع PHP هذا المقتطف في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك قبل “؟>”
add_action( 'storefront_homepage_after_popular_products_title', 'bbloomer_storefront_top_product_description');
function bbloomer_storefront_top_product_description(){ ?>
echo "Section description here";
}هناك طريقتان يمكنك من خلالهما إزالة قسم المنتجات المعروضة للبيع من قالب الصفحة الرئيسية. أحدهما يقوم بتثبيت المكون الإضافي Homepage Control والآخر يزيل باستخدام الخطافات. لنرى كيف يمكننا إزالة قسم المنتجات المعروضة للبيع باستخدام الخطافات. ضع هذا في وظائف السمات الخاصة بك
remove_action( 'homepage', 'storefront_on_sale_products', 60 );إذا كنت تريد تغيير لون الخلفية لقسم المنتجات المعروضة للبيع ، فقم بإدراج هذا في المظهر> التخصيص> CSS الإضافية.
.storefront-on-sale-products {
background-color:#FFEB3B;
}أدخل هذا في المظهر> تخصيص> CSS إضافية لإزالة أو إخفاء عنوان قسم المنتجات المعروضة للبيع.
.storefront-on-sale-products .section-title {
display:none;
}إذا كنت تريد تغيير عنوان القسم من “للبيع” إلى أي شيء آخر ، فما عليك سوى إدخال هذا المقتطف في الجزء السفلي من وظائف السمة الفرعية الخاصة بك.
add_filter( 'storefront_on_sale_products_args', 'bbloomer_storefront_product_sale_title');
function bbloomer_storefront_product_sale_title( $args ) {
$args['title'] = __( 'Huge Discount', 'storefront' );
return $args;
}بشكل افتراضي ، يعرض قسم المنتجات المعروضة للبيع في واجهة المتجر 4 منتجات. لنزيدها إلى 12 منتجًا.
add_filter( 'storefront_on_sale_products_shortcode_args', 'bbloomer_storefront_sale_product_per_page' );
function bbloomer_storefront_sale_product_per_page( $args ) {
$args['per_page'] = 12;
return $args;
}سيتيح لك مقتطف الشفرة هذا إضافة نص أو HTML بناءً على حاجتك أسفل عنوان قسم “المنتجات المعروضة للبيع”. ما عليك سوى وضع PHP هذا المقتطف في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك قبل “؟>”
add_action( 'storefront_homepage_after_on_sale_products_title', 'bbloomer_storefront_sale_product_description');
function bbloomer_storefront_sale_product_description(){ ?>
echo "Section description here";
}تعرض أقسام المنتجات الأكثر مبيعًا المنتجات الأكثر مبيعًا في متجرك. ببساطة ، يقوم بفرز جميع المنتجات حسب إجمالي المبيعات وعرضها بترتيب تنازلي.
هناك طريقتان يمكنك من خلالهما إزالة قسم الأفضل مبيعًا من قالب الصفحة الرئيسية. أحدهما يقوم بتثبيت المكون الإضافي Homepage Control والآخر يزيل باستخدام الخطافات. لنرى كيف يمكننا إزالة قسم أفضل المنتجات مبيعًا باستخدام الخطافات. ضع هذا في وظائف السمات الخاصة بك
remove_action( 'homepage', 'storefront_best_selling_products', 70 );إذا كنت تريد تغيير لون الخلفية لقسم المنتج الأكثر مبيعًا ، فقم بإدراج هذا في المظهر> تخصيص> CSS إضافي.
.storefront-best-selling-products {
background-color:#FFEB3B;
}أدخل هذا في المظهر> تخصيص> CSS إضافية لإزالة أو إخفاء عنوان قسم المنتج الأكثر مبيعًا.
.storefront-best-selling-products .section-title {
display:none;
}إذا كنت تريد تغيير عنوان القسم من “الأفضل مبيعًا” إلى أي شيء آخر ، فما عليك سوى إدخال هذا المقتطف في الجزء السفلي من وظائف السمات الفرعية.
add_filter( 'storefront_best_selling_products_args', 'bbloomer_storefront_product_best_title');
function bbloomer_storefront_product_best_title( $args ) {
$args['title'] = __( 'Most Sold', 'storefront' );
return $args;
}بشكل افتراضي ، يعرض قسم Storefront Best مبيعًا 4 منتجات. لنزيدها إلى 12 منتجًا.
add_filter( 'storefront_best_selling_products_shortcode_args', 'bbloomer_storefront_best_product_per_page' );
function bbloomer_storefront_best_product_per_page( $args ) {
$args['per_page'] = 12;
return $args;
}سيتيح لك مقتطف الشفرة هذا إضافة نص أو HTML بناءً على حاجتك أسفل عنوان القسم الأكثر مبيعًا. ما عليك سوى وضع PHP هذا المقتطف في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك قبل “؟>”
add_action( 'storefront_homepage_after_best_selling_products_title', 'bbloomer_storefront_best_product_description' );
function bbloomer_storefront_best_product_description(){ ?>
echo "Section description here";
}مظهر واجهة المتجر: كيفية إضافة منزلق بعرض كامل
موضوع واجهة المتجر: كيفية تثبيته وتكوينه
موضوع واجهة المتجر: كيفية إزالة فتات الخبز
WooCommerce + Jetpack: استبعاد الصورة من “Lazy Load”
WooCommerce + Storefront: إخفاء عنوان “الصفحة الرئيسية” @ الصفحة الرئيسية
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 في حالة حدوث خطأ!
