Product Page

Hi shweta,

1. I want to remove the hover effect on the button.

You want to keep add to cart icon always display instead of text?

2 How to reduce the extra spacing between the title, add to cart button, and price?

&

3. I want to increase the gap between underlining the button and character spacing

Please add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS

.product-grid-item .top-information :is(.wd-entities-title,.wd-product-cats,.wd-product-brands-links,.wd-product-sku,.wd-product-stock,.price) {
    margin-block: -0.4em;
}

.product-grid-item.product.wd-hover-info-alt .wd-add-btn > a{
	text-underline-offset: 5px;
}

Regards,

Hi shweta,

I see you added Custom CSS to change background color when hover the button, please check and replace with other color https://prnt.sc/1U2GMLvtRQWk

Regards,

Hi shweta,

Please add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS

.wd-add-btn-replace .add_to_cart_button.add-to-cart-loop:before {
    content: "Add to cart";
		font-family: var(--btn-font-family);
}

Regards,

Hi shweta,

1 & 3. Please add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS

.product-grid-item .top-information .wd-entities-title,
.product-grid-item .top-information .price,
.related-products .wd-buttons.wd-pos-r-t,
.related-products .product.wd-hover-alt .wd-add-btn{
	display: none;
}

.related-products .product-element-top:hover .hover-img {
    opacity: 0;
    transform: none;
}

.related-products .product.wd-hover-alt:not(.wd-variation-active):is(.purchasable,.product-type-grouped):hover .swap-elements {
    transform: translateY(0);
}

2. Please provide me with screenshots for better understanding.

Regards,

Hi shweta,

Please add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS

.product-grid-item.product.wd-hover-info-alt .wd-add-btn-replace a > span {
    display: none;
}

.product-grid-item.product.wd-hover-info-alt .wd-add-btn-replace .add-to-cart-loop:before {
	position: relative;
	margin-left: 0 !important;
    transform: translateY(0) translateZ(0);
	padding: 8px 14px;
}

Regards,

Hi shweta,

It always takes time to load CSS or JS, but I tested your site on Incognite mode and it worked well.

See recorded video for better understanding https://screenpal.com/watch/c0ltjLVHTX4

Regards,