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

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!

Have you found the solution yet?

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.

Please see Store Category All List Hide.

Let us know how it goes.

@creedon, thank you!!!  this worked!

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!

Hello @creedon, I have the same issue but my template is 7.0 (hyde).

Are you able to help? Thanks!

https://salteddecor.com/

@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 Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

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

Follow the instructions in the following post.

Let us know how it goes.

@creedon thank you for your time. Now all of my products disappeared, the category links are there but products aren't displayed no matter where I click.

PS: I deleted the code, so if you go to my site you will see the products

@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.

@creedon Ok, I did that. I forgot to mention I want to default my store to the category "textiles"

@SaltedDecor

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

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.

@creedon it worked! Yay! 

Now onto the next step, if appropriate here in this thread. Can my "shop" link default to a specific category? In my case, textiles.

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.

Let us know how it goes.

@creedon it worked! However, sometimes my products don't show unless I refresh the page. 

@SaltedDecor

I'm thinking the curse of Ajax Loading. Try turning off Ajax Loading to see if the problem goes away.

@creedon bingo! I'm all set. You rock!

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 🙂

@LXK

If we could see the shop page with sections that you mention that would help us.

12 hours ago, creedon said:

@LXK

If we could see the shop page with sections that you mention that would help us.

Hey @creedon

Thanks for looking into this.

Here is the link: https://cbhd-dev-9ac7.squarespace.com/store

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.

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 🙂

I have a similar issue - I want to hide all the products on the Store page only and display all products in the category and sub category pages. For my site, the code below hides products on the Store page and the second level category pages. The third level category pages work fine with products displayed.
(Thanks Creedon - and also Tuan Phan!)

Is it possible to hide only the products on the Store page and display all products on all category pages?

Thanks in advance for any advice 🙂

<style>

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

@Wilke

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thanks so much. Just messaged through the site URL - without config.
The password is monkeys0987@.