نحوه نمایش تغییرات کشویی Dropdown در صفحه فروشگاه ووکامرس

نویسنده : ناصر خالدی بروز شده در : 1 ماه 7 روز قبل آخرین مطالعه 5 روز 6 ساعت قبل دسته ها : ووکامرس

آیا به دنبال راهی برای نمایش تغییرات کشویی در صفحه فروشگاه ووکامرسی هستید؟ این پست را تا انتها بخوانید، ما یک راه حل ساده را برای شما به اشتراک می گذاریم. با این حال ، ما از یک کد سفارشی استفاده خواهیم کرد ، و این بدان معناست که برای پیاده سازی این راه حل باید تجربه کد نویسی داشته باشید.

اکثر فروشگاه های تجارت الکترونیک تنوع زیادی در محصولات دارند. مشتریان باید روی صفحات تک محصول کلیک کنند تا تغییرات را مشاهده کنند. اگر تغییرات محصول را در صفحه فروشگاه نمایش دهید ، تغییرات را برای مشتریان جذاب تر می کند. علاوه بر این ، این به شما امکان می دهد محصول خود را تنها با چند کلیک بزرگ کنید.

 

نمایش تغییرات کشویی Dropdown در صفحه فروشگاه ووکامرس

در پایان این راهنما ، می توانید تغییرات کشویی را به صورت برنامه ای در صفحه فروشگاه نمایش دهید. با این حال ، مهم است که به خاطر داشته باشید که ابتدا باید تنوع محصول را در صفحه محصول خود ایجاد کنید.

قبل از ادامه ، باید تم کودک را نصب یا ایجاد کنید. این امر باعث می شود که تغییرات شما در حین بروزرسانی از بین نرود. علاوه بر این ، باید از حساب خود نسخه پشتیبان تهیه کنید تا در صورت اشتباه بتوانید به نسخه قبلی برگردید.

 

 

مراحل نمایش تغییرات کشویی Dropdown در صفحه فروشگاه

  • ابتدا وارد حساب کاربری وردپرس خود شوید و به پنل ادمین کل بروید.
  • از منوی نمایش, زیر منوی ویرایشگر پوسته را انتخاب کنید, بعد از لود صفحه فایل توابع (functions.php) را باز کنید.
  • کد های زیر را به این فایل اضافه کنید :
// کشویی تغییرات را در صفحه فروشگاه برای محصولات متغیر نمایش دهید
 add_filter( 'woocommerce_loop_add_to_cart_link', 'sevencloner_display_variation_dropdown_on_shop_page' );
 function sevencloner_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. برای خروجی دکمه سبد خرید و محل نگه داری برای داده های تنوع استفاده می شود.
                     * @since 2.4.0
                     * @hooked woocommerce_single_variation - 10 div خالی برای داده های تنوع.
                     * @hooked woocommerce_single_variation_add_to_cart_button - 20 عدد و دکمه سبد خرید.
                     */
                    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() )
        );
        }
     }

 

در این مقاله قصد داریم تا درباره نحوه نمایش تغییرات کشویی Dropdown در صفحه فروشگاه ووکامرس صحبت کنیم.


قیمت (تومان)
رایگان
وضعیت
تکمیل شده

مقالات پیشنهادی

نود جی اس

نود جی اس

توسعه دهندگان نود جی اس, زبان جاوا اسکریپت را از یک زبان قابل اجرا در مرورگر خارج کرده و به زبانی تبدیل کردن که بتوان آن را بصورت یه اپلیکیشن مستفل اجرا کرد و ...

آخرین بروزرسانی 9 ماه 20 روز قبل

هوش مصنوعی

هوش مصنوعی

هوش مصنوعی یا هوش ماشینی, به هوشمندی نشان داده شده توسط ماشین در شرایط مختلف گفته میشود که مقابل هوش طبیعی در انسان ها قرار دارد که ...

آخرین بروزرسانی 9 ماه 21 روز قبل

وردپرس

وردپرس

وردپرس یک سیستم مدیریت محتوای قوی می باشد که با استفاده از آن می توان وب سایت ها و وبلاگ های گوناگونی با هر شرایطی را طراحی کرد چرا که این سیستم و ...

آخرین بروزرسانی 9 ماه 20 روز قبل

اندروید

اندروید

اندروید یک سیستم عامل می باشد که توسط گوگل توسعه داده میشود, این سیستم عامل بر پایه نسخه ی اصلاح شده ی هسته ی لینوکس و دیگر نرم افزار های متن باز طراحی شده است و ...

آخرین بروزرسانی 9 ماه 20 روز قبل

سوالات و گفتگوها

logo-samandehi
تماس با ما

می توانید از طریق اطلاعات زیر با ما در ارتباط باشید.

درباره ما

سایت سون کلونر به تازگی شروع به کار کرده است و امید می رود تا بتواند پایگاه وسعی از آموزش های رایگان را در دسترس فارسی زبانان قرار دهد.