Skip to content
تمی
تمی

اخبار روز وردپرس

  • اخبار و مقالات قالب سایت
تمی

اخبار روز وردپرس

22 دی 1401

نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات مجموعه در سال 2023 – Shopidevs


اگر می‌خواهید بدانید چگونه می‌توان انتخابگر متغیر را در Shopify در صفحات مجموعه اضافه کرد، در جای مناسبی هستید. ما به طور مفصل درباره نحوه افزودن یک انتخابگر در Shopify در صفحات مجموعه بحث خواهیم کرد. Shopify دارای یک عملکرد داخلی برای اضافه کردن انتخابگر به صفحه جزئیات محصول است، اما اگر می‌خواهید انتخاب‌کننده نوع را به صفحه مجموعه Shopify اضافه کنید، باید آن را به روش خود سفارشی کنید. در این مقاله به شما نشان خواهیم داد که چگونه به راحتی انتخابگر متغیر را در Shopify در صفحات مجموعه اضافه کنید.

خروجی به شکل زیر خواهد بود:

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

چگونه می توان انتخابگر متغیر را در Shopify در صفحات مجموعه اضافه کرد؟

اگر می‌خواهید انتخابگر متغیر را در Shopify در صفحات مجموعه اضافه کنید، ابتدا باید انواع محصول را اضافه کنید. ما قبلاً در مقاله قبلی خود به این موضوع پرداختیم. اگر نمی‌دانید چگونه انواع محصول را اضافه کنید، می‌توانید مقاله را بخوانید: نحوه افزودن انتخابگر نوع محصول در Shopify در صفحات جزئیات محصول

پس از افزودن انواع محصول، نوبت به افزودن انواع محصول به صفحات مجموعه می رسد. متأسفانه shopify هیچ گزینه داخلی برای افزودن نوع انتخابگر در Shopify در صفحات مجموعه ندارد. اما ما می‌توانیم برای اصلاح برخی از کدها، آن را به مجموعه اضافه کنیم.

مهم نیست از چه تمی استفاده می کنید. تغییر کد تغییر برای اکثر مضامین کار خواهد کرد. ما از تم Dawn استفاده کرده‌ایم، بنابراین تغییر را روی آن اعمال می‌کنیم تم سحر.

مراحل:

  • وارد پنل مدیریت shopify شوید.
  • برو به فروشگاه آنلاین > تم > ویرایش کد
  • حالا برو به موضوع > سپیده دم > بخش ها > main-collection-product-grid.liquid [If you use other theme then find out the collection liquid file, then find out the collection, and paste the code inside the collection list]
  • اکنون کد را در موقعیت خاص از تصویر زیر قرار دهید.
نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات مجموعه

کد:

{% if request.page_type == 'collection' %}
                    {% if product.variants.size > 1 %}
                      <div class="product-variant-dropdown">
                        <form action="/cart/add" method="post" >
                            <select name="id" class="product-variant-select">
                              {% for variant in product.variants %}
                                  {% if variant.available %}
                                      <option value="{{ variant.id }}">{{ variant.title }}</option>
                                  {% else %}
                                    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
                                  {% endif %}
                              {% endfor %}
                            </select>
                            <input type="submit" value="Buy now" class="product-variant-submit-button" />
                        </form>
                      </div>
                    {% endif %}
                  {% endif %}

                  {% if product.has_only_default_variant %}
                    <form method="post" action="/cart/add">
                       <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
                       <input type="submit" value="Buy now" class="product-variant-submit-button" />
                    </form>
                  {% endif %}

حالا باید کد css را اضافه کنیم.

  • قابل اعتماد و متخصص theme > dawn > assets > base.css [if you use the another theme then find out the css file. And paste the code into the css]
  • کد زیر را زیر کد موجود اضافه کنید base.css.
css پایه اضافه کنید

کد:

