The issue regarding modifying the gap between the product image and the backgrou

1. Product Image
2. Image Background
3. I want to modify this gap to make the product image and the background image completely overlap (i.e., make this gap 0).

I hope I have expressed my request clearly.

Hello bzzxzz,

Thanks for reaching to us and appreciate your patience.

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

div:is(.products-bordered-grid-ins,.wd-products-with-bg:not(.products-bordered-grid),.wd-products-with-shadow:not(.products-bordered-grid)) .wd-product {
    --wd-prod-bg-sp: 0;
}

Best Regards,

Okay, thank you.
However, a new issue has arisen.
I want to center-align the text and the image, but I couldn’t find the relevant setting.
I would appreciate it if you could guide me on how to adjust the settings. Thank you.

Hello bzzxzz,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-product.wd-hover-small .product-wrapper {
    justify-content: center;
    align-items: center;
}

Regards,

[Author]

Posts