Background of Wishlist & Quick View buttons

This topic has 9 replies, 2 voices, and was last updated 3 months, 3 weeks ago by Aizaz Imtiaz Awan.

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

Author

Posts
July 18, 2024 at 7:00 am #584060

designmono
Participant

Hi,

We would like to customize the look of wishlist and quick view buttons inside the product grid (“tiled” style).

Currently we have simple icons with transparent background, but would like to add a background color with minimal padding around each icon. We managed to achieve this with CSS but the background covers a bigger area than needed (e.g. entire .quick-view area), making the entire button look too big.

Could you suggest how to achieve a similar look: https://ibb.co/v3PSqdh ?

July 18, 2024 at 1:22 pm #584199
Aizaz Imtiaz Awan
Keymaster
Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
```
.wd-product .quick-view {
    background-color: #d9d9eb !important;
    border-radius: 50px;
}
 .archive .wd-action-btn.wd-wishlist-btn > a {
background-color: #e9e9f4 !important;
    border-radius: 50px;
    margin-top: 8px;
}
```
Best Regards.
July 18, 2024 at 1:58 pm #584214

designmono
Participant

Thank you for your prompt response.

We achieved a similar result previously, but the colored background area is too big for our design needs. The entire icon button takes too much space, especially on mobile.

Attaching the screenshot what it looks like with your provided code. Our goal is too make the background area smaller / adjust padding.

Can we achieve a similar result as in the example shared in the first message (https://imgbb.com/v3PSqdh)?

July 18, 2024 at 3:07 pm #584248
Aizaz Imtiaz Awan
Keymaster
Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS. Change the value as per your requirements.
```
.wd-product .quick-view {
    background-color: #d9d9eb !important;
    border-radius: 50px;
    height: 40px;
   width: 40px;
}
 .archive .wd-action-btn.wd-wishlist-btn > a {
background-color: #e9e9f4 !important;
    border-radius: 50px;
    margin-top: 8px;
      height: 40px;
   width: 40px;
}
```
Best Regards.
July 26, 2024 at 2:07 pm #586000

designmono
Participant

Thank you, we have adjusted the code so that it suits our needs. We are using a dark background color, so the loading spinner is almost invisible (the spinner shows up after clicking the icon).

Could you suggest how to change the spinner color? We would like to make it white.

July 26, 2024 at 3:42 pm #586033

Aizaz Imtiaz Awan
Keymaster

Hello,

Sorry to say Can you please share some screenshots where you want to change the color, so I can check and give you a possible solution? Also, share the page URL.

Best Regards.

July 27, 2024 at 5:32 am #586101

designmono
Participant

Yes, please have a look.

When you click on the quick view button (which has an “add to cart” icon in our case), the icon disappears and black loading spinner shows up instead, which is invisible because of the black background. We want to change the color of this loading spinner.

July 29, 2024 at 11:10 am #586373
Aizaz Imtiaz Awan
Keymaster
Hello,

To resolve the issue, you need to:
1. Delete all own code related to buttons on products.
2. Delete all the code we provided in previous responses.
3. Add the following global code in the “Global custom CSS” field:
https://monosnap.com/file/IAOjGZnmlGAuA7GNRuHDyEqY5okXbH.
```
.wd-product .wd-buttons {
	gap: 8px; /* space between buttons */
}

.wd-product .wd-quick-view-icon > a:before {
	content: "\f123"; /* quick view cart icon */
}

.wd-product .wd-action-btn.wd-style-icon > a {
	height: 40px; /* buttons height */
	width: 40px; /* buttons width */
	background-color: #000; /* buttons background */
	border-radius: 50%; /* makes buttons round */
}

.wd-product .wd-action-btn.wd-style-icon > a:before {
	color: #FFF; /* icon color */
	font-size: 22px; /* icon size */
}

.wd-product .wd-action-btn > a:after {
	border-left-color: #FFF; /* loader color */
	font-size: 22px; /* loader size */
}
```
4. Add the following code for tablets or mobile devices in the respective “Custom CSS for tablet” field: https://monosnap.com/file/SNqro0HgcjXb0GNPHzbpYNNXdRtHgq and the “Custom CSS for mobile” field: https://monosnap.com/file/AAigBDzSicOkjcWqJVUb8F38ubwwUu if you need to change any values on mobile devices.
```
.wd-product .quick-view {
	display: inline-flex; /* show quick view button on mobile */
}

.wd-product .wd-action-btn.wd-style-icon > a {
	height: 30px; /* buttons height on mobile */
	width: 30px; /* buttons width on mobile */
}

.wd-product .wd-action-btn.wd-style-icon > a:before {
	font-size: 18px; /* icon size on mobile */
}

.wd-product .wd-action-btn > a:after {
	font-size: 18px; /* loader size on mobile */
}
```
5. Adjust the values for button size, icon size, and loader size as needed according to your preferences. The entire code has been commented on for this purpose.

Best Regards.
August 1, 2024 at 12:56 pm #587304

designmono
Participant

Thank you, really appreciate your help!

We just replaced display: inline-flex with display: block for .wd-product .quick-view (otherwise the quick view icon didn’t show up).

The topic can be closed.

August 1, 2024 at 1:40 pm #587316

Aizaz Imtiaz Awan
Keymaster

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