ThemeNectar

Comments

16
HelloPixely started the conversation
October 25, 2021 at 1:05am
Hi,
I see an issue in a small screens in the Related products section.
The Add To Basket & Quick VIew don't display properly as there isn't enough space. How can I keep Add To Basket button only and hide Quick VIew.
Please see attachment as reference.
Many thanks,
Amine
1,878
Judith replied
October 25, 2021 at 2:43pm
Hi There,

Please send in your logins as your website is protected for access.

Thanks.
16
HelloPixely replied
October 25, 2021 at 5:27pm
Hi Judith,

Privacy Mode
Username: mysites
Password: common-carriage

Thanks,

Amine
2,960
Andrew replied
October 26, 2021 at 6:38am
Hello Amine,
Just to confirm, do you need us to remove the Quick view button from the related products section or across the whole website?
Regards,
16
HelloPixely replied
October 26, 2021 at 11:29am
Hi Andrew,

Thanks for your reply.

Remove Quick view button across the whole website, as you can see when the screen is too small there isn't enough space to keep both buttons.
Also, as I disabled Product Hover Effect On Mobile, how can I keep 'Add to Basket' button always visible on mobile without tapping on the image?

Thanks,

Amine
2,960
Andrew replied
October 26, 2021 at 1:54pm
Hello Amine,
You can remove the quick view functionality at Salient options panel > WooCommerce
Use the following CSS to show the add to cart button on mobile.
@media only screen and (max-width: 999px){ body .products li.product.minimal .product-wrap .product-image-wrap .product-add-to-cart a:first-child { opacity:1; } }
Regards,
16
HelloPixely replied
October 27, 2021 at 7:12am
Hi Andrew,
The Quick View is great, so let's keep Enable WooCommerce Product Quick View turned on.
1. The issue however is in the 'Related products' carousel, as you can see from the screenshot attached below. When the screen is small there isn't enough space to fit both buttons 'Add To Basket & Quick View' so I would like in this scenario to hide 'Quick View' and keep 'Add To Basket' only at the breaking point.
2. On mobile keep 'Add To Basket' always visible, the CSS code seems doesn't work.
Many thanks,
Amine

2,960

Andrew replied

October 28, 2021 at 5:35am

Hi again,

1. Use the following.

@media only screen and (max-width: 1300px){
    body .products li.product.minimal .product-wrap .product-image-wrap .product-add-to-cart a:last-child {
        display: none;
    }
}

2. Use this instead.

@media only screen and (max-width: 999px){
    .products[data-rm-m-hover="1"] li.product.minimal .product-add-to-cart, .products[data-rm-m-hover="1"] li.product.minimal .background-color-expand {
        display: flex !important;
    }
    body .products li.product.minimal .product-wrap .product-image-wrap .product-add-to-cart a:first-child {
        opacity: 1;
    }       
}

Regards,

16
HelloPixely replied
October 28, 2021 at 8:46am
Hi Andrew,

That's excellent.
Thank you.
Amine
1 Like