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

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

  • متن جایگزین تصویر در مقابل عنوان تصویر در وردپرس
  • چگونه به راحتی حالت تاریک را به وب سایت وردپرس خود اضافه کنید
  • قالیکده البرز فروشگاه فرش خرید اینترنتی فرش ماشینی فروش آنلاین انواع فرش-فرش شادرخ
  • مبل و سرویس خواب سلطنتی ترنج متریال وارداتی نقد و اقساط-مبل سید
  • نحوه محدود یا غیرفعال کردن تخلیه خودکار سطل زباله در وردپرس
  • گلگیر جلو S5 جک لوزم یدکی اصلی جک لیست قیمت فطعات اورجینال ملت یدک-پارس قطعه
  • طراحی سایت و فروشگاه اینترنتی شروع یک موفقیت آنلاین پرتال
  • 10 داده بازاریابی وب سایت که باید در هر سایت وردپرسی ردیابی کنید
  • اندازه توصیه شده بنر تصویر Shopify در سال 2023 چقدر است
  • فناوری اطلاعات یا آی تی IT چیست و چرا تا این حد پرطرفدار است؟ همیار آی‌تی-ترازنت
  • چگونه از تقلب و سفارشات جعلی در ووکامرس جلوگیری کنیم
  • نحوه ایجاد یک نظرسنجی تعاملی در وردپرس (گام به گام)
  • روش تست شارژرهای لپ تاپ نمایندگی ایسوس در ایران-شارژر لپتاپ مستر جانبی
  • نحوه نمایش پست های محبوب بر اساس روز، هفته و ماه در وردپرس
  • نحوه واردات و صادرات محصولات WooCommerce با تصاویر
  • 10 افزونه وردپرس با استفاده از هوش مصنوعی و یادگیری ماشین
  • نحوه رفع خطای ERR_CONNECTION_REFUSED در کروم
  • نحوه ردیابی تاریخچه ویجت وردپرس (روش آسان)
  • نحوه ایجاد یک نظرسنجی Net Promoter Score® (NPS) در وردپرس
  • 5 بهترین برنامه پاپ آپ تخفیف Shopify در سال 2023 – Shopidevs
  • اتاق فرار چیست؟ معرفی انواع اسکیپ روم در تهران اکتیک-آل اسکیپ
  • نحوه ردیابی کلیک روی لینک و کلیک روی دکمه در وردپرس (روش آسان)
  • نحوه تغییر نام فرستنده در ایمیل خروجی وردپرس
  • گزیده محصول Shopify را در همه صفحات و صفحات مجموعه اضافه کنید
  • نحوه نوشتن محتوا با استفاده از AI Content Generator در وردپرس
  • نحوه ایجاد فرم HubSpot در وردپرس
  • نحوه نصب Microsoft Clarity Analytics در وردپرس
  • نحوه افزایش ارتفاع بخش Shopify div در سال 2023
  • چگونه URL کوتاه سفارشی خود را برای وبلاگ خود ایجاد کنید
  • معرفی انواع دستگاه مینی چیلر و مزایای آن ها آی تهویه-بتا تهویه
  • rel=”noopener” در وردپرس چیست؟ (توضیح داده شد)
  • تترلند خرید تتر و فروش تتر برنامه‌ها در Google Play-تترفا
  • چگونه از FOMO در سایت وردپرس خود برای افزایش تبدیل استفاده کنید
  • نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات مجموعه در سال 2023 – Shopidevs
  • 13 بهترین نمونه طراحی پاورقی وردپرس (+ بهترین روش ها)
  • چگونه به راحتی یک نقشه سایت چند زبانه در وردپرس ایجاد کنیم
  • نحوه اضافه کردن محدودیت کشوری برای محصولات WooCommerce
  • لوله بازکنی و لوله بازکن فوری قیمت لوله بازکنی-lolebazkonii
  • نحوه راه اندازی ردیابی تبدیل ووکامرس (گام به گام)
  • نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات جزئیات محصول در سال 2023 – Shopidevs
  • آیا استفاده از افزونه های قدیمی وردپرس بی خطر است؟
  • 7 نکته برای خرید مبل چستر + ویژگی‌های دکوراسیون با آن کوئیک فیت-مبل سید
  • خرید بک لینک و جریمه شدن سایت شما توسط گوگل-خرید بک لینک،خدمات لینکسازی،خرید رپورتاژ،خرید PBN گلدلینک
  • چگونه بررسی کنیم که آیا پست های وبلاگ شما برای کلمات کلیدی مناسب رتبه بندی می شوند یا خیر
  • 8 بهترین نوع جایگزین برای 2023 (رایگان + پولی)
  • Duplicator به خانواده محصولات WPBeginner خوش آمدید
  • در سال 2023 چه چیزی را انتخاب کنیم
  • تولیدی پیراهن آستین کوتاه خرید عمده پیراهن مردانه تولید کننده پیراهن مردانه
  • نحوه میزبانی فونت های محلی در وردپرس برای یک وب سایت سریعتر
  • نحوه دریافت اعلان ایمیل برای تغییرات پست در وردپرس

