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.
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
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.
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.
This is a private message.
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?
Hi Magus
Perhaps try:
.post-type-archive.woocommerce ul.products li.product a img { display: none; }Hope that helps.
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/
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; }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
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.
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
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.
Remove images:
.woocommerce ul.products li.product-category a img { display: none; }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
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
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.
Thanks again Andrew, your solution is a lot more elegant and simple than mine so will be using that
For sure, glad that helped. Thanks for your patience.
Chat soon. Cheers.