This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Category images

Resolved 18 replies premiumthemetheme-vantage
Magus
10 years ago · Last reply by Andrew Misplon 10 years ago

I am trying to remove the images from the main shop category navigation pages.

I have tried adding

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

to my child functions but this removes the images from the category products page and not from the category/subcategory pages.

I have removed this from my functions page but cannot find any other reference either in css or woo actions to accomplish this.

URL: http://test.magistercs.co.uk/shop

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

18
  1. Daniel Staff 10 years, 11 months ago

    Hi Magus

    Am not sure if I got exactly what your explaining there :( but I hope this helps. If you navigate to Appearance > Custom CSS, you’ll get the custom CSS editor. Just add the following code.

    .woocommerce ul.products li.product a img{
    display:none!important;
}

    If that’s not what you want to achieve please elaborate and I will jump to it

  2. Magus Staff 10 years, 11 months ago

    Hi Addo,
    thanks but I already tried that and it removes all images from the category pages, including the product images. What I want to di is to remove the category images themselves but leave the product images where they are.

  3. Magus Staff 10 years, 11 months ago

    I will leave that code in place so you can see what I mean. I just want to remove the images that appear above the category text.

  4. Daniel Private Staff 10 years, 11 months ago

    This is a private message.

  5. Magus Staff 10 years, 11 months ago

    I am thinking that I may need to add a custom page to my child theme, just removing the code to show the image above the category. Is this going to be the best option going forward or will it perhaps break future updates?

  6. Andrew Misplon Staff 10 years, 11 months ago

    Hi Magus

    Perhaps try:

    .post-type-archive.woocommerce ul.products li.product a img { display: none; }

    Hope that helps.

  7. Magus Staff 10 years, 11 months ago

    Hi Andrew

    A step in the right direction. This removes the images from the main category, but not from the sub-categories.

    On another note, is there any way to standardise the position of the add to cart buttons on the product archive page so that they are always in line with each other?

    see: http://test.magistercs.co.uk/product-category/components/motherboards-memory/motherboards/

  8. Andrew Misplon Staff 10 years, 11 months ago

    Right you are. Let’s rather try:

    .post-type-archive.woocommerce ul.products li.product a img,
.tax-prod_cat.woocommerce ul.products li.product a img { display: none; }

    Try the following to help your button alignment:

    .woocommerce ul.products li.product h3 {
  min-height: 93px;
}
  9. Magus Staff 10 years, 11 months ago

    Hi Andrew

    Still only working on the main category page, images are still being shown on the sub pages.

    The addition for the button position is good but it is expanding the clickable area for the categories on the main category page.

    http://test.magistercs.co.uk/shop

  10. Andrew Misplon Staff 10 years, 11 months ago

    Right right. Ok, try this:

    .post-type-archive.woocommerce ul.products li.product a img,
.tax-product_cat.woocommerce ul.products li.product a img { display: none; }
.woocommerce ul.products li.product .price {
  min-height: 30px;
}

    Adjust that min-height as required.

  11. Magus Staff 10 years, 11 months ago

    Hi Andrew

    This has removed the images from the sub category pages but has also removed the images from the category products page as well, identical to what the original adjustment in the first post did.

    The change in the button position has not worked. it has just increased the space between the text and the button so items with a longer description still have the button lower than others.

    Simon

  12. Andrew Misplon Staff 10 years, 11 months ago

    The problem is the lack of an original body class to identify the exact situations you’re looking to modify. If you inspect the source code and check the body tag and the classes therein, you’ll see what I’m referring to. It’s the same situation with the button alignment. I tried targeting the price because that does push the button down and isn’t on the category pages. I’ll take another look in a bit and see if there is anything else we can offer here.

  13. Andrew Misplon Staff 10 years, 11 months ago

    Remove images:

    .woocommerce ul.products li.product-category a img { display: none; }
  14. Magus Staff 10 years, 11 months ago

    Hi Andrew

    Cannot thank you enough, that worked perfectly.

    as for the buttons I have sorted that by adding this.

    .archive .post-with-thumbnail-large {
    height:350px !important;
}
.archive a.button.add_to_cart_button.product_type_simple {
 position:absolute;
  bottom:0;
}
.archive a.button.product_type_simple {
 position:absolute;
  bottom:0;
}

    which gives the container a set size then fixes the button to the baseline of the container.

    Simon

  15. Andrew Misplon Staff 10 years, 11 months ago

    Your absolute positioning of the buttons works well. Alternatively you can use this new min-height solution:

    .woocommerce ul.products li.product:not(.product-category) h3 {
  min-height: 93px;
}

    Perhaps just let us know if you’re working a solution at the same time. We’d appreciate it :)

    Let me know how these two updated solutions work or just the one if you stick with the absolute buttons.

    Thanks

  16. Andrew Misplon Staff 10 years, 11 months ago

    Ahh sorry Simon! We still need to add a forum solution where we can see if there has been an update. I didn’t refresh the page so didn’t see your post.

    Awesome! Thanks for the long long wait here. Really glad to hear we made some progress finally.

    If you’re interested in some of the more advanced CSS techniques ever, do check out this post: http://learn.shayhowe.com/advanced-html-css/complex-selectors/ it’s my go-to reference on that stuff.

    Let us know if you run into any further challenges moving forward and we’ll do our best to help. Feel free to just ask here so I get an email.

  17. Magus Staff 10 years, 11 months ago

    Thanks again Andrew, your solution is a lot more elegant and simple than mine so will be using that

  18. Andrew Misplon Staff 10 years, 11 months ago

    For sure, glad that helped. Thanks for your patience.

    Chat soon. Cheers.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread