Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

How to hide all products on main shop page not only the ALL hyperlink


blitz

Recommended Posts

Site URL: https://www.eightysixtuned.com/shop

Hello all,

Could one assist with a way to prevent showing of all products on the main store page bottom.  I'm looking to require the customer to drill down through the categories or sections to view individual product groupings rather than be able to view all products listed individually on the main store page.

Not strictly talking about the ALL category which can be removed using page settings as a filter, but how to remove the display of each individual product on the lower portion of the shop main page.

Thank you!

Edited by blitz
Link to post
  • Replies 21
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

I meant to take a look into this after suggesting blitz post this topic in a new thread. Thanks to tuanphan for reminding me about this topic. Add the following to Store Settings > Advanc

It worked! Thank you so much!

@creedon, thank you!!!  this worked!

Posted Images

I meant to take a look into this after suggesting blitz post this topic in a new thread.

Thanks to tuanphan for reminding me about this topic.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  /* hide products on main store page that has categories */
  
  .nested-category-children ~ .products-flex-container {
  
    display: none !important;
    
    }
    
  </style>

This is for a v7.1 site.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 3 weeks later...
On 1/16/2021 at 7:50 PM, creedon said:

I meant to take a look into this after suggesting blitz post this topic in a new thread.

Thanks to tuanphan for reminding me about this topic.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.


<style>

  /* hide products on main store page that has categories */
  
  .nested-category-children ~ .products-flex-container {
  
    display: none !important;
    
    }
    
  </style>

This is for a v7.1 site.

Let us know how it goes.

It worked! Thank you so much!

Link to post
  • 3 months later...
Posted (edited)

@SaltedDecor

We'll have to take a different tack as it looks like there isn't a CSS only way to do this.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  body:not( [data-store-category] ) .ProductList-grid {
  
    display : none;
    
    }
    
  </style>

<script>

  $( ( ) => {
  
    /*
    
      add category attribute to a store category page
      
      Version      : 0.1d0
      
      SS Version   : 7.0
      
      Templates    : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                     Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt,
                     Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor,
                     Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro,
                     Pursuit, Rally, Rover, Royce, Sofia, Sonora, Stella,
                     Thorne, Vow, Wav, West )
                     
                     your template is not listed? then it is not currently
                     supported
                     
      Dependancies : jQuery
      
      By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      no user serviceable parts below
      
      */
      
    const searchParams = new URLSearchParams ( location.search );
    
    const category = searchParams.get ( 'category' );
    
    if ( category == null ) return;
    
    $( 'body' ).attr ( 'data-store-category', category );
    
    } );
    
  </script>

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post

@SaltedDecor

Just tested the code again and it works a treat here locally.

If you're game. Add the code as instructed above minus the style tag.

<style>

  body:not( [data-store-category] ) .ProductList-grid {
  
    display : none;
    
    }
    
  </style>

This is the code that is actually hiding the products. Without it installed, I can check that the other code is working as expected and it won't effect the display of the products.

Let me when you've done that.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post

@SaltedDecor

That code is working as expected. And when I add the style tag code. The pages work as expected.

676919867_ScreenShot2021-05-10at12_16_16PM.png.1ca9b83848325c6cc5ccfb83790a7f1f.png

 

1940470710_ScreenShot2021-05-10at12_09_28PM.thumb.png.df42edc994b60c1723b4c341bb878daa.png

 

Quote

I forgot to mention I want to default my store to the category "textiles"

Let's see if we can get this issue solved before moving onto the next.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
1 hour ago, SaltedDecor said:

I forgot to mention I want to default my store to the category "textiles"

Move your Shop page into the Not Linked area of Pages.

Then create a Link page in the Main Navigation area. Fill it in as follows.

1643696254_ScreenShot2021-05-10at1_00_40PM.png.a4b41fc72562ed102641d38b58322ee6.png

 

2059931275_ScreenShot2021-05-10at1_00_07PM.png.d2be7524c85ff6ef60f7baf5efc6c335.png

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 4 weeks later...

Hey @creedon

I hope that you can help me with a tricky request.

I'm looking to add a new summery section in the shop page which sits above the shop section. The summery section will display the 3 products that are available. The shop section below will display all of the sold out items.

For the summery block, I have two options which would be to either pull from an 'available' tag or pull from a 'featured' tag. I have managed this far but I would really need to hide the available products featured in the summery section, from the shop section below... I hope this makes sense?

Any help would be hugely appreciated.

https://cbhd-dev-9ac7.squarespace.com/
JAN21PW

Thank you 🙂

Link to post

Now that I see I think I have a grasp. To summarize you want to hide items that are not sold from the product grid.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>
  
  .grid-item:not( .sold-out ) {
  
    display : none;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
15 hours ago, creedon said:

Now that I see I think I have a grasp. To summarize you want to hide items that are not sold from the product grid.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.


<style>
  
  .grid-item:not( .sold-out ) {
  
    display : none;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

You sir, are a genius - this worked perfectly.

Thank you 🙂

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...