Product Filters

  • Resolved ronnym

    (@ronnym)


    3 years, 6 months ago

    Hi, am I able to make a filter that sits right beside my products? A filter that has Brand names, and sizing options for example. Let me know if that is in the Pro version as well. Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author andrewmrobbins

    (@andrewmrobbins)

    @ronnym Hey there! Yes this is doable, here is the code you’ll need to add:

    Shortcode:

    
[wps_storefront dropzone_payload="#wps-storefront-dropzone-payload" dropzone_options="#wps-storefront-dropzone-options" dropzone_selections="#wps-storefront-dropzone-selections" dropzone_page_size="#wps-storefront-dropzone-page-size" dropzone_sorting="#wps-storefront-dropzone-sorting" show_featured_only="true" items_per_row="4" excludes="description"]

    HTML

    <style>

    #wps-storefront {
        max-width: 1300px;
        padding-top: 0;
    }

    .wps-row {
        display: flex;
        align-items: flex-start;
    }

    #wps-storefront-dropzone-options {
        width: 250px;
        position: sticky;
        top: 25px;
    }

    #wps-storefront-dropzone-payload,
    #wps-storefront-dropzone-selections {
        flex: 1;
    }

    #wps-storefront-dropzone-selections {
        min-height: 80px;
        margin-top: -57px;
        display: flex;
        align-items: flex-end;
    }

    #wps-storefront-controls {
        width: 400px;
    }

    #wps-storefront-dropzone-payload {
        margin-top: 63px;
    }

    #wps-storefront-dropzone-page-size {
        margin-left: 30px;
    }

    .wps-storefront-heading {
        margin-bottom: 15px;
    }

    #wps-storefront-dropzone-payload .wps-items-list {
        max-width: 860px;
        margin: 0 auto;
        margin-right: 0;
    }
    
</style>

<section id=&quot;wps-storefront&quot;>

   <div class=&quot;wps-row&quot;>
      <div id=&quot;wps-storefront-dropzone-selections&quot;></div>

      <div id=&quot;wps-storefront-controls&quot;>
         <div class=&quot;wps-row&quot;>
            <div id=&quot;wps-storefront-dropzone-sorting&quot;></div>
            <div id=&quot;wps-storefront-dropzone-page-size&quot;></div>
         </div>
      </div>
      
   </div>

   <div class=&quot;wps-row&quot;>
      <div id=&quot;wps-storefront-dropzone-options&quot;></div>
      <div id=&quot;wps-storefront-dropzone-payload&quot;></div>
   </div>

   <div class=&quot;wps-row&quot;>
      <div id=&quot;wps-storefront-dropzone-pagination&quot;></div>   
   </div>

</section>

    Note: this will only work in the Pro version.

    Thread Starter ronnym

    (@ronnym)

    Thanks so much Andrew.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Product Filters’ is closed to new replies.