[Support request] Woocommerce articles background

[Matthieu]

Hello, do you think it is possible to apply a colored background in woocommerce articles?

Let me explain, on the page : https://www.mmgraphik.com/

I currently have articles with a colored background made directly on illustrator. My question is if this color background can be done directly in css for each article separately.

Thanks 😀

[Ying]

Hi Matthieu,

It’s possible.
You’ll need to upload empty background PNG file instead of jpg, then use this CSS to target 2 of them post-2393and post-944

.woocommerce ul.products li.product.post-2393, .woocommerce ul.products li.product.post-944{
    background-color: #000;
}

You can use develop tool of chrome to find the post id:
https://www.screencast.com/t/bivCHeup

[Matthieu]

Hello thank you very much for your reply.

I do not see the possibility of putting two images in a woocommerce article.

On the other hand, I put my logo in svg then the background in color with: .woocommerce ul.products li.product.post-2404 {
background-color: # 000;
}

It works.

However, how you can see it here: https://www.mmgraphik.com/

I have absolutely no idea how to adjust the size of my svg and its alignment.

[Elvin]

Hi,

You can horizontally and vertically center the SVG by adding this CSS:

a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    margin: auto;
}

But as for changing the size of the SVG, if you’re trying to match the SVG’s size with the .jpg ones.

The best practice would be to make sure you upload the SVGs of the same purpose with the same dimensions (height, width, aspect ratio, cropping, visual balance) so you don’t have to do a hacky way of fixing this with CSS.

[Matthieu]

Hello, thank you for your answer. I am not sure I fully understand ..

How do I know what is the right size to apply to my svg so that it can be positioned perfectly as a jpeg ?

Thanks

[Ying]

Hi Matthieu,

You could use this CSS to control the size of the SVG, if you want to control other SVGs, you’ll need to find the right post ID to replace post-2404.

.post-2404 .inside-wc-product-image img {
    width: 100px !important; /*adjust the number*/
}

But as Elvin mentioned, it’s better to export the SVG file to the same size before uploading, since the more CSS you added, the slower your site would be.

[Matthieu]

Ok thanks ! 😄 Do you think that it is possible in css to apply a shadow on the articles ?

[Ying]

Yes, it’s possible with this CSS:

.inside-wc-product-image {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}

But I don’t think it’s what you’d like to see 🙂
https://www.screencast.com/t/s2PJVFQUhMZ

[Author]

Posts