[bigboxheadParticipant]

Hi,

I have uploaded images as product category images, these images are high resolution images and should be large enough to be clear. I tried to change the image size in woo commerce but it doesn’t appear. What would be the best way to make these images clear?

Thanks
Kerry

[Prasant RaiModerator]

Hello Kerry,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[bigboxheadParticipant]

http://www.strawberryandblue.com

[Nabeel AModerator]

Hi again,

Thank you for providing URL. Can you please provide us the page URL so we can take a closer look?

Thanks!

[bigboxheadParticipant]

Hi, it is the 4 product category images at the top of the home page, http://www.strawberryandblue.com this page i built with cornerstone, also it is affecting the 4 product images on the page http://www.strawberryandblue/shop which is generated by woo commerce.

Also how would i decrease the size of the gap between the bottom of each product category image and the text. As you will see the gap between the bottom of the image and the text is no the same as the gap between the bottom of the text and the end of the box. I would like gap to be the same for both, how would i fix this.

[Rue NelModerator]

Hello There,

Thank you for the updates! To have full control of the product images, please check out this topic:
https://community.theme.co/forums/topic/product-images-woocommerce/#post-224057

And to remove the gaps on the page, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.woocommerce .cols-4 li.product, 
.woocommerce.columns-4 li.product {
  margin-bottom: 10px;    
}

p:empty{
    display: none;
}

Please also keep in mind that the section and the rows have a default padding and margins. Please do check out for that because it will also contribute gaps.

Hope this helps.

[bigboxheadParticipant]

1:
Thank you for the updates! To have full control of the product images, please check out this topic:
https://community.theme.co/forums/topic/product-images-woocommerce/#post-224057

Thanks for the link to this information, is this the best solution to get images that I upload “retina ready” or is their a easier solution.

If I am uploading high resolution images why are they displaying blurry. The images are lot larger than the minimum image size for the x theme settings?

2:
Sorry i don’t think I clearly explained my problem.

I would like to decrease the gap between the top of the text in the product category boxes and the image so that the gap is the same as the gap between the bottom of the text and the bottom of the box?

Thanks
Kerry

[RadModerator]

Hi there,

1. Have you uploaded the suggested code on that thread? If yes then it will be blurry. Shop catalog images are smaller than the original. If you wish to change it to full size, then this line

$stack_thumb      = 'shop_catalog';

must be changed to

$stack_thumb = 'full';

Since we’re changing the size through coding, then it’s no longer connected to X theme’s image sizes.

2. Please add this CSS as well,

  .product-category h3 {
  margin-top: 0px;
  }

Hope this helps.

[bigboxheadParticipant]

Hi,

Sorry after reading through the answers and the links I am lost as to what I should be doing or how I edit the child php. folders?

Can you please provide me a link on how I could achieve what is explained in that post in more detail. I can’t follow or am missing some information in that post.

Thanks
Kerry

[RadModerator]

Hi there,

If your hosting provider has a file manager, then you may use it. It usually has the built-in editor.

If they aren’t available, then you’ll need an FTP client. It’s a software that you’ll install on your PC and it will help you manage your site’s file remotely. As for the editor, you can use a notepad or any coding editing software. FTP Client requires login credentials and that something you can get from your hosting provider.

An example of FTP client is Filezilla Client https://filezilla-project.org/, and you may check its documentation.

Then just follow the instruction and file path on that thread when you edit php files.

Thanks!

[bigboxheadParticipant]

Ok, I will look further into this.

Just so I’m sure, there is no way for me to upload images for the product categeries thumbnail images so that they are retina ready using x theme as it is without having to go in and start editing code?

[RadModerator]

Hi there,

You can upload them, though, have you done some customization? Your images are just 300×300 but it should be around 900×600. For the meantime, please try adding this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery('.product-category.product a img').attr('src', function( index, src ) { return src.replace('-300x300', ''); } );

It will enforce image’s original size. But it may take time loading before it display the high quality image.

Thanks!

[bigboxheadParticipant]

Hi,

Sorry I am not sure where to go.

I would like to explain further what I am trying to achieve just to make sure that we are on the same page. I have attached two examples the first is the homepage of my store looks at the moment and the second is how I would like it to look.

The only other issue is that I would like these images to display clearly, i.e. retina ready which they aren’t at the moment.

Thanks

[bigboxheadParticipant]

Here is the site screen shot as it looks now

[bigboxheadParticipant]

Hello,

Sorry to be a pain, please forget the last messages.

I am happy that the size of the category images is ok.

The only problem now is that the images are not sharp. What size do the images have to be to display well using X’s settings? Is there no way for me to upload images for the product categories that will display well using X’s settings?

Thanks
Kerry

[Author]

Posts