حدد موعدًا للمكالمة
اشتراك

تخصيص قوالب ووكومرس وصفحات المنتجات

  • تم التحديث بتاريخ
[aioseo_eeat_author_tooltip]
[aioseo_eeat_reviewer_tooltip]
تخصيص قالب ووكومرس

اليوم، اكتسحت ووكومرس صناعة التجارة الإلكترونية بفضل مرونتها وخيارات التخصيص الرائدة التي توفرها. وتحتل ووكومرس مكانة مرموقة في عالم التجارة الإلكترونية، حيث تستحوذ حالياً على 27% من حصة السوق .

لكن القوالب الجاهزة وصفحات المنتجات لا تلبي احتياجات جميع الشركات. يوفر ووكومرس العديد من خيارات التخصيص.

لتحقيق أداءٍ متميز، يجب على متجرك اتباع أفضل ممارسات التخصيص. ويكمن أحد العناصر الأساسية للتخصيص في صفحات المنتجات والقوالب. ويمكن لاستراتيجية تخصيص مُطبقة بشكلٍ جيد أن تُقلل من حالات التخلي عن سلال التسوق.

بما أن معظم العملاء يزورون متجرك الإلكتروني، يجب عليك تسهيل عملية تصفح المنتجات والقوالب وتخصيصها لضمان النجاح.

توضح لك هذه المقالة كيفية تخصيص قوالب WooCommerce، وتعديل قوالب المنتجات، وتخصيص صفحات المنتجات.

لماذا من المهم لأصحاب المتاجر تخصيص قوالب ووكومرس؟

يُوفر ووكومرس خيارات تخصيص واسعة. يمكنك تخصيص أي شيء، بدءًا من صفحة الدفع وصولًا إلى صفحات المتجر، وصفحات الفئات، وصفحات الشكر، وغيرها. هذا يُساعد متجرك على التميز، ولكن لتحقيق تميز حقيقي، قد يكون تخصيص قوالب ووكومرس مفيدًا.

من الضروري تعديل الصفحات الافتراضية لموقعك الإلكتروني لتمييزه عن منافسيك. كما يمكنك تخصيص القوالب الافتراضية لمنح عملك ميزة تنافسية.

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

اقرأ : كيف أقوم بتحديث بطاقة الخصم الخاصة بي على ووكومرس

تخصيص قوالب ووكومرس باستخدام لغة PHP

تتيح لك الإضافات ومقاطع التعليمات البرمجية تعديل أي جانب تقريبًا من موقعك الإلكتروني. باستخدام ووكومرس، يمكنك تعديل القوالب برمجيًا.

فيما يلي طريقتان لتخصيص القوالب برمجياً:

  • استبدال القوالب
  • مع خطافات

كلا الطريقتين فعالتان، فاختر الأسهل لك. عليك فهم الاختلافات الرئيسية بينهما لتحديد متى تستخدم كل طريقة.

الخطافات مقابل الكتابة فوق القوالب

باستخدام الخطافات، يمكن إجراء تعديلات بسيطة باستخدام الإجراءات والفلاتر. ومن خلال استبدال ملفات القوالب، يمكنك إجراء تخصيصات أكثر تعقيدًا.

بالإضافة إلى ذلك، يُرجى عدم استبدال ملف القالب بخطاف إذا كان مُستخدمًا في ملف قالب مُحدد. سيؤدي استبدال القالب إلى استبدال الخطافات المُستخدمة في ذلك الملف، ولن تكون فعّالة بعد ذلك.

اختر الطريقة التي تناسب احتياجاتك بعد تحديد احتياجاتك.

استكشف : أفضل إضافات جداول منتجات ووكومرس

تعديل قوالب ووكومرس عن طريق الكتابة فوقها

عند إجراء تعديلات معقدة، فإن استبدال القوالب الخاصة بك أفضل من استخدام الخطافات.

