How to hide product from main shop page, but still be visible on another page?

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

Hello,

I would like to hide my items that I'm listing for sale from the main shop page.

But, have it still accessible/visible when users click on the "sale" link.

Link to the item I want to hide on the main shop page: https://www.lulopaperstudio.com/shop/p/christmascards

I am not familiar with custom CSS, any help would be appreciated! :)

On 8/10/2021 at 2:33 PM, CherylTeo said:

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

Hello,

I would like to hide my items that I'm listing for sale from the main shop page.

But, have it still accessible/visible when users click on the "sale" link.

Link to the item I want to hide on the main shop page: https://www.lulopaperstudio.com/shop/p/christmascards

I am not familiar with custom CSS, any help would be appreciated! :)

Hi. Can you take a screenshot of products you want to hide?

https://www.lulopaperstudio.com/shop

On 8/12/2021 at 3:46 PM, tuanphan said:

Hi. Can you take a screenshot of products you want to hide?

https://www.lulopaperstudio.com/shop

Hi Tuan,

Here is a screenshot of what I want to hide from the main shop page. 

But, it should still be accessible when I click on the link "sale".

On 8/18/2021 at 12:40 PM, CherylTeo said:

Hi Tuan,

Here is a screenshot of what I want to hide from the main shop page. 

But, it should still be accessible when I click on the link "sale".

Hi,

Add to Design > Custom CSS

/* Hide product from shop page */
@media screen and (max-width:767px) {
div#thumb-christmascards {
    display: none;
}
}

On 8/22/2021 at 10:13 AM, tuanphan said:

Hi,

Add to Design > Custom CSS

/* Hide product from shop page */
@media screen and (max-width:767px) {
div#thumb-christmascards {
    display: none;
}
}

 

Hi Tuan,

I tried adding this to custom CSS but it still shows the item on shop page. 😞

4 hours ago, CherylTeo said:

Hi Tuan,

I tried adding this to custom CSS but it still shows the item on shop page. 😞

 

Sorry, forgot, the code run on mobile only. Use this new code

div#thumb-christmascards {
    display: none;
}

57 minutes ago, tuanphan said:

Sorry, forgot, the code run on mobile only. Use this new code

div#thumb-christmascards {
    display: none;
}

 

Hi Tuan,

Item does disappear from shop page, but when I click on 'Sale' link.. the item is also not there. 

I want the item to disappear from shop page but be available on sale page.

How can I ensure it appears on the 'sale' page?

With this code, if you go to my link: https://www.lulopaperstudio.com/shop/sale, the item is also not there anymore.

Try this new code (Code Injection > Footer)

<style>
  div#thumb-christmascards {
    display: none;
}
  body.sale div#thumb-christmascards {
    display: block !important;
}
</style>
 <script>
if (document.location.pathname.indexOf("/shop/sale") == 0) {
    document.querySelector('body').classList.add('sale')
}
  </script>

19 hours ago, tuanphan said:

Try this new code (Code Injection > Footer)

<style>
  div#thumb-christmascards {
    display: none;
}
  body.sale div#thumb-christmascards {
    display: block !important;
}
</style>
 <script>
if (document.location.pathname.indexOf("/shop/sale") == 0) {
    document.querySelector('body').classList.add('sale')
}
  </script>

 

Awesome! Thank you so much Tuan!

This works perfectly and exactly what I needed. 

Appreciate all your help, you have been a true gem!