Add to cart issue with bundle products

Hi, i got some help the other day here: https://xtemos.com/forums/topic/add-to-cart-button-placing-on-mobile-single-product-page/

We just found one issue with the code, where add to cart for bundle products looks weird and is moved to a new column: http://prntscr.com/1rhk8mx

This code was inserted:

form.cart,
.woocommerce-variation-add-to-cart {
  display: flex;
}
 form.cart > button,
.woocommerce-variation-add-to-cart > button {
  flex-grow: 1;
}

Hello,

Sorry, my mistake, please try adding the following Custom CSS in the Mobile Custom CSS area under Theme Settings >> Custom CSS and remove the CSS from the Global Custom CSS section.

Best Regards.

This fixed the issue on the desktop, but the button looks very similar on the mobile view of bundles. Basically the issue is only on the mobile site now-

Hello,

The button is showing fine on both desktop and mobile devices. Please see the screenshot: https://ibb.co/s3YynmR

Best Regards

Sorry for the late reply. Been quite busy with other things.

Yeah, it does work on the mobile single product page, but not for bundle products on mobile:
https://prnt.sc/1w2q4hg

Hello,

Please provide the URL of a bundled product to check it myself and help you out accordingly.

Best Regards.

Inserted a direct link in private content. Please look at the mobile version of the link.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.product-type-yith_bundle form.cart,
.woocommerce-variation-add-to-cart {
display: block;
}

.product-type-yith_bundle form.cart > button,
.woocommerce-variation-add-to-cart > button {
  display: inline-block;
  position: absolute;
}

Best Regards.

Worked great, I appreciate it. 🙂

A minor issue is that the button goes over the right edge of the screen on my phone. The picture is in private content

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.product-type-yith_bundle .product-image-summary .single_add_to_cart_button {
    width: 68%;
}

Best Regards.

Hi Aizaz,

That worked well on bundles and normal products. On variant products it shows wrongly on mobile view, I pasted example link in private.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.product-type-variable form.cart {
    display: block;
}

Best Regards

Thanks, Aizaz that worked.

Now I got an issue with the gallery images on the desktop. The screenshot is in a private area and all the latest CSS changes the past month is there as well.

Somehow the gallery only shows correctly on the desktop view if I’m logged in?

Custom CSS changes on the desktop the past weeks:

.woocommerce div.product .woocommerce-tabs .panel h2 {
    display: none;
}

.woocommerce-info { 
    background-color: #ffffff !important;
	  color:#000000;
}

.tabs-location-summary .tabs-layout-accordion .wd-accordion-title {
    font-size: 17px;
    font-weight: bold;
}

Hello,

You are Most Welcome.

Please deactivate all the third party plugins, activate the parent theme then clear cache and check back.

If the issue still occurs then leave all the third party plugins deactivated and provide the login details of the website.

Best Regards

Hey Aizaz,

I found the issue. It has to do with WP rocket delay javascript execution. Do you have any ideas how to exclude the gallery on desktop? I have these excluded:

/smart-slider-3/(.*).js
/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
combine.min.js
waypoints.min.js
/jquery-migrate(.min)?.js
/woodmart/js/scripts/global/helpers.min.js
/woodmart/js/scripts/wc/productImages.min.js
/wp-includes/js/jquery/jquery-migrate.min.js
/jquery-
jQuery
/jquery-migrate.min.js
_N2
wooptpm.js
google-analytics.com/analytics.js
ga\( '
ga\('
/gtag/js
gtag\(
/gtm.js
/judgeme_widget_v(.*).js
jdgmSettings
woodmart/js/libs/owl.carousel.js
woodmart/js/libs/owl.carousel.min.js
woodmart/js/scripts/global/owlCarouselInit.js
woodmart/js/scripts/global/owlCarouselInit.min.js
mobileNavigation
helpers
headerBuilder
menuOffsets
clickOnScrollButton
analytics
awAddGift.js
analytics.js
gtag.js
optimize.js
main.js
tp.widget.bootstrap.js

As we can see, it is currently turned off and works correctly https://gyazo.com/65440fc785f95ebde979011139ad53e9

I turned it off because it’s single dat sale and not having the Gallery on desktop hurts the conversion rate. Do you want me to turn it on? It’s not working with the JavaScript delay execution turned on

Yes, enable this, please. Also, disable Combine JS option in Theme Settings -> Performance -> JS.

Kind Regards

Hi Artem,

I enabled it again and the combine js option was already disabled. 🙂

JavaScript delay execution turned on
Combine javascript files is off

Strange, but it is still turned on https://gyazo.com/62efc1f0da1f5d83750dd9ab0658bef2
Please, disable extra plugins temporarily and send us your admin access so we can check what is wrong.

Weird its done and i have attached login information in private content area.

I have tested it with no plugins and im certain, that it has to do with wp rocket delay javascript execution.

Thanks for the help!

Try to add the following file to the exception list in WP Rocket now productImagesGallery.

productImagesGallery did not work sadly

Please, check how it works now.

Works great! Thanks for the help 🙂

We are glad that you sorted it out. Let me know if you need any further assistance.

Have a nice day!

[Author]

Posts