وبالمثل، فإن تعديل ملف functions.php مشابه جدًا. يجب تعديل ملفات قالب WooCommerce الرئيسية بدلاً من ملفات القالب.

انقر فوق الإضافات > محرر الإضافات، واختر WooCommerce من القائمة المنسدلة، ثم اختر القوالب لعرض ملفات القوالب.

يحتوي هذا القسم على جميع الملفات الرئيسية التي تحتاج إلى تعديلها، وهي: archive-product.php و content-product-cat.php و content-product.php. كما يُمكنك تعديل ملفات القوالب في أماكن متعددة، مثل سلة التسوق، وصفحة الدفع، والبريد الإلكتروني.

تحتوي ملفات قالب WooCommerce على العديد من العناصر التي يمكنك تغييرها. يتيح لك ذلك تخصيص كل من المجلدات الفرعية والمجلدات الرئيسية.

الخطوة التالية هي الاطلاع على قوالب ووكومرس المخصصة.

أضف رموزًا مختصرة إلى قوالب ووكومرس.

تُعدّ الرموز المختصرة طريقة شائعة لتخصيص كود ووكومرس. ولتعديل القوالب، يوفر لك كل من ووردبريس ووكومرس مجموعة من الرموز المختصرة.

فيما يلي نص برمجي يعرض لوحة تحكم حسابي في ووكومرس على كل صفحة منتج. أضفه إلى ملف single-product.php وقم بتحديثه.

إذا لم يتم تعريف 'ABSPATH'، فسيتم
الخروج من البرنامج. يتم استدعاء

الدالة get_header('shop') في حلقة لا نهائية،
حيث يتم استدعاء
الدالة the_post()
يتم استدعاء الدالة wc_get_template_part('content,' 'single-product')
في نهاية الحلقة. بعد ذلك، يتم
استدعاء الدالة do_action('woocommerce_sidebar')
$t إلى '

My Account

'، ثم

يتم تعيين قيمة المتغير $t إلى '[woocommerce_my_account]'، ثم يتم تعيين قيمة المتغير $t إلى '"'. وأخيرًا، يتم استدعاء الدالة get_footer('shop') في نهاية الحلقة.

ستظهر لوحة التحكم بعد معاينة صفحات المنتج.

تأكد من أن العميل يعلم أنه اشترى هذا المنتج من قبل

يمكن أيضًا تعديل قوالب ووكومرس لتقديم خصومات للعملاء الدائمين. هنا أيضًا، انسخ والصق الكود في صفحة single-product.php.

get_header('shop');
while (have_posts()) :
the_post();
wc_get_template_part('content', 'single-product');
endwhile; // نهاية الحلقة.
$current_user = wp_get_current_user();
if (wc_customer_bought_product($current_user->user_email, $current_user->ID, $product->get_id())):
echo '
♥ مرحبًا ' . $current_user->first_name . ', لقد اشتريت هذا المنتج من قبل. اشترِ مرة أخرى باستخدام هذا الكوبون: PURCHASE_AGAIN_21
';
endif;
get_footer('shop');

سيظهر للعملاء رسالة إتمام عملية الشراء بعد عرض منتج قاموا بشرائه بالفعل.

استكشف : ماجنتو مقابل ووكومرس: ما هو الخيار الأفضل في عام 2023؟

تعديل قوالب ووكومرس باستخدام الخطافات

تُعدّ الخطافات مفيدةً أيضاً في تخصيص قوالب ووكومرس إذا لم تكن ترغب في استبدال ملفات القالب. يمكنك إضافة الخطافات كإجراءات أو فلاتر إلى موقعك الإلكتروني لزيادة وظائفه بسرعة وإجراء تغييرات بسيطة.

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

افتح ملف functions.php الخاص بك في Appearance > Theme Editor وانسخ والصق مقتطف الشفرة مع خطافات الإجراء أو التصفية الخاصة بك.

