Adding Thumbnail border to Ethos Product Images

Support
#1

Hello! I have my client on Ethos and want the thumbnails for the products to have the border like in the Ethos Store Demo.
http://demo.theme.co/shop-ethos/product/patient-ninja/

I love the clean look of it!

I would also like to revert back to the way the Product image and Gallery Images display to look like on the demo store.

And one last thing! I made a custom shop page and I have everything pointing back to it except the icon in the image I am attaching. I know I can add code to the functions.php file but I really have no need to. I’d rather just remove it, can I ??

Thank you!!
Noelle

#2

Hey Noelle,

Please add this to your Global CSS

.woocommerce .entry-parent {
    display: none;
}

To remove new WooCommerce gallery slider feature which will revert to the old look, please add this code in your functions.php

add_action( 'after_setup_theme', 'remove_woocommerce_new_features', 99 );

function remove_woocommerce_new_features() {
  remove_theme_support( 'wc-product-gallery-slider' );
}

Thanks.

#3

Hello! I added the code to the functions php file and the thumbnails are back where I want them but they do not have the border around them (nor the main product image) as seen here:
http://demo.theme.co/shop-ethos/product/flying-ninja/

The main image is also showing cropped and not as whole like it used to.
If you login and go to: (login is above)


You will see the art is cropped as well as the thumbnail. When you click the thumbnail you see the entire print. I want the entire image to show everywhere. As well as have the border like in the ethos store product link above ( http://demo.theme.co/shop-ethos/product/flying-ninja/ )

I know this all has to do with the updates. Note that I had held off updating this site as it is massive and we fine tuning the import of members. I will update everything in the next couple of days before launch.

So summary:

  1. Get rid of the cropping of product images and cropping of thumbnails under it.
  2. Add border to both like in ethos product link.

THANK YOU SO MUCH!
Noelle :grinning:

#4

I did not mean to post inline reply! I will take a response from anyone :hugs: Thank you! So right above this is my issue! :slight_smile:
Noelle

#5

I am so sorry, I just removed the need to enter the verification code. Please try to login again if that was you! :slight_smile:

#6

Hey Noelle,

Thanks for updating in!

We were not able to check the site because it needs verification code right after the login.

1.) Get rid of the cropping of product images and cropping of thumbnails under it.

  • Please be advised that the product images were controlled by woocommerce. Please go to WooCommerce > Settings > Products > Display > Product images. You might need to disable the “Crop images” options and regenerate the thumbnails.

2.) To add the border, please make use of this custom css code:

.product .woocommerce-main-image,
.woocommerce div.product .images .thumbnails>a {
    padding: 5px;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-transition: border 0.3s ease;
    transition: border 0.3s ease;
}

Hope this helps. Please let us know how it goes.

#7

Hey, I had taken the authenticate code off for you. You responded so fast! Poo, am I the only one working in the US?? :hushed: Anyway, thank you for the quick response!

The CSS did not work. :upside_down_face:
Login and you can see, I took it back out.

I want to regenerate my thumbnails too but what was the original sizes that Themeco used before?? As that is what I want them to be.

THANK YOU! :hugs:

#8

:tired_face:DANG IT! I know it prompted you again. SO SO SOrry! I disabled the plugin, It is for sure off now

#9

Hey There,

Please make use of this css:

.product .attachment-shop_single{
    padding: 5px;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-transition: border 0.3s ease;
    transition: border 0.3s ease;
}

By the way, these are the default product images sizes being used by the theme in the previous version

catalog:
    width   => 250
    height  => 275

single:
    width   => 400
    height  => 400

thumbnail:
    width   => 100
    height  => 100

Please let us know how it goes.

1 Like
#10

Thank you @RueNel :hugs: I am loving the frame as I have used it throughout. Thank you for that and for the original dimensions. I am finding the size to be pretty small on the individual product pages like https://jeanneoliver.com/product/be-still-gallery-wrapped-canvas-print/

So I think I will up that one a bit.
Tell me this, if I choose to regenerate ALL thumbnails through that plugin, will it resize all shop images to the WOO display images and then keep all the rest of the sites thumbnails set to the settings found through Settings, Media Settings ??
Or will it reset ALL thumbnails on the entire site to one or the other??

#11

Hi there,

It will regenerate all images on your site, not just in your Woocommerce images. But, the size change will only affect the area where you changed it. Hence, the old images with 1000px will be regenerated again to 1000px since it’s not related to the Woocommerce setting.

The related products image’s size are picked form Shop Catalog size.

And to apply that border to product category, please add this CSS

.archive  li.product {
    border: 1px solid rgba(0,0,0,0.1) !important;
}

Thanks!

1 Like
#12

On the archive category pages such as:
https://jeanneoliver.com/product-category/art/prints/

Can it be masonry, or does it have to line up like this?
I would love it to be masonry and nustle up together.

Also it only seems the CSS above for category archives borders only works on like
https://jeanneoliver.com/product-category/art/prints/

But when you check other category archives, it doesn’t. I want it to on ALL of them. Same thing is happening with Related Products, some categories are showing with the border, others are not.

https://jeanneoliver.com/product-category/vintage/

Thank you , thank you! You are all amazing :grinning:

#13

Hey Noelle,

Thanks for updating in!

1.) Regretfully there is no masonry option for product archives. It is only available in the blog index and blog post archives. We’ve added this as a feature request so it can be taken into consideration for future development.

2.) The code given by Rad works in all product archives. It is more visible in the other archive because most of the images present in that category has a white border. To resolve this and make sure that there is a white gap in all image in your product categories, please update the code and use this:

.archive  li.product {
    padding: 5px;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

Hope this helps. Please let us know how it goes.

1 Like
#14

Yummy yummy goodness, thank you!
Now I have used

.woocommerce li.product .entry-header h3, .woocommerce-page li.product .entry-header h3 {

text-overflow: clip;
white-space: normal;
}
.woocommerce li.product .entry-wrap {
top: calc(100% - 4em);
}
.woocommerce li.product:hover .entry-wrap {
top: 0;
}
.woocommerce li.product .entry-wrap span.price, .woocommerce li.product .entry-header .button {
display: none;
}
.woocommerce li.product:hover .entry-wrap span.price, .woocommerce li.product:hover .entry-header .button {
display: block;
}

To show full titles, make the font smaller, but I still can’t get the black transparent overlay to be less above the title so even when the title is longer it has a little space under left. See image and link of sample.
**The key being, we do not want the black transparent overlay to take over half the image due to the title.
I would love the title to actually show up UNDER The entire image. That would be awesome, OR HIDE it all together unless the hover. As I like the way it looks when hovering.

I feel like I need to buy you dinner… :smile: Thank you!
Noelle

#15

Hey There,

Thanks for updating in!

If you want something like this:

You can make use of this code:

.woocommerce li.product .entry-header h3 {
    padding-top: 20px;
}

.woocommerce li.product .entry-wrap {
    position: relative;
    background-color: #333;
}

.woocommerce li.product .entry-wrap:before {
    display: none;
}

Or if you only want to change the space around the title like this:

You can just make use of this code:

.woocommerce li.product .entry-header h3 {
    padding-top: 10px;
    min-height: 70px;
}

And if you just want to complete remove the title and only show it on hover, you can make use of this code:

.woocommerce li.product .entry-wrap {
    top: 110%;
}

Hope this helps. Please let us know how it goes.

1 Like
#16

You have gone above and beyond! Thank you so much, these are perfect. I have put this entire thread in Evernote so I never lose it. Such great help! Thank you, Thank you!
Noelle

#17

Hi Noelle,

You’re most welcome! I am just glad I was able to help you out.
It’s good to know that the suggestions were very helpful to you.

Cheers.

#18

Hey! I am back :slight_smile: We did not launch yet as the hosting team is still working on the blog import. Take a look at the link I am going to post, and please tell me why it is pulling the archive category image at 174x250.
What am I missing that they are blurry but just great images?? They go in as much bigger so they can work for whatever needed. These were all added after I set the Product Image sizes in Woo Settings. And then they were even ALL regenerated today. But I cannot get them not blurry.

This category shows it the best:
https://jeanneoliver.com/product-category/art-supplies-necessities/

Individual products show perfect, thumbnails under individuals are perfect. But Category Images and Related Product Images are not.

**Sidenote, those darn related products would just not show the border. I went in and added…

.woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product {
padding: 5px;
border: 3px solid rgba(0,0,0,0.1) !important;

}

And that worked.
I have tonight to fix the blurry images, so any thoughts, obviously so appreciated.

*NOTE, Please use the NEW login I provide below as the hosting guy is using the iTester account. I do not want you to login while he is doing stuff. THANK YOU! :grin:

#19

Hey @Noellemena,

I could not see a way to login.

What is your Catalog Image size? See this link for more details.

Thanks.

#20

Hey, that’s why i included the login link above :slightly_smiling_face: in a secured note along with longing info. Did you login and could not see?? Or you didn’t even get in?? I have it locked to anyone but editor and admins.