Support » Plugin: WooCommerce » Product Image Alignment Issues

  • Resolved mbell31

    (@mbell31)


    Hello,

    Thanks for viewing.

    For some reason my product images do not display properly in the shop. As you can see here: PureBold

    Instead of displaying 3 images per line, it drops down a row after just 1 product.

    No matter what adjustments I make in the image size options, it stays this way.

    Any idea on how to fix this and have it properly display 3 images per line?

    Thank you in advance.

    -Mike

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • 
    ### WordPress Environment ###
    
    Home URL: https://purebold.com
    Site URL: https://purebold.com
    WC Version: 3.3.5
    Log Directory Writable: ✔
    WP Version: 4.9.5
    WP Multisite: –
    WP Memory Limit: 768 MB
    WP Debug Mode: –
    WP Cron: ✔
    Language: en_US
    
    ### Server Environment ###
    
    Server Info: Apache
    PHP Version: 7.0.29
    PHP Post Max Size: 128 MB
    PHP Time Limit: 120
    PHP Max Input Vars: 3000
    cURL Version: 7.53.0
    OpenSSL/1.0.2k
    
    SUHOSIN Installed: –
    MySQL Version: 5.6.36
    Max Upload Size: 128 MB
    Default Timezone is UTC: ✔
    fsockopen/cURL: ✔
    SoapClient: ✔
    DOMDocument: ✔
    GZip: ✔
    Multibyte String: ✔
    Remote Post: ✔
    Remote Get: ✔
    
    ### Database ###
    
    WC Database Version: 3.3.5
    WC Database Prefix: wp_
    MaxMind GeoIP Database: ✔
    Total Database Size: 13.62MB
    Database Data Size: 8.10MB
    Database Index Size: 5.52MB
    wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB
    wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB
    wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB
    wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.05MB
    wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB
    wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB
    wp_woocommerce_tax_rates: Data: 0.22MB + Index: 0.31MB
    wp_woocommerce_tax_rate_locations: Data: 0.30MB + Index: 0.36MB
    wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB
    wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB
    wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB
    wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB
    wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB
    wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB
    wp_commentmeta: Data: 0.02MB + Index: 0.03MB
    wp_comments: Data: 0.02MB + Index: 0.09MB
    wp_et_bloom_stats: Data: 0.02MB + Index: 0.00MB
    wp_links: Data: 0.02MB + Index: 0.02MB
    wp_options: Data: 4.03MB + Index: 1.03MB
    wp_postmeta: Data: 1.52MB + Index: 3.02MB
    wp_posts: Data: 1.47MB + Index: 0.13MB
    wp_termmeta: Data: 0.02MB + Index: 0.03MB
    wp_terms: Data: 0.02MB + Index: 0.03MB
    wp_term_relationships: Data: 0.06MB + Index: 0.02MB
    wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB
    wp_usermeta: Data: 0.02MB + Index: 0.03MB
    wp_users: Data: 0.02MB + Index: 0.05MB
    wp_wc_download_log: Data: 0.02MB + Index: 0.03MB
    wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB
    wp_yoast_seo_links: Data: 0.02MB + Index: 0.02MB
    wp_yoast_seo_meta: Data: 0.02MB + Index: 0.00MB
    
    ### Post Type Counts ###
    
    attachment: 77
    custom_css: 1
    customize_changeset: 20
    jetpack_migration: 2
    jp_img_sitemap: 2
    jp_sitemap: 2
    jp_sitemap_master: 2
    nav_menu_item: 18
    page: 11
    post: 8
    product: 27
    product_variation: 362
    revision: 112
    shop_coupon: 2
    shop_order: 5
    
    ### Security ###
    
    Secure connection (HTTPS): ✔
    Hide errors from visitors: ✔
    
    ### Active Plugins (13) ###
    
    Akismet Anti-Spam: by Automattic – 4.0.3
    Bloom: by Elegant Themes – 1.2.25
    Divi Builder: by Elegant Themes – 2.2
    Improved Variable Product Attributes for WooCommerce: by Mihajlovic Nenad – 4.0.6 – Not tested with the active version of WooCommerce
    Instagram Feed: by Smash Balloon – 1.8.2
    Jetpack by WordPress.com: by Automattic – 6.0
    MailChimp for WordPress: by ibericode – 4.2.1
    Regenerate Thumbnails: by Alex Mills (Viper007Bond) – 3.0.2
    SG Optimizer: by SiteGround – 4.0.5
    WooCommerce PayPal Express Checkout Gateway: by WooCommerce – 1.5.3
    WooCommerce Stripe Gateway: by WooCommerce – 4.1.2
    WooCommerce: by Automattic – 3.3.5
    Yoast SEO: by Team Yoast – 7.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: #7 - /shop/
    Cart: #8 - /cart/
    Checkout: #9 - /checkout/
    My account: #10 - /my-account/
    Terms and conditions: ❌ Page not set
    
    ### Theme ###
    
    Name: Divi
    Version: 3.2
    Author URL: http://www.elegantthemes.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: ✔
    
    ### Templates ###
    
    Overrides: –
    

    Hi, mbell31! Use some CSS to display your product in three images on per lines.

    
    ul.products {
    display: flex;
    flex-wrap: wrap;
    }
    
    @media (min-width: 981px) {
    .et_full_width_page.woocommerce-page ul.products li.product:nth-child(4n) {
    margin-right: 0;
    }
    }
    
    

    You can add it by going to Appearance -> Editor -> style.css and paste it to your file.

    • This reply was modified 1 year, 3 months ago by  Long Nguyen.

    That works and looks better. Thanks @longnguyen

    The only thing that’s strange now is that some of the images are sticking together instead of having spacing.

    Men’s PureBold

    Alignment Issues

    Try again with this code

    
    @media (min-width: 981px) {
        .et_full_width_page.woocommerce-page ul.products li.product:nth-child(4n) {
            margin: 0 3.8% 2.992em 0;
        }
    }
    

    There is some problem when override CSS of WooCommerce, I’ve been stuck with this.

    OK, after replacing the code and check again, tell me if you have any problem with displaying your product.

    • This reply was modified 1 year, 3 months ago by  Long Nguyen.
    • This reply was modified 1 year, 3 months ago by  Long Nguyen.

    That appears to have fixed it. Thank you so much! @longnguyen

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Product Image Alignment Issues’ is closed to new replies.