change load more products button background and text color

Hi! Please send me the css code to change the background and text color of the add more products button.
Thanks!

Hello,

As a reminder we have settings for the buttons in Theme Settings -> Styles and colors -> Buttons, there you can define any color for different buttons.

But if you didn’t find such settings for the button as you want, please clarify where your “add more products button” is situated, I will do my best to help you.

Kind Regards

Hi,

The button is located in Ajax Product Tabs in the shop page.

<span class=”load-more-label”>LOAD MORE PRODUCTS</span>

Please send the CSS code to change background and text color.

Thanks

Hello,

As you can see from the below video, I have checked your site and I didn’t find any “Load more button” on the home or shop page.

https://monosnap.com/file/AvJRGiUUD9JW2tVizPSueTTv7PCCqy

Please, be sure that you have defined this button in the “Ajax Product Tabs”.

Kind Regards

thank you, I have changed it anyways to a carousel. Anyways you did not need to see it, I sent you the class information for that matter. Anyways… if anyone needs to hide it they can do it in css by adding “.home” before the class name so it is only hidden in home page (I found this online and works).

I HAVE OTHER IMPORTANT ISSUE and now would like a solution from your side :”Ajax Product Tabs “does not let me select products by category. When I select “All products” and then try to narrow by item number it works fine, but if I select to narrow the items by category it does not find the categories.

I am sending an image so you can see it. I will wait for your reply. Thanks

Attachments:

You must be logged in to view attached files.

Hello,

1. This code will work for each “Load more” button from the “Ajax Product tabs” on the home page. You can paste it to the “Global Custom CSS” area that is in Theme Settings -> Custom CSS.

.home .wd-products-tabs .wd-load-more {
    background-color: #33424646 !important;
    color: #8d6824;
}

.home .wd-products-tabs .wd-load-more:hover {
    background-color: #333 !important;
    color: #7b66e3;
}

Changing color of the loader:

.home .wd-products-tabs .wd-load-more .load-more-loading:before {
    border: 1px solid #fff;
    border-left-color: #a8a1a1;
}

2. From my side, narrowing the items by category is working well (you can check the below video). If you have still this issue, please provide your site admin access so then I can check the issue from your side.

https://monosnap.com/file/5A8aDW74aFIHVg9NTR66f7GdLrhx9e

Looking forward to collaborating with you!

Kind Regards

[Author]

Posts