فيما يلي بعض الأمثلة على الخطافات المتاحة لتعديل قوالب WooCommerce.

إضافة معلومات إلى صورة منتج واحدة

إذا كنت ترغب في عرض معلومات إضافية حول المنتج أعلى الصورة، فأدرج الكود التالي في ملف functions.php.

// إضافة دالة مخصصة
function quadlayers_before_single_product() {
echo '

كل شيء عليه خصم 25% هذا الأسبوع!

';
}
// إضافة الإجراء
add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 );

ستظهر هذه الرسالة في صفحات المنتجات الفردية.

تخصيص قالب ووكومرس باستخدام الإضافات

هل تواجه صعوبة في جوانب البرمجة؟ لا مشكلة. لا يزال بإمكانك تخصيص قوالب ووكومرس باستخدام الإضافات. ومع نمو هذا المجال، تتوفر إضافات لا حصر لها لتخصيص قوالبك.

إليكم الإضافة الأكثر فعالية: Edit WooCommerce Templates . إنها إضافة مجانية سهلة الاستخدام تتيح لكم تخصيص قوالب موقعكم. ببضع نقرات، يمكنكم استبدال القوالب واستعادة الإعدادات الافتراضية في أي وقت.

فيما يلي بعض إضافات WooCommerce الإضافية التي تتيح لك تخصيص القوالب وتحسين أداء متجرك.

تعرف على : كيفية إعداد حجوزات ووكومرس؟

تخصيص صفحات منتجات ووكومرس: لماذا هو أمر ضروري؟

يُعدّ تخصيص صفحات منتجات WooCommerce أمرًا بالغ الأهمية، فلا تفوّت هذه الفرصة. فوائد ومزايا تخصيص صفحات منتجات WooCommerce لا حصر لها. فبفضل ذلك، يُمكنك تبديد مخاوف العملاء، وتقديم تجربة تسوق مميزة، وتعزيز رضاهم.

فيما يلي بعض الفوائد الأساسية لتطبيق التخصيص على صفحات المنتجات:

صفحات مُحسّنة لتحقيق التحويلات

يمكن لصفحة المنتج المُخصصة أن تزيد من معدلات التحويل. ويمكن تطبيق العديد من الخيارات، بما في ذلك خيارات البحث والتصفية. وبالتالي، سيتمكن العملاء من العثور على المنتجات وشرائها بسهولة أكبر وبأقل قدر من التعقيدات.

اجعله أكثر جاذبية

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

يمكن تحسين تجربة المستخدم

تأكد من أن خيارات التصميم واضحة وبديهية، وأن سرعة التحميل عالية، والتنقل سهل، وأن عملاءك سيحظون بتجربة رائعة. سيؤدي ذلك إلى زيادة المبيعات وكسب عملاء دائمين.

اعرف : أفضل إضافات منتجات ووكومرس

طرق تخصيص صفحات المنتجات

للحفاظ على جاذبية متجرك البصرية، عليك تخصيص صفحات منتجاتك. إليك ثلاث طرق أساسية لتخصيص صفحات المنتجات بنجاح:

  1. حسّن صفحات منتجات ووكومرس باستخدام الإضافات

باستخدام ووكومرس، يمكنك إنشاء متجر إلكتروني بسهولة. تتوفر العديد من الإضافات لتحسين متجرك، بما في ذلك تلك التي تُخصّص صفحات المنتجات.

تخصيص صفحات المنتجات باستخدام إضافات WooCommerce أمر سهل:

الإضافات

ذات صلة : أكثر من 40 إضافة من أفضل إضافات ووكومرس [مجانية ومدفوعة]

  1. تخصيص صفحات منتجات ووكومرس باستخدام CSS

يُمكنك استخدام CSS لتخصيص منتجات WooCommerce لجعل متجرك الإلكتروني مميزًا ومنح عملائك تجربة فريدة. لتغيير صفحات منتجاتك، اكتب كود CSS.

