Docs

[keith s]

I ran across a thread where a question was answered regarding the image x theme sizing for woocommerce. I want to include a default image for products that do not have a featured image assigned. I believe the CSS was based on 600×600 images. My client does not like the transparent background that slides up upon hovering. The image templates we have created for them are 400×550. This keeps the background from coming up in front of the image.

The url is http://www.midweststeeringdev.com. You will see I have manually inserted the image referred to in the CSS url below for the featured products and it works fine. If I rely on the CSS as submitted below it looks like the products at this url – https://www.midweststeeringdev.com/product-category/parkertrw-hydraulic-steering-control-valves/hga-series-hydraguides/hga-seal-kits-parts/.

I am sure it is just a matter of tweaking the CSS but I could not make it happen. Any assistance would be very much appreciated. Thank you.

.woocommerce li.product.no-post-thumbnail .entry-featured a, .woocommerce-page li.product.no-post-thumbnail .entry-featured a {
background-image: url(“https://www.midweststeeringdev.com/wp-content/uploads/placeholder.png”);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 265px;
}

@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;
}
}

[Rupok]

Hi there,

I’d like to check but can’t access your site – http://prntscr.com/cpk8sy

Update us when it’s accessible.

[keith s]

Not sure what the issue was…must have been a temp issue because the link above works. Please try again. Thank you.

https://www.midweststeeringdev.com/

[keith s]

To avoid confusion please use the following link to view the issue. The homepage default image issue looks fine because I uploaded them manually.

https://www.midweststeeringdev.com/product-category/parkertrw-hydraulic-steering-control-valves/hga-series-hydraguides/hga-seal-kits-parts/

[Rupok]

Hi there,

Thanks for writing back. I can access fine now. Are you referring this? – http://prntscr.com/cpr0rk

Do you want to change the image size here? As you are using three column layout, the width of each product will be calculated in percentage. So you can’t get a static width like 400pc here.

You can define the product width like the code below but it won’t be responsive anymore :

.woocommerce .cols-3 li.product, .woocommerce.columns-3 li.product {
  height: 550px;
  margin-right: 10px;
  width: 400px;
}

Let us know what you are thinking and how we could assist you on this.

[keith s]

The issue I am having is that the default thumbnail image I am trying to use seems to be repeating itself. I want the product page thumbnails to look like the images I manually inserted into the featured product records on the homepage. I just want to do it using CSS versus having to manually insert them.

[Jade]

Hi there,

Please try to add this code in the custom CSS:

.woocommerce li.product.no-post-thumbnail .entry-featured a, 
.woocommerce-page li.product.no-post-thumbnail .entry-featured a {
    background-size: contain;
}

Hope this helps.

[Author]

Posts