OpenByt - مصدرك النهائي لمعرفة ووردبريس مجانًا

الدليل الكامل لإضافة معلومات المنتج وتخصيصها في WooCommerce

في WooCommerce، توفر سمات المنتج طريقة مرنة لتحديد الخصائص المختلفة لأنواع مختلفة من المنتجات. يمكن أن يؤدي إعداد سمات المنتج إلى تحسين تجربة المستخدم من خلال مساعدة العملاء في العثور بسرعة على التفاصيل الأساسية، مثل اللون, الحجمأو المواد. يؤدي إثراء صفحات المنتجات بالمعلومات التفصيلية إلى زيادة عمق المحتوى، مما يفيد تحسين محركات البحث (SEO) وتحسين ظهور المنتج.

تغطي هذه المقالة العديد من الطرق لإضافة معلومات إضافية إلى صفحات منتجات WooCommerce، بما في ذلك استخدام WooCommerce’s الميزات المدمجة، فإن الحقول المخصصة المتقدمة (ACF) المكوِّن الإضافي، و كود مخصص. اختر الطريقة التي تناسب احتياجاتك.

لماذا تؤدي إضافة معلومات إضافية إلى تحسين تجربة المستخدم وتحسين محركات البحث

For example, if you sell apparel, customers may want to know about color, size, and fabric. By setting these attributes, WooCommerce automatically displays them under the “معلومات إضافية” tab on the product page, allowing users to access essential details quickly. This functionality enables better product comparison for users and improves the page’s SEO performance by adding relevant content.

Method 1: Adding Additional Information Using WooCommerce’s Built-In Features

تقدم WooCommerce طريقة مباشرة لإضافة سمات المنتج مباشرةً إلى شاشة تحرير المنتج. إليك الخطوات:

الخطوة 1: سجِّل الدخول إلى لوحة تحكم WooCommerce

Navigate to the WordPress dashboard, click “المنتجات,” and select the product for which you want to add additional information.

Step 2: Locate the “Product Data” Section

In the product editor, scroll down to the “بيانات المنتج” panel, and select the “السمات” tab.

الخطوة 3: إضافة السمات

Click the “إضافة جديد” button to define new attributes such as “اللون" أو "الحجم."

الخطوة 4: تعيين رؤية السمة

Check the “Visible on the product page” option to ensure these attributes appear under the “Additional Information” tab on the product page.

الخطوة 5: حفظ المنتج وتحديثه

Click the “تحديث” button to save your changes. Once saved, the “Additional Information” tab on the product page will automatically display these attributes.

مثال على ذلك

If you’re selling a T-shirt that comes in three colors (Red, Blue, Green) and three sizes (S, M, L), you can set the “Color” attribute to “Red | Blue | Green” and the “Size” attribute to “S | M | L.” When the “Visible on the product page” option is checked, customers will see these options under the “Additional Information” tab.

الطريقة 2: إضافة معلومات إضافية باستخدام ملحق الحقول المخصصة الآمنة (SCF)

While WooCommerce’s built-in attributes are helpful, more is needed for certain needs. With the الحقول المخصصة الآمنة (SCF) المكوّن الإضافي، يمكنك إضافة المزيد من الحقول المخصصة لعرض تفاصيل إضافية عن المنتج، مثل المواد وتعليمات العناية.

الخطوة 1: تثبيت المكون الإضافي ACF

Go to “المكونات الإضافية” in the WordPress dashboard, search for “الحقول المخصصة الآمنة,” and click “Install” and “Activate.”

الخطوة 2: إنشاء مجموعة ميدانية

Go to “SCF” from the WordPress dashboard and select “Add New Field Group.” This allows you to define custom fields for your products.

الخطوة 3: تحديد الحقول

Within the field group, add new fields such as “المواد" أو "إرشادات العناية.” Choose field types like text, text area, or image as needed.

Here’s a breakdown of some common field types:

مثال على ذلك:

لنفترض أنك تبيع الأثاث الخشبي وتريد إضافة الحقول المخصصة التالية:

  1. المواد—This could be a “Text” field to input specific wood types, such as “Oak” or “Maple.”
  1. إرشادات العناية – Set this as a “Text Area” where you can detail care tips, such as “Wipe with a dry cloth. Avoid direct sunlight.”
  1. شعار الشهادة – Use an “Image” field to upload a certification seal or eco-friendly badge.

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

الخطوة 4: تعيين قواعد العرض

In the “Settings” section, define the conditions under which these custom fields should be displayed on product pages. You can apply these fields to all products or specific categories, tags, or even individual products.

الخطوة 5: أدخل المعلومات في محرر المنتج

Once the fields are defined and display rules are set, go to the WooCommerce product editor for any product that meets the criteria. You will now see the custom fields you’ve created and can enter relevant information for each one.

الخطوة 6: تعديل قالب المنتج (اختياري)

To display these custom fields on the front end of the product page, you may need to edit WooCommerce’s template files (e.g., single-product.php). Use SCF’s the_field() function to output the field values like so:

<div class="product-material">

    <h4>المادة:</h4>

    <p><?php the_field('material'); ?></p>

</div>

الطريقة 3: إضافة معلومات إضافية باستخدام رمز مخصص

By adding code to your theme’s functions.php file, you can add fields directly to the WooCommerce product editing screen for more advanced customization.

الخطوة 1: إضافة حقل مخصص إلى محرر المنتج

استخدم خطاف woocommerce_product_prooptions_general_product_data لإضافة حقل مخصص إلى شاشة تحرير المنتج.

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_general_fields' );

function add_custom_general_fields() {

    woocommerce_wp_text_input( array(

        'id' => '_custom_product_text_field',

        'label' => __( 'Custom Product Field', 'woocommerce' ),

        'desc_tip' => 'true',

        'description' => __( 'Enter custom field content', 'woocommerce' )

    ));

}

الخطوة 2: حفظ قيمة الحقل المخصص

Use the woocommerce_process_product_meta hook to save the custom field’s value.

add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' );

function save_custom_general_fields( $post_id ) {

    $custom_field_value = isset( $_POST['_custom_product_text_field'] ) ? sanitize_text_field( $_POST['_custom_product_text_field'] ) : '';

    update_post_meta( $post_id, '_custom_product_text_field', $custom_field_value );

}

الخطوة 3: عرض الحقل المخصص على صفحة المنتج

لعرض الحقل المخصص في الواجهة الأمامية، استخدم get_post_meta() في قالب منتج WooCommerce.

صدى<div class="custom-field">';

صدى<label>حقل مخصص: </label> ';

إيكو get_post_meta( get_the_ID()، "_custom_product_product_text_field"، صحيح);

صدى</div>';

Managing the WooCommerce “Additional Information” Tab

The “Additional Information” tab in WooCommerce is useful for displaying detailed product attributes, but you may want to customize its content or even hide it in some instances.

Adding Custom Text to the “Additional Information” Tab

To add custom content, like a link, to the “Additional Information” tab, use the following code:

إضافة_إجراء( 'woocommerce_product_additional_information, 'print_custom_html' );

الدالة print_custom_custom_html() { {

    صدى '<a href="#">انقر هنا لمزيد من التفاصيل عن المنتج</a>';

}

Hiding or Removing the “Additional Information” Tab

If a product doesn’t require additional information (e.g., a digital product), you can remove this tab with the following code:

add_filter( 'woocommerce_product_tabs', 'remove_additional_information_tab', 98 );

function remove_additional_information_tab( $tabs ) {

    unset( $tabs['additional_information'] );

    return $tabs;

}

الخاتمة

Adding additional information to WooCommerce product pages enhances user experience and SEO. WooCommerce’s built-in features, plugins like Secure Custom Fields (SCF), and custom coding provide flexible options to enrich product pages with details like color, size, material, care instructions, and certifications.

Managing the “Additional Information” tab allows you to add, modify, or remove content depending on product needs, ensuring your customers can access relevant information without unnecessary clutter. Overall, enriching WooCommerce product pages helps customers make informed purchasing decisions, increasing conversions while improving your site’s SEO.

الخروج من إصدار الهاتف المحمول