بعد تسجيل الدخول، انتقل إلى المظهر ← تخصيص.

كود CSS لزر دعوة للعمل باللون الأسود

إضافة هذا الكود إلى CSS الإضافي سيغير لون زر الحث على اتخاذ إجراء الافتراضي إلى اللون الأسود.

button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt {
background-color: #1d1a1a;
border-color: #333333;
color: #ffffff;
}

كود CSS لزر دعوة للعمل باللون الأزرق

علاوة على ذلك، لتحويل اللون الأسود إلى اللون الأزرق، استخدم كود CSS التالي.

button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt {
background-color: #4f5dd5;
border-color: #333333;
color: #ffffff;
}
  1. أضف رمزًا مخصصًا إلى صفحات منتجات WooCommerce

إذا كنت تمتلك فهمًا تقنيًا واسعًا، يمكنك بسهولة تنفيذ تخصيص صفحة المنتج عبر التعليمات البرمجية المخصصة.

تعرّف على : لماذا تُعدّ الأسئلة الشائعة ضرورية لمتجر ووكومرس الخاص بك؟

الخطوة 1: إنشاء قالب عالمي

للبدء، من الضروري إنشاء قالب عالمي سيتم استخدامه لجميع صفحات المنتجات.

ابدأ بتعليق PHP يوضح اسم القالب في الأعلى.

قم بإنشاء ملف template-custom-product.php وضعه في القالب المُفعّل.

<?php /*Template Name: Customize Product*/ ?>

يستخدم هذا القالب صفحة المنتج الافتراضية لـ WooCommerce. إليك الكود.

$params = array('posts_per_page' => 5, 'post_type' => 'product');
$wc_query = new WP_Query($params);
?>
have_posts()) : ?>
have_posts()) :
$wc_query->the_post(); ?>







إنه قالب أساسي. ورغم أنه يؤدي الغرض، إلا أنه يمكنك فعل المزيد باستخدام ووكومرس.

يوفر WooCommerce العديد من الوظائف لتخصيص صفحات عرض منتجاتك والتي تتضمن مجموعة واسعة من المعلومات:

the_permalink() – يعرض رابط المنتج.
the_content() – يعرض الوصف الكامل للمنتج.
the_excerpt() – يعرض وصفًا موجزًا ​​للمنتج.
the_ID() – يعرض معرّف المنتج
the_title() – يعرض اسم المنتج.
the_post_thumbnail() – يعرض صورة المنتج.

الخطوة الثانية: إضافة الوظائف في ملف functions.php الخاص بالقالب المُفعّل

عرض فئات منتجات ووكومرس

تُستخدم الفئات لتصنيف منتجاتك. فعّل القالب واستورد هذا الجزء من التعليمات البرمجية إلى ملف functions.php لتحديد فئة المنتج.


إذا لم يتم تعريف 'ABSPATH'،

فسيتم
إنهاء العملية.
...


get_sku() || $product->is_type( 'variable' ) ) ) : ?>
get_sku() ) ? $sku : esc_html__( 'غير متوفر', 'woocommerce' ); ?>

get_id(), ', ', ' ' . _n( 'الفئة:', 'الفئات:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', ' ' ); ?>
get_id(), ', ', ' ' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', ' ' ); ?>

عرض صور مصغرة لفئات المنتجات

تتوفر صورة مصغرة لكل فئة من فئات المنتجات. عندما تكون جاهزًا لإعداد عرض منتجاتك المخصص، أضف هذا الكود إلى ملف template.php أو functions.php الخاص بقالبك.

دالة cwresponse_get_thumbnail(){
إذا كانت الصفحة 205 {
$args = array(
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug'
)
)
);
$random_products = get_posts( $args );
foreach ( $random_products as $post ) : setup_postdata( $post );
?>
endforeach;
wp_reset_postdata();
}
}
add_action('wp_footer', 'cwresponse_get_thumbnail');

تخلص من عنوان الوصف.

