Problem with add to cart button an Add to wishlist button.

peaknest · May 21

I have e a problem in product page in smartphone visualization, there are problem with add to cart button in different products, as you can see the lenght is different respect Applepay or GPay button ...

In addition if there is the possibility to add more quantity of same product in cart, the add to cart button have another dimension .....

It could be better that the add to cart button will be under selection quantity.

And what about the button add to wishlist?

Phil · May 21

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

peaknest · May 21

Hi,

the link in https://altriastri.com

Phil · May 22

Please go to Betheme -> Theme options -> Shop -> Single product, enable Cart button extra options, and check if the display is better:

Best regards

peaknest · May 22

Hi,

is better but not pefect, as you can see in this picture if there is size option and quantity option the button add to cart is smaller and the text is not beautifoul (because the frame size is smaller) this is visualization with Samsung S21 Ultra

If I see the page with iPhone 13 the visualization is different and not good, the frame is more smaller and test is cutted.

Besides the space from quantity option and add to cart is 0 and space from add to cart and GPay is bigger.

Thank you.

Phil · May 22

To add space below quantity use this CSS code:

.single-product .cart .quantity{
 margin-bottom: 15px!important;
}

There is a space below the button because add wishlist button appears there, and as it is white it blends with the background:

I changed its styles with this:

.single-product .cart .mfn-wish-button svg .path{
 stroke: #000!important;
}
.single-product .cart .mfn-wish-button.loved svg .path{
 fill: #000!important;
}

Try also the following CSS code for the squished button:

.single-product .variations_form .woocommerce-variation-add-to-cart{
 display: flex!important;
 flex-wrap: wrap;
}

This button does not come from Betheme but from a plugin:

You should contact the plugin author regarding this.

Best regards

peaknest · May 22

Thank you, regaring this code

.single-product .cart .mfn-wish-button svg .path{
stroke: #000!important;
}
.single-product .cart .mfn-wish-button.loved svg .path{
fill: #000!important;
}

Can you insert the wishlist icons on the right of price?

And it could be possible insert space from big image and other products images?

Phil · May 23

1) No, the wishlist icon cannot be moved there.

2) You can create a space between the main image and thumbnails in Betheme -> Theme options -> Shop -> Single product:

Best regards

peaknest · May 23

Hello,

I try to insert different value 2px, 10px an 30px but there isn't space froma main and thumbnales image!

Phil · May 23

It might be due to the fact that you have an external plugin for the product image.

Try this CSS for that:

.single-product .woo-variation-gallery-slider-wrapper{
 margin-bottom: 20px!important;
}

Best regards

Problem with add to cart button an Add to wishlist button.

Comments