When we hover over the Buy Button with the mouse

[Luke Nielsen]

Hello When we hover over the Buy Button with the mouse, the basket icon appears. How can I delete or change this icon?

Only the cart appears on the mobile screen. i want to change this

• This topic was modified 1 year, 7 months ago by Luke Nielsen.

Hello,

I see that you have another product style that doesn’t have a cart icon, please clarify where you see such a button or attach a screenshot for a better understanding.

https://gyazo.com/604de25d5114d70ec3f38870b0ee0340

I await your response.

Kind Regards

Hello.

excuse.

on our home page we would like to use the buy button on the entire home page and the buy button, regardless of whether the product has a variation or not, when the customer clicks he will be directed to the product page.

Attachments:

You must be logged in to view attached files.

Hello,

In this case, you need to turn off the “Quick Shop” for variable products via Theme Settings -> Shop. As a result, by clicking on the “Select options” button you will be redirected to the product page in any case.

https://prnt.sc/9J-8GQSifkeG

I’d be happy to assist if you have any other questions or concerns.

Kind Regards

hello, I did as you said, on the computer it was fine, on the cell phone it shows the icon with affection, is it possible to leave the name in fez of the icon no molile?

Attachments:

You must be logged in to view attached files.

Hello,

In order to remove the icon and return the text, enter the below code into the “Custom CSS for mobile” area in Theme Settings -> Custom CSS.

.product-grid-item .wd-add-btn-replace .add-to-cart-loop:before {
    content: " ";
}

.product-grid-item .wd-add-btn-replace .add-to-cart-loop:hover span {
    transform: unset;
}

.product-grid-item .wd-add-btn-replace .add-to-cart-loop span {
    font-size: 13px;
}

https://gyazo.com/f249f23b50e25db265b0461ceb1a7e3e

Kind Regards

Thanks!
solved

you don’t happen to have a code like this to solve the topic:
https://xtemos.com/forums/topic/variations-5/

Hello,

The below code will help you to add the border to the swatches. Enter it into the “Global Custom CSS” area in Theme Settings -> Custom CSS.

.wd-swatch:after {
	display: none;
}

.wd-swatch.swatch-with-bg {
	border: 2px solid #FFF;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.wd-swatch.swatch-with-bg.active-swatch {
	box-shadow: 0 0 0 1px #000;
}

.wd-swatch.swatch-with-bg:not(.active-swatch):hover {
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}

.wd-swatch:not(.swatch-with-bg) {
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 3px;
	padding: 4px;
}
.wd-swatch:not(.swatch-with-bg).active-swatch {
	border-color: #000;
}

.wd-swatch:not(.swatch-with-bg):not(.active-swatch):hover {
	border-color: rgba(0,0,0,0.4);
}

Kind Regards

Hello good day!

I added the code informed above, but it sometimes has no information on the button as shown in the attached image.

would there be something to fix to fnot get this bug?

Attachments:

You must be logged in to view attached files.

Good Morning!

I added the code informed and in the sizes part it shows a dropdown tab instead of buttons.

How do I get the buttons to size again?

Attachments:

You must be logged in to view attached files.

Hello,

1. I have checked the issue with the buttons on my device and there they look well.

https://prnt.sc/26fl89hYEwx0

Please let me know if you sorted this out.

2. The buttons appear when each attribute has the “Enable swatch” option enabled in Products -> Attributes.

https://prnt.sc/6GZovkBKSbGu

Kind Regards

Hello!
1. Buy name still not showing.
in the first access it shows, add the product to the cart and see the related products that the button is only with the color and does not display the name, then go back to inico and the same thing happens, it only shows the button without any sentence.

could you check please?

Attachments:

You must be logged in to view attached files.

Hello,

Could you please record a short video on how to reproduce the issue with the button on your website? We still see the button correctly from our end.

Kind Regards

Hello,

https://drive.google.com/file/d/1ylmqI0MvSPbUGzbbGxFGSVVMS9HwAnJZ/view?usp=sharing

Hello,

Please, remove the following custom CSS code

.product-grid-item .wd-add-btn-replace .add-to-cart-loop:before {
    content: " ";
}

.product-grid-item .wd-add-btn-replace .add-to-cart-loop:hover span {
    transform: unset;
}

.product-grid-item .wd-add-btn-replace .add-to-cart-loop span {
    font-size: 13px;
}

and put this one to the Global Custom CSS field

@media (max-width: 768.98px) {
	.product-grid-item.wd-hover-fw-button .wd-add-btn-replace .add-to-cart-loop:hover span {
		transform: none;
	}
	
	.product-grid-item.wd-hover-fw-button .wd-add-btn-replace .add-to-cart-loop span {
		font-size: 13px;
	}
	
	.product-grid-item.wd-hover-fw-button .wd-add-btn-replace .add-to-cart-loop:before {
		display: none;
	}
}

Kind Regards

[Author]

Posts