Regarding the product detail page question 2

.wd-carousel-item.wd-thumb-active{
border: 1px solid #FF5E2B;
}
div.wd-gallery-thumb :is(.wd-carousel-item:hover,.wd-thumb-active,.wd-carousel:not(.wd-initialized) .wd-carousel-item:first-child) {
opacity: 1;
}

Regarding the product detail page, choose which image to display for the product thumbnail (see the image below for the product thumbnail inside the black oval).
Your default is that when a thumbnail is clicked with the mouse, the brightness of that thumbnail is dimmed.
But I would like to have the thumbnail wrapped in a red rectangle when clicking on it with the mouse, how can I change it to this effect instead of your default of clicking on the thumbnail and having the thumbnail dimmed.
Here are 2 images, one of them, I drew a red rectangle wrapped around this thumbnail on top of the selected thumbnail, this is the effect I want.

Attachments:

You must be logged in to view attached files.

Hello,

Please share the product page URL so I will check and give you a possible solution to your issue.

Best Regards.

the website is in the below Private content.
Please tell me how to fix the problem as quickly as possible.

Hello,

To achieve the red rectangle effect, use the following CSS. Add this CSS to in Theme Settings > Custom CSS.

.wd-carousel-item.wd-thumb-active {
    border: 2px solid red; /* Adjust thickness and color as needed */
    opacity: 1 !important; /* Ensure no dimming effect */
}

Best Regards

[Author]

Posts