My homepage has both products and categories shown. My shop page has only categories shown.

If I change the shop page category height, it changes the product heights also throughout.

I can set the category height on the homepage on its own, as I have placed these in a div and call it from CSS. However I cannot do this for the WooCommerce shop as they are thrown on the shop page automatically.

Here is the CSS I am trying to alter for the shop page only:

.page-id-6602 .storefront ul.products li.product,
.post-6602 .storefront ul.products li.product,
.page-id-6602 ul.products li.product,
.post-6602 ul.products li.product,
.page-id-6602 .site-main ul.products li.product
.post-6602 .site-main ul.products li.product {
    height: 275px !important;
    min-height: 275px;
    max-height: 275px;

but it's still grabbing this from my product heights throughout:

ul.products li.products {
height: 500px;

Any ideas?? Greatly appreciated.

website home page: thailandpoolshop.com

website shop page: thailandpoolshop.com/shop


i thing you have .page-id-6602 .storefront on the body tag so you should be using selector like this .page-id-6602.storefront ul.products li.product

instead of .page-id-6602 .storefront ul.products li.product

also i am not able to access the shop page kindly check.

  • Thanks for your reply, but this had no effect on the shop page. The links at the bottom of the question should work fine. Just tested myself. – Dayley Nov 25 '17 at 6:44
  • where do you get .post-6602?\ – Taj Khan Nov 25 '17 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.