دسته‌ها

  • اخبار و مقالات قالب سایت
  • دسته‌بندی نشده
  • متن جایگزین تصویر در مقابل عنوان تصویر در وردپرس
  • چگونه به راحتی حالت تاریک را به وب سایت وردپرس خود اضافه کنید
  • قالیکده البرز فروشگاه فرش خرید اینترنتی فرش ماشینی فروش آنلاین انواع فرش-فرش شادرخ
  • مبل و سرویس خواب سلطنتی ترنج متریال وارداتی نقد و اقساط-مبل سید
  • نحوه محدود یا غیرفعال کردن تخلیه خودکار سطل زباله در وردپرس
  • گلگیر جلو S5 جک لوزم یدکی اصلی جک لیست قیمت فطعات اورجینال ملت یدک-پارس قطعه
  • طراحی سایت و فروشگاه اینترنتی شروع یک موفقیت آنلاین پرتال
  • 10 داده بازاریابی وب سایت که باید در هر سایت وردپرسی ردیابی کنید
  • اندازه توصیه شده بنر تصویر Shopify در سال 2023 چقدر است
  • فناوری اطلاعات یا آی تی IT چیست و چرا تا این حد پرطرفدار است؟ همیار آی‌تی-ترازنت
  • چگونه از تقلب و سفارشات جعلی در ووکامرس جلوگیری کنیم
  • نحوه ایجاد یک نظرسنجی تعاملی در وردپرس (گام به گام)
  • روش تست شارژرهای لپ تاپ نمایندگی ایسوس در ایران-شارژر لپتاپ مستر جانبی
  • نحوه نمایش پست های محبوب بر اساس روز، هفته و ماه در وردپرس
  • نحوه واردات و صادرات محصولات WooCommerce با تصاویر
  • 10 افزونه وردپرس با استفاده از هوش مصنوعی و یادگیری ماشین
  • نحوه رفع خطای ERR_CONNECTION_REFUSED در کروم
  • نحوه ردیابی تاریخچه ویجت وردپرس (روش آسان)
  • نحوه ایجاد یک نظرسنجی Net Promoter Score® (NPS) در وردپرس
  • 5 بهترین برنامه پاپ آپ تخفیف Shopify در سال 2023 – Shopidevs
  • اتاق فرار چیست؟ معرفی انواع اسکیپ روم در تهران اکتیک-آل اسکیپ
  • نحوه ردیابی کلیک روی لینک و کلیک روی دکمه در وردپرس (روش آسان)
  • نحوه تغییر نام فرستنده در ایمیل خروجی وردپرس
  • گزیده محصول Shopify را در همه صفحات و صفحات مجموعه اضافه کنید
  • نحوه نوشتن محتوا با استفاده از AI Content Generator در وردپرس
  • نحوه ایجاد فرم HubSpot در وردپرس
  • نحوه نصب Microsoft Clarity Analytics در وردپرس
  • نحوه افزایش ارتفاع بخش Shopify div در سال 2023
  • چگونه URL کوتاه سفارشی خود را برای وبلاگ خود ایجاد کنید
  • معرفی انواع دستگاه مینی چیلر و مزایای آن ها آی تهویه-بتا تهویه
  • rel=”noopener” در وردپرس چیست؟ (توضیح داده شد)
  • تترلند خرید تتر و فروش تتر برنامه‌ها در Google Play-تترفا
  • چگونه از FOMO در سایت وردپرس خود برای افزایش تبدیل استفاده کنید
  • نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات مجموعه در سال 2023 – Shopidevs
  • 13 بهترین نمونه طراحی پاورقی وردپرس (+ بهترین روش ها)
  • چگونه به راحتی یک نقشه سایت چند زبانه در وردپرس ایجاد کنیم
  • نحوه اضافه کردن محدودیت کشوری برای محصولات WooCommerce
  • لوله بازکنی و لوله بازکن فوری قیمت لوله بازکنی-lolebazkonii
  • نحوه راه اندازی ردیابی تبدیل ووکامرس (گام به گام)
  • نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات جزئیات محصول در سال 2023 – Shopidevs
  • آیا استفاده از افزونه های قدیمی وردپرس بی خطر است؟
  • 7 نکته برای خرید مبل چستر + ویژگی‌های دکوراسیون با آن کوئیک فیت-مبل سید
  • خرید بک لینک و جریمه شدن سایت شما توسط گوگل-خرید بک لینک،خدمات لینکسازی،خرید رپورتاژ،خرید PBN گلدلینک
  • چگونه بررسی کنیم که آیا پست های وبلاگ شما برای کلمات کلیدی مناسب رتبه بندی می شوند یا خیر
  • 8 بهترین نوع جایگزین برای 2023 (رایگان + پولی)
  • Duplicator به خانواده محصولات WPBeginner خوش آمدید
  • در سال 2023 چه چیزی را انتخاب کنیم
  • تولیدی پیراهن آستین کوتاه خرید عمده پیراهن مردانه تولید کننده پیراهن مردانه
  • نحوه میزبانی فونت های محلی در وردپرس برای یک وب سایت سریعتر
  • نحوه دریافت اعلان ایمیل برای تغییرات پست در وردپرس
©2023 تمی | WordPress Theme by SuperbThemes