Load more button css

Hello,

I have tried to customize the load more button in product archive – to be black with white text font. This is my code in global css settings:

.wd-load-more:hover{
	background-color: #333333 !important;
	color: white;
}

.wd-load-more:not(:hover) {
	background-color: #333333 !important;
	color: white;
}

But the code is still being rewriten by “mod-load-more-button.min.css”, please see printscreen.
How could this be fixed? Very much appreciate your advice.

Best regards,

Attachments:

You must be logged in to view attached files.

Hello,

Please share the WP admin login details of your site so I will check and give you a possible solution.

Best Regards.

Hi,

maybe it also helps other users too, so I want to share that I have fixed this when I increased the specificity of my custom CSS like this:

body .wd-load-more:hover{
	background-color: #333333 !important;
	color: white !important;
}

body .wd-load-more:not(:hover) {
	background-color: #333333 !important;
	color: white !important;
}

Now the browser consider my custom CSS with higher priority so it is not overwritten by existing Woodmart theme CSS.

Best regards,

Hello,

You are Most Welcome.

We are glad that you managed to solve the problem yourself. You are Great!!!

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts