كيفية إظهار القائمة المنسدلة تنويعات القائمة المنسدلة في صفحة المتجر WooCommerce
نشرت: 2021-07-19
هل تبحث عن طريقة لعرض أشكال القائمة المنسدلة على صفحة متجر WooCommerce؟ في هذا المنشور ، سنشاركك حلاً بسيطًا. ومع ذلك ، سنستخدم رمزًا مخصصًا ، وهذا يعني أنك بحاجة إلى بعض الخبرة في الترميز لتنفيذ هذا الحل.
تحتوي معظم متاجر التجارة الإلكترونية على الكثير من الاختلافات في المنتجات. يحتاج العملاء إلى النقر للوصول إلى صفحات منتج واحد لمعرفة الاختلافات.
إذا قمت بعرض أشكال المنتج على صفحة المتجر ، فستجعل الاختلافات أكثر جاذبية للعملاء. بالإضافة إلى ذلك ، سيسمح لك ذلك بتكبير منتجك ببضع نقرات فقط.
WooCommerce Show القائمة المنسدلة الاختلافات في القائمة المنسدلة على صفحة المتجر
بنهاية هذا الدليل ، ستكون قادرًا على عرض اختلافات القائمة المنسدلة برمجيًا على صفحة المتجر. ومع ذلك ، من المهم أن تضع في اعتبارك أنك تحتاج إلى إنشاء صيغة منتج على صفحة منتجك أولاً.
قبل المتابعة ، يجب عليك أيضًا تثبيت أو إنشاء سمة فرعية. سيضمن ذلك عدم فقدان التغييرات أثناء التحديث. بالإضافة إلى ذلك ، تحتاج إلى نسخ حسابك احتياطيًا حتى تتمكن من العودة إلى الإصدار السابق إذا ارتكبت خطأً.
دعونا ندخله مباشرة.
خطوات إظهار القائمة المنسدلة تنويعات القائمة المنسدلة في صفحة المتجر
فيما يلي الخطوات البسيطة التي يجب عليك اتباعها:
- قم بتسجيل الدخول إلى موقع WordPress الخاص بك والوصول إلى لوحة التحكم بصفتك المستخدم المسؤول.
- من قائمة لوحة التحكم ، انقر فوق قائمة المظهر> قائمة محرر السمات . عند فتح صفحة محرر السمات ، ابحث عن ملف وظائف السمة لإضافة وظيفة لعرض الاختلافات القائمة المنسدلة على صفحة المتجر.
- أضف الكود التالي إلى ملف php :
// Display variations dropdowns on shop page for variable products
add_filter( 'woocommerce_loop_add_to_cart_link', 'njengah_display_variation_dropdown_on_shop_page' );
function njengah_display_variation_dropdown_on_shop_page() {
global $product;
if( $product->is_type( 'variable' )) {
$attribute_keys = array_keys( $product->get_attributes() );
?>
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $product->get_available_variations() ) ) ?>">
<?php do_action( 'woocommerce_before_variations_form' ); ?>
<?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
<?php else : ?>
<table class="variations" cellspacing="0">
<tbody>
<?php foreach ( $product->get_variation_attributes() as $attribute_name => $options ) : ?>
<tr>
<td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
<td class="value">
<?php
$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
?>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<div class="single_variation_wrap">
<?php
/**
* woocommerce_before_single_variation Hook.
*/
do_action( 'woocommerce_before_single_variation' );
/**
* woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
* @since 2.4.0
* @hooked woocommerce_single_variation - 10 Empty div for variation data.
* @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
*/
do_action( 'woocommerce_single_variation' );
/**
* woocommerce_after_single_variation Hook.
*/
do_action( 'woocommerce_after_single_variation' );
?>
</div>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<?php endif; ?>
<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>
<?php } else {
echo sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
);
}
}
- هذه هي النتيجة:
تغليف
الآن ، يجب أن تكون قادرًا على عرض الاختلافات في القائمة المنسدلة على صفحة المتجر. ومع ذلك ، إذا لم تكن معتادًا على الترميز ، فإننا نوصي باستخدام مكون إضافي مثل YITH WooCommerce Color and Label Variations (الإصدار المميز) أو WooCommerce Variation Master (الإصدار المميز).
إذا كنت بحاجة إلى عمل مخصص إضافي على صفحة المتجر ، فلا تتردد في الاتصال بنا. نأمل أن يساعدك هذا المنشور في إيجاد حل لمشكلتك.
مقالات مماثلة
- كيفية إضافة زر عرض عربة التسوق في WooCommerce
- كيفية تغيير عنوان صفحة المتجر في WooCommerce
- كيفية حذف جميع المنتجات من WooCommerce
- كيفية إضافة بحث إلى صفحة التسوق في WooCommerce
- كيفية إضافة منتجات الأمازون التابعة إلى WooCommerce
- كيفية تحميل الصورة على صفحة المنتج في WooCommerce
- كيفية إزالة فئة غير مصنفة في WooCommerce WordPress
- WooCommerce إنشاء صفحة منتج فردية مخصصة
- كيفية إضافة نموذج الاتصال مع المكونات الإضافية للعنصر ونموذج الاتصال
- كيفية الهجرة من Shopify إلى WooCommerce
- كيفية تخصيص صفحات منتج WooCommerce باستخدام Elementor Pro
- كيفية دمج MailChimp مع WooCommerce
- كيفية تسجيل الدخول إلى WooCommerce Admin
- كيفية إضافة WooCommerce حقول المنتج المخصصة
- كيفية تصدير المنتجات في WooCommerce
- كيفية إخفاء الفئة من صفحة التسوق WooCommerce
- كيفية عمل نسخة احتياطية من قاعدة بيانات WooCommerce
- كيفية الحصول على اسم العلامة التجارية للمنتج في WooCommerce