Product title and description toggling/sliding above preview image in woocomerce shop on mobile

Support
#1

Im having trouble finding where to disable the slide up toggle on my individual product pages in my shop, when you view a specific item (any item in the shop) on mobile, the title and description box slides up over the preview image after about a second and only slides back down when you scroll down, when you scroll back up to view the image thumbnail it slides up again making it impossible to see the product image. WP support stated it was a JS issue with my theme (X) and I can not find where to disable this slide feature. Is there code I can input somewhere to disable this or at least make the title and description stay fixed below the image on mobile? https://greedkills.co/product/short-sleeve-t-shirt/

#2

Hi Travis,

Thanks for reaching out and sorry to hear you’re having this issue.

But, I couldn’t confirm the issue since it’s behind am under construction page. Would you mind providing the login credentials in the secure note too?

Thanks!

#3

My apologies, the site is now active. Secure note made. The issue persists only on mobile devices, in portrait view, and again the site is
https://greedkills.co/product/short-sleeve-t-shirt/ as well as the other individual product pages.

#4

Hello Travis,

I have logged in and investigated the issue. It turns out that some of the theme’s stack styles were overridden. To resolve this issue, I added a custom css in Appearance > Customizer > Additional CSS:

@media(max-width: 767px){
  .woocommerce div.product .images,
  .woocommerce div.product .entry-summary {
    float: none;
    display:block;
    clear: both;
  }
}

Please check your product pages now.

#5

So the issues seems resolved on the page that i posted the link to but it is still happening on all of the other products, example : https://greedkills.co/product/snapback-hat/ https://greedkills.co/product/iphone-case/ , not sure why your css didnt affect these pages too?

#6

the issue is actually still present on all products, its strange how it is intermittent…the css you provided doesn’t seem to be having any effect? I am using the Css Hero plugin to edit my shop if that helps?

#7

Hi Travis,

Have you tried clearing the browser cache? I checked and the CSS is in effect and those products look similar. Would you mind providing a screenshot?

Thanks!

#8

I have cleared the cache and have made additions to the site since and they are all up to date but this issue is still present on mobile devices… I just can’t figure it out :frowning: here are some screenshots, as you can see the image shows at first, then is taken over by the title/descriptoin/price as it slides up over the image…

#10

#11

Hello Travis,

Thanks for updating in and for sending us the screenshots. This happens because when the page loads, the product slider does not fully load the images. I went ahead and disabled the product slider.

Please check your product page now.

#12

Ok excellent. I would like to ask that you return the page to the way it was before and tell me where and how you performed this change? Now that I’m aware of the cause I would like to find another solution beyond just disabling it. I unfortunately can not just have everything listing below the image like that. Thanks!

#13

Hey Travis,

The WooCommerce product slider and the WooCommerce Product Gallery Zoom is a default feature of WooCommerce. You can only disable it by adding this custom function in your child theme which is what I did.

// Remove product gallery slider and gallery zoom
// =============================================================================
add_action( 'after_setup_theme', 'remove_woo_three_support', 11 ); 
function remove_woo_three_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-slider' );
}
// =============================================================================

I have commented out the first line so that the feature will be back again.
// add_action( 'after_setup_theme', 'remove_woo_three_support', 11 );

#14

Thank you for this, I really appreciate the insight. You guys have been immensely helpful!!

#15

You are most welcome!

#16

I may need to disable this again, i am waiting on support from WP to offer their solution first. thank you for everything I will update soon

#17

You’re welcome! :slight_smile:

#18

So i need this function disabled again, WP is unable to assist, my apologies for the back and forth nature of this issue, but again, your resolution is the best i’ve been able to find and I need to go with it,

#19

Thanks. Have a great day! :slight_smile:

#20

My apologies, I believe you misunderstood. I am asking if you can disable the product gallery slider again for me in my functions.php file like @RueNel did.Thank you.

#21

Hi Travis,

I’ve disabled the product slider again.

Regards!

1 Like