.elementor-1487 .elementor-element.elementor-element-936237a{--display:flex;}.elementor-1487 .elementor-element.elementor-element-24f657c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1487 .elementor-element.elementor-element-24f657c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-35716b5{width:var( --container-widget-width, 0.766% );max-width:0.766%;--container-widget-width:0.766%;--container-widget-flex-grow:0;}.elementor-1487 .elementor-element.elementor-element-35716b5.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-94e60fc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1487 .elementor-element.elementor-element-94e60fc.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-965a98f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1487 .elementor-element.elementor-element-965a98f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-60f3c56.elementor-element{--align-self:flex-start;}.elementor-1487 .elementor-element.elementor-element-8d96b24.elementor-element{--align-self:center;--order:99999 /* order end hack */;}.elementor-1487 .elementor-element.elementor-element-c1362ae{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1487 .elementor-element.elementor-element-c1362ae.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-05fbe30{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1487 .elementor-element.elementor-element-40fb1c2{--display:flex;--justify-content:space-around;--gap:3px 3px;--row-gap:3px;--column-gap:3px;--background-transition:0.3s;}.elementor-1487 .elementor-element.elementor-element-40fb1c2.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-df53903{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1487 .elementor-element.elementor-element-fa86300{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:flex-end;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
					 .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{color:var( --e-global-color-text );}.elementor-1487 .elementor-element.elementor-element-8c4ac23 .elementor-icon-box-wrapper{align-items:center;text-align:center;}.elementor-1487 .elementor-element.elementor-element-8c4ac23{--icon-box-icon-margin:11px;}.elementor-1487 .elementor-element.elementor-element-8c4ac23.elementor-view-stacked .elementor-icon{background-color:#000000;}.elementor-1487 .elementor-element.elementor-element-8c4ac23.elementor-view-framed .elementor-icon, .elementor-1487 .elementor-element.elementor-element-8c4ac23.elementor-view-default .elementor-icon{fill:#000000;color:#000000;border-color:#000000;}.elementor-1487 .elementor-element.elementor-element-8c4ac23 .elementor-icon{font-size:23px;}.elementor-1487 .elementor-element.elementor-element-8c4ac23 .elementor-icon-box-title{color:#000000;}.elementor-1487 .elementor-element.elementor-element-e235201 .products-list .row{row-gap:35px;}.elementor-1487 .elementor-element.elementor-element-e235201 article.product{border-radius:5px 5px 5px 5px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#eaebed;}.elementor-1487 .elementor-element.elementor-element-e235201 article.product:hover{border-color:#30D5E0;}.elementor-1487 .elementor-element.elementor-element-e235201 article.product .product-cover{border-style:solid;border-width:0px 0px 1px 0px;border-color:#eaebed;}.elementor-1487 .elementor-element.elementor-element-e235201 article.product:hover .product-cover{border-color:#30D5E0;}.elementor-1487 .elementor-element.elementor-element-e235201 .product-cover .product-label span{color:#FFFFFF;background-color:#30D5E0;border-radius:3px 3px 3px 3px;margin:0px 0px 5px 0px;padding:2px 7px 2px 7px;}.elementor-1487 .elementor-element.elementor-element-e235201 .product-cover .thumbnail-swiper img{width:100%;height:100%;}.elementor-1487 .elementor-element.elementor-element-e235201 .product-cover .main-product-thumbnail img{width:100%;height:100%;border-radius:5px 5px 5px 5px;}.elementor-1487 .elementor-element.elementor-element-e235201 .product-cover .thumbnail-swiper{border-radius:5px 5px 5px 5px;}.elementor-1487 .elementor-element.elementor-element-e235201 .product-content{text-align:right;padding:15px 15px 15px 15px;margin:10px 0px 0px 0px;}.elementor-1487 .elementor-element.elementor-element-e235201 article.product .product-content .title-wrap{margin:0px 0px 0px 0px;}.elementor-1487 .elementor-element.elementor-element-e235201 .price-wrap .price{color:#30D5E0;margin:0px 0px 0px 0px;}.elementor-1487 .elementor-element.elementor-element-e235201 .price-wrap .price del{color:#30D5E0;}.elementor-1487 .elementor-element.elementor-element-e235201 .product-foot a{color:#FFFFFF;background-color:#30D5E0;margin:15px 0px 0px 0px;border-radius:5px 5px 5px 5px;}.elementor-1487 .elementor-element.elementor-element-e235201 .ahura-pagination{margin:30px 0px 0px 0px;}.elementor-1487 .elementor-element.elementor-element-e235201 .ahura-pagination .page-numbers{background-color:#F7F7F8;margin:10px 10px 10px 10px;padding:10px 10px 10px 10px;border-radius:5px 5px 5px 5px;}.elementor-1487 .elementor-element.elementor-element-e235201 .ahura-pagination .page-numbers:hover{color:#08497d;background-color:#D8EDFF;}.elementor-1487 .elementor-element.elementor-element-e235201 .mw_element_error{justify-content:center;}@media(min-width:768px){.elementor-1487 .elementor-element.elementor-element-24f657c{--width:99.174%;}.elementor-1487 .elementor-element.elementor-element-94e60fc{--width:17.606%;}.elementor-1487 .elementor-element.elementor-element-965a98f{--width:98.758%;}.elementor-1487 .elementor-element.elementor-element-c1362ae{--width:81.405%;}.elementor-1487 .elementor-element.elementor-element-40fb1c2{--width:100%;}}/* Start custom CSS for wp-widget-custom_html, class: .elementor-element-52c8522 */در اینجا دو نسخه ساده برای اضافه کردن فیلتر مرتب‌سازی (با کنار هم قرار گرفتن گزینه‌ها) در وردپرس ارائه می‌کنم. نسخه اول با لینک‌های ساده و نسخه دوم با یک منوی کشویی و جاوااسکریپت برای هدایت به پارامترهای مناسب.

نسخه 1: فیلتر با لینک‌های هم‌سطح (جدیدترین، ارزان‌ترین، گران‌ترین، پر بازدید)
<!-- Begin sort bar - نسخه ساده -->
<div class="sort-bar" style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
  <a href="?orderby=date&order=desc" class="sort-link" style="padding:8px 12px; border:1px solid #ddd; border-radius:6px; text-decoration:none; color:#333; background:#fff;">جدیدترین</a>
  <a href="?orderby=price&order=asc" class="sort-link" style="padding:8px 12px; border:1px solid #ddd; border-radius:6px; text-decoration:none; color:#333; background:#fff;">ارزان‌ترین</a>
  <a href="?orderby=price&order=desc" class="sort-link" style="padding:8px 12px; border:1px solid #ddd; border-radius:6px; text-decoration:none; color:#333; background:#fff;">گران‌ترین</a>
  <a href="?orderby=popularity" class="sort-link" style="padding:8px 12px; border:1px solid #ddd; border-radius:6px; text-decoration:none; color:#333; background:#fff;">پربازدید</a>
</div>
<!-- End sort bar -->

نسخه 2: فیلتر با منوی کشویی و جاوااسکریپت (گزینه‌ها کنار هم و دینامیک‌سازی لینک‌ها)
<!-- Begin sort bar - منوی کشویی با JS -->
<div class="sort-bar-js" style="display:flex; align-items:center; gap:8px;">
  <label for="wp-sorter" style="font-size:14px; color:#555;">مرتب‌سازی:</label>
  <select id="wp-sorter" aria-label="مرتب‌سازی" style="padding:6px 10px; border-radius:6px; border:1px solid #ddd;">
    <option value="date-desc">جدیدترین</option>
    <option value="price-asc">ارزان‌ترین</option>
    <option value="price-desc">گران‌ترین</option>
    <option value="popularity">پربازدید</option>
  </select>
</div>
<script>
(function(){
  var sel = document.getElementById('wp-sorter');
  if(!sel) return;

  // مقدار فعلی را از URL می‌خواند تا گزینه مناسب انتخاب شود
  function initFromUrl(){
    try{
      var urlParams = new URLSearchParams(window.location.search);
      var by = urlParams.get('orderby');
      var ord = urlParams.get('order');
      if(by === 'date' && ord === 'desc') sel.value = 'date-desc';
      else if(by === 'price' && ord === 'asc') sel.value = 'price-asc';
      else if(by === 'price' && ord === 'desc') sel.value = 'price-desc';
      else if(by === 'popularity') sel.value = 'popularity';
    } catch(e) {}
  }
  initFromUrl();

  sel.addEventListener('change', function(){
    var val = this.value;
    var url = new URL(window.location.href);

    if (val === 'date-desc'){ url.searchParams.set('orderby','date'); url.searchParams.set('order','desc'); }
    else if (val === 'price-asc'){ url.searchParams.set('orderby','price'); url.searchParams.set('order','asc'); }
    else if (val === 'price-desc'){ url.searchParams.set('orderby','price'); url.searchParams.set('order','desc'); }
    else if (val === 'popularity'){ url.searchParams.set('orderby','popularity'); url.searchParams.delete('order'); }

    window.location.href = url.toString();
  });
})();
</script>
<!-- End sort bar -->
اگر از ووکامرس استفاده می‌کنید، گزینه‌های price/price-desc و popularity معمولاً توسط فروشگاه وردپرس به عنوان排序های موجود پشتیبانی می‌شوند. در سایر حالت‌های وردپرس، بسته به اینکه فیلتر مرتب‌سازی چگونه پیاده‌سازی شده باشد (مثلاً با WP_Query یا افزونه‌ای مانند Yoast یا پلاگین‌های مشابه)، ممکن است لازم باشد مقادیرِ دقیق sortby را با مقادیر متا یا فیلد‌های سفارشی شما تطبیق دهید.

نکته‌ها:
- اگر قصد دارید این کدها را دقیقاً در قالب یا الگوی توابع خود استفاده کنید، بهتر است این لینک‌ها یا منوی کشویی را در قالب PHP تولید کنید تا URL فعلی را حفظ کند (مثلاً با اضافه کردن پارامترهای موجود به URL جدید).
- برای محصولات ووکامرسی، با توجه به تنظیمات فروشگاه، گزینه‌های sort-by در ووکامرس معمولاً از طریق پارامترهایorderby و order مدیریت می‌شوند./* End custom CSS */