عند استخدام Woocommerce، ما عليك سوى إلغاء تحديد حقل الوصف لكل علامة تبويب منتج، وتعديل ملف functions.php لإضافة الكود التالي.

add_filter( 'woocommerce_product_description_heading', '__return_null' );

إزالة عنوان المنتج

إليك كيفية إزالة العنوان في علامات تبويب المنتج الفردي في ووكومرس: ضع هذا الكود في ملف functions.php.

remove_action( 'woocommerce_single_product_summary',
'woocommerce_template_single_title' );

الخطوة 3: تغيير قوالب ووكومرس

ضع الكود أدناه في ملف content-single-product.php أو في مجلد المنتج الفردي ضمن woocommerce/templates. من الأفضل استخدام ملف functions.php.

<div class="images" style=";text-align:right;direction:rtl"><?php if ( has_post_thumbnail() ) { $image_caption = get_post( get_post_thumbnail_id() )-> post_excerpt; $image_link = wp_get_attachment_url( get_post_thumbnail_id() ); $image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array( 'title' => get_the_title( get_post_thumbnail_id() ) ) ); $attachment_count = count( $product->get_gallery_attachment_ids() ); if ( $attachment_count > 0 ) { $gallery = '[product-gallery]'; } else { $gallery = ''; } echo apply_filters( 'woocommerce_single_product_image_html', sprintf( ' <a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a> ', $image_link, $image_caption, $image ), $post->ID ); } else { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" /> ', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID ); } ?><?php do_action( 'woocommerce_product_thumbnails' ); ?></div>

أو يمكنك ببساطة كتابة كود CSS.

.images { float: right! important; }

أخيرًا! لقد انتهيت.

اعرف المزيد: كيف تضيف خدمة الشحن إلى ووكومرس؟

خاتمة

إن إنشاء صفحات وقوالب منتجات WooCommerce فريدة وجذابة بصريًا يعزز تجربة التسوق للعملاء.

سيسمح لك استخدام التجاوزات والخطافات والفلاتر وتخصيص CSS بتخصيص صفحات منتجاتك لتلبية توقعات عملائك والتوافق مع هوية علامتك التجارية.

حسّن استجابة متجرك الإلكتروني المبني على منصة WooCommerce للأجهزة المحمولة، وقم بتخصيصه لتعزيز تجربة المستخدم بشكل عام. ابدأ بتطبيق ممارسات التخصيص، واجعل متجرك يحقق أقصى استفادة.

هل تبحث عن مساعدة احترافية في تخصيص ووكومرس؟ تواصل معنا اليوم!

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

عرض جميع المنشورات
شرح المواقع الإلكترونية المزيفة للمصممين: كيفية اكتشاف المخاطر قبل الشراء

شرح مواقع المصممين المزيفة: كيفية اكتشاف المخاطر قبل الشراء

مواقع المصممين المزيفة هي متاجر إلكترونية مقلدة تنسخ العلامات التجارية للعلامات التجارية الفاخرة مثل

أسعار ووردبريس: كم يكلف موقع ووردبريس؟

أسعار ووردبريس: كم تبلغ تكلفة موقع ووردبريس؟

أصبحت أسعار ووردبريس عاملاً أساسياً لأي شخص يتطلع إلى إنشاء موقع ويب باستخدام

أفضل مزودي الخوادم المخصصة

أفضل مزودي الخوادم المخصصة في عام 2025 [اختيارات الخبراء]

تشمل أفضل شركات توفير الخوادم المخصصة في عام 2026 شركة Liquid Web، التي تبدأ أسعارها من 199 دولارًا شهريًا

عرض جميع المنشورات  

ابدأ مع سيهوك

سجل في تطبيقنا للاطلاع على أسعارنا والحصول على خصومات.

يتعلم أكثر
ابدأ الآن

أحتاج إلى مساعدة في..

عمليات البحث الشائعة: