Support » Plugin: WooCommerce » Flexslider cutting off image on load

  • Resolved Lionell

    (@underwaterpeoples)



    HI

    My issue is with the flexslider on my single product page using WooCommerce plugin. You’ll see on load that my first image is showing a little bit of the next image in the gallery. But when I move the window even just a tiny bit it fixes itself. I’m trying to get this to work with the custom css i’ve placed.

    I’ve tried adding window.load and smoothHeight: false in my script. Which is actually still on there. Here is the code on my script for flexslider:

      // Flexslider
    $(window).load(function() {
            $(".flexslider").flexslider({
              directionNav: false,
              direction: "horizontal", 
              animation: "slide",
              slideshow: true,
              controlNav: false,
              slideshowSpeed: 3000,
    	  smoothHeight: false,
              controlsContainer: ".flex-container",
              itemMargin: 0    
              });
    });

    I’ve got my status report here:

    
    ### WordPress Environment ###
    
    Home URL: http://box5475.temp.domains/~eightyma
    Site URL: http://box5475.temp.domains/~eightyma
    WC Version: 3.3.4
    Log Directory Writable: ✔
    WP Version: 4.9.5
    WP Multisite: –
    WP Memory Limit: 256 MB
    WP Debug Mode: –
    WP Cron: ✔
    Language: en_US
    
    ### Server Environment ###
    
    Server Info: Apache
    PHP Version: 7.0.29
    PHP Post Max Size: 64 MB
    PHP Time Limit: 0
    PHP Max Input Vars: 1000
    cURL Version: 7.59.0
    OpenSSL/1.0.2o
    
    SUHOSIN Installed: –
    MySQL Version: 5.6.32
    Max Upload Size: 64 MB
    Default Timezone is UTC: ✔
    fsockopen/cURL: ✔
    SoapClient: ✔
    DOMDocument: ✔
    GZip: ✔
    Multibyte String: ✔
    Remote Post: ✔
    Remote Get: ✔
    
    ### Database ###
    
    WC Database Version: 3.3.4
    WC Database Prefix: 60a_
    MaxMind GeoIP Database: ❌ The MaxMind GeoIP Database does not exist - Geolocation will not function. You can download and install it manually from http://dev.maxmind.com/geoip/legacy/geolite/ to the path: . Scroll down to "Downloads" and download the "Binary / gzip" file next to "GeoLite Country". Please remember to uncompress GeoIP.dat.gz and upload the GeoIP.dat file only.
    Total Database Size: 3.20MB
    Database Data Size: 2.90MB
    Database Index Size: 0.30MB
    60a_woocommerce_sessions: Data: 0.01MB + Index: 0.00MB
    60a_woocommerce_api_keys: Data: 0.00MB + Index: 0.00MB
    60a_woocommerce_attribute_taxonomies: Data: 0.00MB + Index: 0.00MB
    60a_woocommerce_downloadable_product_permissions: Data: 0.00MB + Index: 0.00MB
    60a_woocommerce_order_items: Data: 0.00MB + Index: 0.00MB
    60a_woocommerce_order_itemmeta: Data: 0.00MB + Index: 0.00MB
    60a_woocommerce_tax_rates: Data: 0.00MB + Index: 0.00MB
    60a_woocommerce_tax_rate_locations: Data: 0.00MB + Index: 0.00MB
    60a_woocommerce_shipping_zones: Data: 0.00MB + Index: 0.00MB
    60a_woocommerce_shipping_zone_locations: Data: 0.00MB + Index: 0.00MB
    60a_woocommerce_shipping_zone_methods: Data: 0.00MB + Index: 0.00MB
    60a_woocommerce_payment_tokens: Data: 0.00MB + Index: 0.00MB
    60a_woocommerce_payment_tokenmeta: Data: 0.00MB + Index: 0.00MB
    60a_woocommerce_log: Data: 0.00MB + Index: 0.00MB
    60a_commentmeta: Data: 0.00MB + Index: 0.01MB
    60a_comments: Data: 0.00MB + Index: 0.01MB
    60a_links: Data: 0.00MB + Index: 0.00MB
    60a_options: Data: 2.44MB + Index: 0.08MB
    60a_postmeta: Data: 0.35MB + Index: 0.13MB
    60a_posts: Data: 0.09MB + Index: 0.03MB
    60a_termmeta: Data: 0.00MB + Index: 0.01MB
    60a_terms: Data: 0.00MB + Index: 0.01MB
    60a_term_relationships: Data: 0.00MB + Index: 0.00MB
    60a_term_taxonomy: Data: 0.00MB + Index: 0.00MB
    60a_usermeta: Data: 0.01MB + Index: 0.01MB
    60a_users: Data: 0.00MB + Index: 0.01MB
    60a_wc_download_log: Data: 0.00MB + Index: 0.00MB
    60a_wc_webhooks: Data: 0.00MB + Index: 0.00MB
    
    ### Post Type Counts ###
    
    acf-field: 49
    acf-field-group: 12
    attachment: 30
    jetpack_migration: 2
    jp_img_sitemap: 1
    jp_sitemap: 1
    jp_sitemap_master: 1
    nav_menu_item: 25
    page: 14
    post: 20
    product: 4
    revision: 55
    wpforms: 1
    
    ### Security ###
    
    Secure connection (HTTPS): ❌Your store is not using HTTPS. Learn more about HTTPS and SSL Certificates.
    Hide errors from visitors: ✔
    
    ### Active Plugins (14) ###
    
    Advanced Custom Fields: Gallery Field: by Elliot Condon – 1.1.1
    Advanced Custom Fields: Repeater Field: by Elliot Condon – 1.1.1
    Advanced Custom Fields PRO: by Elliot Condon – 5.6.9
    Advanced Custom Fields: by Elliot Condon – 4.4.12
    All-in-One WP Migration: by ServMask – 6.67
    Jetpack by WordPress.com: by Automattic – 6.0
    Menu Image: by Alex Davyskiba aka Zviryatko – 2.7.0
    MOJO Marketplace: by Mike Hansen – 1.3.3
    WooCommerce PayPal Express Checkout Gateway: by WooCommerce – 1.5.3
    WooCommerce Stripe Gateway: by WooCommerce – 4.0.7
    WooCommerce Services: by Automattic – 1.12.3
    WooCommerce: by Automattic – 3.3.4 – 3.3.5 is available
    WordPress Importer: by wordpressdotorg – 0.6.4
    WPForms Lite: by WPForms – 1.4.5.3
    
    ### Settings ###
    
    API Enabled: ✔
    Force SSL: –
    Currency: USD ($)
    Currency Position: left
    Thousand Separator: ,
    Decimal Separator: .
    Number of Decimals: 2
    Taxonomies: Product Types: external (external)
    grouped (grouped)
    simple (simple)
    variable (variable)
    
    Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
    exclude-from-search (exclude-from-search)
    featured (featured)
    outofstock (outofstock)
    rated-1 (rated-1)
    rated-2 (rated-2)
    rated-3 (rated-3)
    rated-4 (rated-4)
    rated-5 (rated-5)
    
    ### WC Pages ###
    
    Shop base: #26 - /shop/
    Cart: ❌ Page does not contain the shortcode.
    Checkout: ❌ Page does not contain the shortcode.
    My account: ❌ Page does not contain the shortcode.
    Terms and conditions: ❌ Page not set
    
    ### Theme ###
    
    Name: BlankSlate
    Version: 4.0.4
    Author URL: http://tidythemes.com/
    Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
    WooCommerce Support: ❌ Not declared
    
    ### Templates ###
    
    Overrides: –
    

    Been racking my brain on this. Someone please help. Thanks for your time too.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Andrew

    (@slash1andy)

    Automattic Happiness Engineer

    Typically issues like this may be caused by either a conflict with your theme or with another plugin. How we usually address this type of issue is to have you temporarily switch to a theme we know works, such as Storefront(https://wordpress.org/themes/storefront/) and disable all plugins except for WooCommerce and the plugin in question . If that resolves the issue, then slowly re-enable features until you find the one that’s causing the conflict.

    Lionell

    (@underwaterpeoples)

    Thanks Andrew for responding and for your time.

    So im actually only really using WooCommerce plugin and ACF. Im using the Blankslate theme, which might be the issue. The page is in a custom template page with a custom style sheet.

    Do you know if the Blankslate theme has had issues with the smoothHeight in the past?

    Plugin Support yukikatayama

    (@yukikatayama)

    Automattic Happiness Engineer

    Hi @underwaterpeoples,

    As Blankslate is a third party theme, I do not know much about how that theme works or its compatibility to WooCommerce. If you temporarily changed your theme to Storefront, doe sit help at all?

    If you would prefer not to do testing on your live site, first make a back up of your site, then create a staging site using this plugin WP Staging (https://wordpress.org/plugins/wp-staging/). This creates a copy of your live site where you can make tests without affecting your live site.

    Lionell

    (@underwaterpeoples)

    HI @yukikatayama. Thanks for your response, i really appreciate the help.

    So I’m pretty sure if I try the Storefront theme it would work but my issue is trying to get it to work on my theme now. I’m pretty sure it might just be a CSS issue because I have the slider working somewhere else on the site, this one tho is a autoplay with no thumbnails. Might be a big difference I’m not sure.

    When I remove my custom CSS it seems to not cut off the image but it does show the photo extremely large. Which is why I tried to make it smaller.

    I guess what i really need help with is, what CSS do i have to add/alter to make the images show smaller, like the sizes I have now. Without breaking the slider?

    Plugin Support Hannah S.

    (@fernashes)

    Automattic Happiness Engineer

    As no-one else has responded, I’m going to wrap up this thread for now. If you do need more help, I highly recommend contacting one of the services on our customizations page: https://woocommerce.com/customizations/

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.