.card-wrapper {
  height: auto!important;
}
.product-variant-dropdown{
  display:block !important;
} 
.product-variant-submit-button {
  background-color: #121212;
  color: #fff;
  padding: 12px 25px;
  border-radius: 0px;
  border: 1px solid #121212;
  display: block;
  margin-bottom: 15px;
}
.product-variant-submit-button:hover {
  background-color: #fff;
  color: #121212;
  cursor: pointer;
}
.product-variant-select {
  border: 1px solid #121212;
}
.product-variant-select:focus-visible {
  outline: none;
  box-shadow: none;
}
.product-variant-select {
  padding: 10px 10px;
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
  • اکنون بر روی دکمه ذخیره.

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



منبع

اخبار و مقالات قالب سایت تم سایتقالب سایت

راهبری نوشته

Previous post
Next post

نوشته‌های تازه

  • ابزار ممیزی رایگان سئو برای افزایش رتبه
  • نحوه ویرایش انبوه تصاویر ویژه در وردپرس
  • نحوه ایجاد فید RSS مجزا برای هر دسته در وردپرس
  • نحوه اضافه کردن خودکار سلب مسئولیت در وردپرس (راه آسان)
  • نحوه تغییر اندازه تصویر Gravatar در وردپرس
  • 10 بهترین مولد کلمات کلیدی دم بلند (مقایسه شده)
  • نحوه استفاده از کدهای کوتاه در ابزارک های نوار کناری وردپرس
  • اعلام ایده مولد پست وبلاگ WPBeginner
  • چرا باید به سراغ بهترین لپ تاپ های لنوو Core i5 رفت؟ + معرفی 4 مدل محبوب | behtarin-laptop
  • نحوه فروش وب سایت یا کسب و کار آنلاین (راهنمای کامل)
  • نمایندگی سیم کشی و برق کشی ساختمان اعزام سریع برقکار ساختمان امدادکاران | fanbaz
  • نحوه ایجاد نمودار سازمانی شرکت خود در وردپرس (راه آسان)
  • نحوه ایجاد یک پست خلاصه در وردپرس (راه آسان)
  • قیمت دستگاه تولید لیوان کاغذی دست دوم + راهنمای جامع خرید | ایران کاپ
  • نحوه مشاهده نسخه موبایل سایت های وردپرس از دسکتاپ
  • نحوه افزودن متن به گفتار در وردپرس (گام به گام)
  • نحوه ایجاد فرم آپلود فایل در وردپرس (راه حل آسان)
  • کتاب کمک درسی دوم دبستان پایتخت کتاب | ketabko
  • طراحی سایت و فروشگاه اینترنتی شروع یک موفقیت آنلاین پرتال | allescape
  • حمل و نقل چیست ؟ انواع و تاریخچه حمل و نقل در ایران | transemartlogistics
  • نحوه اضافه کردن یک سازنده محصول سفارشی در ووکامرس (آسان)
  • چگونه انواع پست سفارشی را به فید اصلی وردپرس خود اضافه کنید
  • معرفی تحلیلگر سرفصل – نوشتن سرفصل های جذاب آسان شده است
  • نحوه اضافه کردن مبدل ارز در وردپرس (2 راه آسان)
  • نحوه تعمیر تغییر مسیر وردپرس به دامنه قدیمی پس از مهاجرت
  • چگونه در پست های وردپرس خود کلیک به جعبه های توییت اضافه کنید
  • نحوه ایجاد اسلایدر محصول در Shopify در سال 2023
  • نحوه نمایش یا پنهان کردن ابزارک ها در صفحات خاص وردپرس
  • به HeroThemes به صندوق رشد WPBeginner خوش آمدید
  • بهترین کاندوم بازار در سال 2023 + معرفی 20 مدل پرفروش | asilbekharid
  • نحوه ایجاد و مدیریت فایل های Ads.txt در وردپرس (آسان)
  • آیا باید به افزونه های وردپرس اجازه جمع آوری داده ها را بدهم؟
  • قیمت و رزرو اتاق فرار اختلال disorder ایران اسکیپ | allescape
  • نحوه ارسال ایمیل به همه کاربران ثبت نام شده در وردپرس
  • 16 بهترین افزونه تایپوگرافی وردپرس برای بهبود طراحی شما
  • چگونه به راحتی تصاویر تعاملی 360 درجه را در وردپرس اضافه کنیم
  • شرایط شرکت در بازی اتاق فرار در مجموعه اسکیپ رومیست | allescape
  • نحوه نمایش یا دفن نظرات در وردپرس (2 راه آسان)
  • 8 بهترین افزونه گرید محصول برای ووکامرس (رایگان + پولی)
  • معماری اسلامی و 8 نمونه برجسته | معماری نواز
  • معرفی Broken Link Checker – Easy Dead Link Checker برای تعمیر لینک های شکسته در وردپرس
  • نحوه اضافه کردن کلاهک در پست های وردپرس (3 روش ساده)
  • نحوه باز کردن پیوندهای خارجی در یک پنجره یا برگه جدید با وردپرس
  • طراحی ایوان، بالکن، تراس، پاسیو و بام سبز آرل | elitarchgroup
  • طراحی سایت خدماتی یاس وب مبتکر اینده های نو و جذاب در طراحی وب | totoweb
  • نحوه تبدیل انبوه بلوک های کلاسیک به گوتنبرگ در وردپرس
  • برترین برنامه های Shopify چرخ فلک و اسلایدر ویدیو در سال 2023 – Shopidevs
  • نحوه سفارشی کردن رنگ پس زمینه ویرایشگر بلاک وردپرس
  • نحوه استفاده از فونت های آیکون در ویرایشگر پست وردپرس (بدون کد)
  • چگونه فروشگاه Shopify را در سال 2023 زنده کنیم – Shopidevs

دسته‌ها

  • اخبار و مقالات قالب سایت
  • دسته‌بندی نشده
  • ابزار ممیزی رایگان سئو برای افزایش رتبه
  • نحوه ویرایش انبوه تصاویر ویژه در وردپرس
  • نحوه ایجاد فید RSS مجزا برای هر دسته در وردپرس
  • نحوه اضافه کردن خودکار سلب مسئولیت در وردپرس (راه آسان)
  • نحوه تغییر اندازه تصویر Gravatar در وردپرس
  • 10 بهترین مولد کلمات کلیدی دم بلند (مقایسه شده)
  • نحوه استفاده از کدهای کوتاه در ابزارک های نوار کناری وردپرس
  • اعلام ایده مولد پست وبلاگ WPBeginner
  • چرا باید به سراغ بهترین لپ تاپ های لنوو Core i5 رفت؟ + معرفی 4 مدل محبوب | behtarin-laptop
  • نحوه فروش وب سایت یا کسب و کار آنلاین (راهنمای کامل)
  • نمایندگی سیم کشی و برق کشی ساختمان اعزام سریع برقکار ساختمان امدادکاران | fanbaz
  • نحوه ایجاد نمودار سازمانی شرکت خود در وردپرس (راه آسان)
  • نحوه ایجاد یک پست خلاصه در وردپرس (راه آسان)
  • قیمت دستگاه تولید لیوان کاغذی دست دوم + راهنمای جامع خرید | ایران کاپ
  • نحوه مشاهده نسخه موبایل سایت های وردپرس از دسکتاپ
  • نحوه افزودن متن به گفتار در وردپرس (گام به گام)
  • نحوه ایجاد فرم آپلود فایل در وردپرس (راه حل آسان)
  • کتاب کمک درسی دوم دبستان پایتخت کتاب | ketabko
  • طراحی سایت و فروشگاه اینترنتی شروع یک موفقیت آنلاین پرتال | allescape
  • حمل و نقل چیست ؟ انواع و تاریخچه حمل و نقل در ایران | transemartlogistics
  • نحوه اضافه کردن یک سازنده محصول سفارشی در ووکامرس (آسان)
  • چگونه انواع پست سفارشی را به فید اصلی وردپرس خود اضافه کنید
  • معرفی تحلیلگر سرفصل – نوشتن سرفصل های جذاب آسان شده است
  • نحوه اضافه کردن مبدل ارز در وردپرس (2 راه آسان)
  • نحوه تعمیر تغییر مسیر وردپرس به دامنه قدیمی پس از مهاجرت
  • چگونه در پست های وردپرس خود کلیک به جعبه های توییت اضافه کنید
  • نحوه ایجاد اسلایدر محصول در Shopify در سال 2023
  • نحوه نمایش یا پنهان کردن ابزارک ها در صفحات خاص وردپرس
  • به HeroThemes به صندوق رشد WPBeginner خوش آمدید
  • بهترین کاندوم بازار در سال 2023 + معرفی 20 مدل پرفروش | asilbekharid
  • نحوه ایجاد و مدیریت فایل های Ads.txt در وردپرس (آسان)
  • آیا باید به افزونه های وردپرس اجازه جمع آوری داده ها را بدهم؟
  • قیمت و رزرو اتاق فرار اختلال disorder ایران اسکیپ | allescape
  • نحوه ارسال ایمیل به همه کاربران ثبت نام شده در وردپرس
  • 16 بهترین افزونه تایپوگرافی وردپرس برای بهبود طراحی شما
  • چگونه به راحتی تصاویر تعاملی 360 درجه را در وردپرس اضافه کنیم
  • شرایط شرکت در بازی اتاق فرار در مجموعه اسکیپ رومیست | allescape
  • نحوه نمایش یا دفن نظرات در وردپرس (2 راه آسان)
  • 8 بهترین افزونه گرید محصول برای ووکامرس (رایگان + پولی)
  • معماری اسلامی و 8 نمونه برجسته | معماری نواز
  • معرفی Broken Link Checker – Easy Dead Link Checker برای تعمیر لینک های شکسته در وردپرس
  • نحوه اضافه کردن کلاهک در پست های وردپرس (3 روش ساده)
  • نحوه باز کردن پیوندهای خارجی در یک پنجره یا برگه جدید با وردپرس
  • طراحی ایوان، بالکن، تراس، پاسیو و بام سبز آرل | elitarchgroup
  • طراحی سایت خدماتی یاس وب مبتکر اینده های نو و جذاب در طراحی وب | totoweb
  • نحوه تبدیل انبوه بلوک های کلاسیک به گوتنبرگ در وردپرس
  • برترین برنامه های Shopify چرخ فلک و اسلایدر ویدیو در سال 2023 – Shopidevs
  • نحوه سفارشی کردن رنگ پس زمینه ویرایشگر بلاک وردپرس
  • نحوه استفاده از فونت های آیکون در ویرایشگر پست وردپرس (بدون کد)
  • چگونه فروشگاه Shopify را در سال 2023 زنده کنیم – Shopidevs
©2023 تمی | WordPress Theme by SuperbThemes