WooCommerce Picture

[Peter789]

Hi there,

How can I add a border to my product picture?

[nabeel]

Hi Katarina,

Thank you for reaching out to us. This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. To add a border around product image, you can add the following code in the Theme Options > CSS:

figure.woocommerce-product-gallery__wrapper {
    border: 10px solid #000;
    background: #000;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

[Peter789]

Hi @nabeel

The following code you sent is not what I wanted

I probably didn’t explain well since I don’t know how it is actually called

Here’s what I want on my woocommerce product pictures:

[christian]

Hey Katarina,

That is a border-radius. You can learn how to use that here https://www.w3schools.com/cssref/css3_pr_border-radius.asp. Target the HTML image element itself to make that work.

If you’re not sure how to code that, I’d recommend you create a custom WooCommerce single product layout so you can use the Pro elements as usual but this time the template would be applied to all single products. Watch the following video to learn more.

In case you don’t want to use the Layout Builder, the next option would be to subscribe to One where we can give advice on what code to use for this case.

Thanks.