Support » Plugin: ShopWP » Product Filters

  • Resolved ronnym

    (@ronnym)


    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 Andrew @ wpshop.io

    (@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)
  • You must be logged in to reply to this topic.