Changing Color In Add To Cart Button In Category Display Woocommerce

Hey there Lisa Hogan,

Would you mind posting link to your page where I can see that and I’ll be happy to hlep? Generally this should be possible with some custom CSS.

Cheers,
Bojan

Sure. I am working on a Temp Domain right now But here’s a link: https://184.154.233.249/~lisascr4/product-category/french-country-cottage-decor/

Also, is there a way to make all the boxes the same size regardless of the length of the product title? As you can see the boxes are not lined up neatly and I have noticed that if the product title is longer or shorter it makes a difference in the size of the box.
Thanks so much.

Hey again Lisa,

You should be able to to change the color of those buttons by adding the following CSS code to Appearance -> Theme Options -> Advanced Settings -> Custom CSS:

.product_item .kad_add_to_cart, .product_item a.button {
    background: #ddd;
}

You’ll have to replace color hex value to display another color, you can use sites similar to this one to get hex value for the color of your choice: https://www.color-hex.com/

As for the size of the products you could try setting the minimum height for that element by adding the following:

.tcol-md-3.tcol-sm-4.tcol-xs-6.tcol-ss-12.kad_product {
    min-height: 347px;
}

Hope this helps ??

Best regards,
Bojan

Thank you Bojan,
Worked like a charm but some of the product boxes are still longer than others although they are lining up better. I think I just have to shorten my titles.

I have two more things that have been bugging me. I would like to change the color of the black bar that runs across each category image on my shop page. Link: https://184.154.233.249/~lisascr4/shop/

Also I would like to change the color of the footer buttons on the bottom (buttons listed under More Info in the footer). You can see the footer on that page as well.
Do you have any more tweaks for me???

Hey Lisa,

Glad to hear code is working ??

The reason boxes are not the same is because we just added minimum height for product wrapper which is also the reason they are aligned properly now, we can apply the same thing to those titles and give that element minimum height as well. To do that please try adding this as well:

.products .product_item.grid_item .product_details {
    min-height: 70px;
}

For the black bar please try adding the following:

.product-category.grid_item a h5 {
background: rgba(0,0,0,.6);
}

That bar has 60% transparency in its color so in case you want that as well you’ll have to use rgba colors, you’ll find more info here https://www.w3schools.com/cssref/css_colors_legal.asp.

And for the footer buttons please try adding the following:

#containerfooter .menu li a {
    background: rgba(0,0,0,.1);
}

This is the same black color as in the bar mentioned above but it just has 10% transparency.

Hope this helps ??

Cheers,
Bojan

Thank you so much!!! Everything is looking good. I have one last issue. When I added the css

.tcol-md-3.tcol-sm-4.tcol-xs-6.tcol-ss-12.kad_product {
    min-height: 347px;
}

It helped to align the product boxes but I noticed the category image rows
(link: https://184.154.233.249/~lisascr4/shop/ )

are now spaced very far apart.

Is there a way to put them back to being closer together?

Hey again Lisa,

What we can do there is simply target that CSS to product category pages so it doesn’t affect other pages aside from category pages.

To do that you can replace the above code with the following:

.tax-product_cat .tcol-md-3.tcol-sm-4.tcol-xs-6.tcol-ss-12.kad_product {
    min-height: 347px;
}

Hope this helps ??

Cheers,
Bojan

Awesome! Thanks so much for all your help. ??

Glad I could help ??

Cheers,
Bojan

Hi,
I have another CSS request. I have tried searching the forums but have not been able to find an answer. I made the footer “buttons” match the background color of my footer so you no longer see the boxes. I would now like to change the font color and size of the links that are in the “boxes” in the footer. If you look at my site the text I am referring to is the pink text links under “Shopping Info” and “Services & More Info”. https://www.LisasCreativeDesigns.com I am trying to match it to my attached blog footer area.( https://www.lisascreativedesigns.com/lisascottageblog/) I am using two different wp databases, each of which has a different theme.

Hey Lisa,

Please try adding the following CSS code, this will match the color of the links as well as remove the hover effect so it looks the same as in your blog page.

#containerfooter .widget_nav_menu li a {
    color: #610b0b;
}

#containerfooter .widget_nav_menu li a:hover {
    background: none;
    color: #610b0b;
}

Generally for additional questions unrelated to the opening one you should open a new thread so please if you have any other question aside from the above please do so.

Best regards,
Bojan

Thanks so much. You are awesome. How would I go about making the font a little bit smaller so each link title fits on one line?

Hey again,

If you’re referring to the footer links you don’t have to reduce the font size for them there since they have maximum width defined which we can override so they fit in one line, to do that please try adding the following:

#containerfooter .menu li a {
    max-width: 100%;
}

Best regards,
Bojan

Awesome! That did the trick. Thank you so much! I really appreciate your help Bojan.
Have a wonderful day. ??

Glad I could help ??

Have a great day too!

Cheers,
Bojan