[shaunolverParticipant]

Hello,

I’m using the Ethos stack with Woocommerce plugin. I’m wondering if you can help point me in the direction of a default image placeholder for any products that are created but not assigned a featured image. I’ve found a way of doing this with css, but the image sizes do not work as expected as I can’t assign a percentage figure in css min-height. Here’s the code i’m using:

.woocommerce li.product.no-post-thumbnail .entry-featured a, 
.woocommerce-page li.product.no-post-thumbnail .entry-featured a {
    min-height: 200px;
    background-image: url('URL_TO_IMAGE');
}

The above code achieves the issue of getting a placeholder image, but the image does not display correctly as per my screenshot.

Site Details:

– URL: http://primeskatestore.com/skatestore/
– WordPress: 4.3.1
– Theme: X-Child 1.0 (Parent X Theme 4.1.1)
– Plugin: Woocommerce 2.4.10

Thanks in advance for any help!

[DarshanaModerator]

Hi there,

Thank you for the detailed explanation. Could you please try adding the following CSS code instead.

.woocommerce li.product.no-post-thumbnail .entry-featured a, .woocommerce-page li.product.no-post-thumbnail .entry-featured a {
    background-image: url("http://primeskatestore.com/wp-content/uploads/2015/11/placeholder.jpeg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 265px;
}

Hope that helps.

[shaunolverParticipant]

Hi,

Thanks for your quick reply. Your CSS above certainly makes it look much better. The issue I have and I know my client will have is that the above CSS isn’t responsive. Is there a way to make this responsive?

Thanks again.

[Rue NelModerator]

Hello There,

To make the code responsive, you can add this code as well;

@media(min-width: 980px) {
  .woocommerce li.product.no-post-thumbnail .entry-featured a, 
  .woocommerce-page li.product.no-post-thumbnail .entry-featured a {
    min-height: 265px;
  }
}

@media(max-width: 979px) {
  .woocommerce li.product.no-post-thumbnail .entry-featured a, 
  .woocommerce-page li.product.no-post-thumbnail .entry-featured a {
    min-height: 165px;
  }
}

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

[shaunolverParticipant]

Hi,

That’s definitely helped things look much better again. Thanks!

The only problem which my client has seen is that the image doesn’t resize (if you adjust the browser window size) in line with the products that do have featured images assigned to them. A suggestion that would be nice to have available on X is somewhere to upload a default Woocommerce placeholder image which is to be used should a featured image not be set on a product.

Thanks again for your help.

[RadModerator]

Hi there,

Hmm, they resize accordingly. Would you mind providing a video recording?

Thanks!

[shaunolverParticipant]

Hi,

Here’s a Youtube link displaying the problem: https://youtu.be/9fg5jbUtLe0

The width of the placeholder image adjusts dynamically with the browser size, but the height does not due to the min-height CSS. If you could advise on anything else I could do to resolve this, that would be great!

Thanks.

[ChristopherModerator]

Hi there,

If we force both width and height as you tried it, it definitely breaks responsive layout, so we recommend you to force width or height properties.
To solve this issue please try to use images with the same size.

Thanks.

[shaunolverParticipant]

Hi,

Sorry I’m not sure I understand what you mean. I’m currently uploading all product images as 600px x 600px. The placeholder image is uploaded at exactly the same size. Are you suggesting to upload the placeholder image at a smaller size?

Thanks.

[ZeshanMember]

Hi Shaun,

Sorry for the confusion! I’ve checked your site and the difference in height is due to the fixed height you’re using for placeholder images (see: http://prntscr.com/93cq77).

In this case, try replacing following pointed CSS code:

.woocommerce li.product.no-post-thumbnail .entry-featured a, .woocommerce-page li.product.no-post-thumbnail .entry-featured a {
    background-image: url("http://primeskatestore.com/wp-content/uploads/2015/11/placeholder.jpeg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 284px;
}

@media(min-width: 980px) {
  .woocommerce li.product.no-post-thumbnail .entry-featured a, 
  .woocommerce-page li.product.no-post-thumbnail .entry-featured a {
    min-height: 265px;
  }
}

With this:

.woocommerce li.product.no-post-thumbnail .entry-featured a, .woocommerce-page li.product.no-post-thumbnail .entry-featured a {
    background-image: url("http://primeskatestore.com/wp-content/uploads/2015/11/placeholder.jpeg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 100%;
}

Thank you!

[shaunolverParticipant]

Hi,

That’s perfect! Thank you so much for your help!

[ZeshanMember]

You’re welcome! 🙂

[Author]

Posts