How can I automatically add overlay color over the images in the slider?

How can I automatically add overlay color over the images in the slider?

Hello,

Can you please share the screenshot of the issue for a better understanding? Which slider images you are talking about?

Best Regards.

Over the standard slider in the theme (over the image) how can I add a color overlay? To see the text better.

Attachments:

You must be logged in to view attached files.

And I have one more question.

I don’t want to change the product style in the settings because I’ve customized it a bit.

I just want you to tell me how to disable the trash icon from appearing when I hover over the button.

Attachments:

You must be logged in to view attached files.

And how can I make that button to be (justify) from one end to the other?

Hello,

1. Please share the WP admin login details of your site so I will check and give you the possible solution about how to set the overlay color for the slider.

2. Sorry to say but unfortunately there isn’t a separate option available right now to change the Add to Cart icon on the Shop or Category pages. Please use the below custom CSS code and go to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> paste the CSS there.

.term-accessories .wd-add-btn-replace .add-to-cart-loop:before { content: "\f120" !important; }

Note: Change the icon code in the CSS.

3. Please share the page URL so I will check and give you the custom CSS code to change the button width.

Best Regards.

All I want to do is remove the hover effect from the button where the icon appears. (I don’t want to change the icon, I just want to remove that effect)

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to say but your provided WP-ADMIN URL is getting redirected to 404 page and your Site is on Maintenance mode so we aren’t able to proceed further. Could you please share the valid WP-ADMIN URL so that we can proceed further in this regard on your Site and assist you accordingly.

Best Regards

Sorry. Check private content

Hello,

1- Sorry to say but right now the Overlay option is only available specifically for the Text over the Slider. For which you can go to Dashboard > Slides > edit the Slider Images one by one with Elementor > there edit the Section having Text > then go to Style tab of it > and there you can find the option to define Background Overlay: https://snipboard.io/OgKlfe.jpg

2- Regarding hiding the Add to Cart on hover, the thing is if we apply the Custom CSS to hide that on your Site when one hover over the button, it will show an empty area. Initially, it will show Add to Cart text but on hover it will show empty.

This is the Custom CSS that you can try out:

.wd-add-btn-replace .add-to-cart-loop:before { display: none !important; }

Location to paste Custom CSS, go to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> paste the CSS.

Best Regards

[andreiv30]

Thanks!

But.. for point 2 (hover button) it doesn’t work. cart icon still appears on hover.

• This reply was modified 1 year, 11 months ago by andreiv30.

Hello,

Sorry to say but we have checked and confirmed, right now it won’t be possible to hide the Add to Cart icon here from the Products, as the Product structure follows the Hover functionality and the Icon works on Hover by default. So, it isn’t possible to simply hide it with Custom CSS.

Hope you can understand the limitations here !

Best Regards

at least tell me in which source file I can find that button so I can modify it from the code.

Hello,

Actually, the Content Code for the Add to Cart icon is defined through the CSS defined in the Theme’s style.css file. So, you can open the said file through the following location:

wp-content/themes/woodmart/style.css

In this file, on the Line Number 13758, you will find the :before selector CSS starting > in that CSS you will find the content code defined as content: “\f123”; > try replacing this content code as content: “ ”; there and then check back your Site again. Hopefully, this works out for you !

Best Regards

I even deleted that whole class .wd-add-btn-replace “.add-to-cart-loop:before” it just keeps showing up.

The lines of code still appear in the source code when I checked with inspect. Where else can they be?

Hello,

Your issue has been solved. I have added the below custom CSS code in the Global CSS section, please check it now after removing the browser cache:

.wd-add-btn-replace .add-to-cart-loop:hover:before {
    visibility: hidden;
	  display: none;
}
.wd-add-btn-replace .add-to-cart-loop:hover:after {
    visibility: hidden;
	display: none;
}

Best Regards.

The cart icon has disappeared, but when you hover over the button, nothing appears. How could we get the hover effect off?

Attachments:

You must be logged in to view attached files.

Hello,

Your issue is now resolved in this regard. Please check back your Site after completely clearing the browser and server cache.

The following detailed Custom CSS was applied in this regard on your Site:

.wd-add-btn-replace .add-to-cart-loop:hover:before {
    visibility: hidden;
    display: none;
}
.wd-add-btn-replace .add-to-cart-loop:hover:after {
    visibility: hidden;
    display: none;
}

.wd-add-btn-replace .add-to-cart-loop span {
    transition: none !important;
}

.wd-add-btn-replace .add-to-cart-loop:before {
    display: none !important;
    transition: none !important;
    transform: none !important;
}

.wd-add-btn-replace .add-to-cart-loop:after {
    display: none !important;
    transition: none !important;
    transform: none !important;
}

.wd-add-btn-replace .add-to-cart-loop:hover span {
    transform: none !important;
    transition: none !important;
}

Best Regards

Love you. <3
Thanks! You can close the ticket.

Most Welcome!!!

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts