Button shape

Dear Madam, Sir,

I’m contacting you regarding the button shape.

Indeed, in my main header, I added the gift button element and added some CSS code, but I can’t get the shape to be circular and the hover background color to be the same as the wishlist and compare icons. I added this CSS code.

.round-shape {
width: 40px;
height: 40px;
background-color: #b4ffff;
hover background-color: #ff3300;
border-radius: 50%;
}

I’m sending you the screenshot and thank you for your answer.

Attachments:

You must be logged in to view attached files.

Hi Feruz,

Thanks for reaching to us.

Please provide URL of the mentioned page, so I can take a closer look.

Regards,

Hello Pham,

Thank you for your answer.

The page URL is https://dev.shopiprice.com

Thank you for your reply.

Hi Feruz,

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Thanks for your patience.

Regards,

[Feruz]

Hello Pham,

Thank you for your support.

Ok, I’ll send you the username and password.

Then, at the same time could you make the icon size and font on my account like the wishlist, compare size please?

I’ll send you the screenshot.

Thank you for your reply.

• This reply was modified 1 day, 17 hours ago by Feruz.

Attachments:

You must be logged in to view attached files.

Hi Feruz,

1. Gift button

– Add custom class to the button, for e.g: gift-button https://ibb.co/7dTGnBhx

– Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.gift-button.btn-size-extra-small{
    height: 42px;
    width: 42px;
    background-color: rgba(180, 255, 255, 1);
    padding: 0;
}

.gift-button.btn-size-extra-small:hover{
    background-color: rgba(255, 51, 0, 1)
}

.gift-button.btn-size-extra-small span{ 
    width: 36px;
    height: 36px;
    border-radius: 50%;
    line-height: 36px;
    background-color: rgba(180, 255, 255, 1);
    display: block;
}

2. My Account icon

.whb-top-bar .wd-tools-element span.wd-tools-icon:before,
.whb-top-bar .wd-tools-element span.wd-tools-text {
    font-size: 20px;
}

div.whb-top-bar .wd-tools-element:is(.wd-design-6,.wd-design-7):not(.wd-with-wrap) .wd-tools-icon {
    width: 36px;
    height: 36px;
}

Regards,

Hello Pham,

Great. The problem has been resolved. Thank you very much for your support. You can close this ticket.

Having a nice day.

Kind regards,
Feruz.

Hi Feruz,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,

[Author]

Posts