Border for the product card

4 years, 5 months ago root
Keymaster

Hello,

I want to add a light grey border to the product card, so the whole product card will have border even after hover effect.

Please help with that.

Thank you,

4 years, 5 months ago root
Keymaster

Hi again 🙂

use the below code and change the color code with your desire color :

.woocommerce div.products div.product.with-border .add_to_cart_btn_wrap {
border: 1px solid #b7b7b7;
}

Add this code :
Wordpress Dashboard -> theme setting -> additional Scripts -> Custom CSS

best Regards

4 years, 5 months ago root
Keymaster

Hello,

Thank you for your swift response.

I applied the code however, there were no changes on the product card.

Please try from your side, you already have the log in information.

Thank you 🙂

4 years, 5 months ago root
Keymaster

Hi again,
I just check your website now and seems this code works fine :
https://imgur.com/undefined

Coming Soon

Regards

4 years, 5 months ago root
Keymaster

Hello 🙂

I am trying to open your screenshot link but it shows 404 error.

could you please share with me anther screenshot.

Thank you,

4 years, 5 months ago root
Keymaster

Sorry,

I saw now it is ok, but what I want is a border for the whole product card (photo, title, price, buttons) not around the product photo.

Thank you,

4 years, 5 months ago root
Keymaster

Hello,

I did not get any reply about my request! I was asking to have a boarder around the whole product card and the code you provided did not work.

I used this code and it worked but only on PC and tablet view, it did not work on mobile view.

.woocommerce div.products.buttonsappearunder div.product, .woocommerce.wc-shortcode.carousel:not(.no-gutter) div.products.buttonsappearunder div.product {
margin: -0.5px!important;
border: 1px solid #999999;
}

Kindly help me in how to apply the same boarder on the mobile view.

Thanks,

4 years, 5 months ago root
Keymaster

I did not get any reply about my request! I was asking to have a boarder around the whole product card and the code you provided did not work.

I used this code and it worked but only on PC and tablet view, it did not work on mobile view.

.woocommerce div.products.buttonsappearunder div.product, .woocommerce.wc-shortcode.carousel:not(.no-gutter) div.products.buttonsappearunder div.product {
margin: -0.5px!important;
border: 1px solid #999999;
}

Kindly help me in how to apply the same boarder on the mobile view.

Thanks,
4 years, 5 months ago root
Keymaster
morning ahmad

use this code :
```
.woocommerce div.products.buttonsappearunder div.product, .woocommerce.wc-shortcode.carousel:not(.no-gutter) div.products.buttonsappearunder div.product {
    margin: -0.5px!important;
    border: 1px solid #999999 !important;
}
```
I edit this code on your website and seems in Desktop and mobile border now shown border
4 years, 5 months ago root
Keymaster

Thank you so much!

4 years, 5 months ago root
Keymaster

Your Welcome 🙂

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

Community Forums

KiteStudio Team

Getting Support