Background of Wishlist & Quick View buttons

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 ?

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.

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)?

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.

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.

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.

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.

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.

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.

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