Cart page on mobile totally misaligned

  • Resolved eeevaaa

    (@eeevaaa)


    2 months, 2 weeks ago

    Hi support, I’m so glad you exist! I hope I can find help with my problem.

    I’m currently building my first webshop using WooCommerce with prior experience of building WordPress websites. I’ve set up my shop and everything was growing strong, until I found today my Cart page being totally misaligned, especially on mobile.

    I managed to fix the issue on Desktop by setting the design back to default, however, the problem persists on the mobile version. All content just disappears somewhere to the right, and there’s not even a vertical scroll bar to get access to it.

    I already deactivated all plugins one by one to see if any of them causes the problem, but could not find any solution.

    Here is an image of what it looks like: https://i.postimg.cc/pyN8Zyc1/cart.jpg

    And here’s my system status:

    System Status Report

    ### WordPress Environment ###

    WordPress address (URL): [Redacted]
    Site address (URL): [Redacted]
    WC Version: 9.2.3
    Legacy REST API Package Version: The Legacy REST API plugin is not installed on this site.
    Action Scheduler Version: ? 3.8.1
    Log Directory Writable: ?
    WP Version: 6.6.2
    WP Multisite: –
    WP Memory Limit: 256 MB
    WP Debug Mode: –
    WP Cron: ?
    Language: en_US
    External object cache: –

    ### Server Environment ###

    Server Info: Apache
    PHP Version: 8.3.11
    PHP Post Max Size: 20 MB
    PHP Time Limit: 30
    PHP Max Input Vars: 1000
    cURL Version: 7.61.1
    OpenSSL/1.1.1k

    SUHOSIN Installed: –
    MySQL Version: 10.11.9-MariaDB
    Max Upload Size: 20 MB
    Default Timezone is UTC: ?
    fsockopen/cURL: ?
    SoapClient: ?
    DOMDocument: ?
    GZip: ?
    Multibyte String: ?
    Remote Post: ?
    Remote Get: ?

    ### Database ###

    [REDACTED]

    ### Post Type Counts ###

    attachment: 689
    custom_css: 1
    customize_changeset: 82
    nav_menu_item: 13
    page: 11
    product: 80
    product_variation: 2810
    revision: 63
    wp_global_styles: 2
    wp_navigation: 1

    ### Security ###

    Secure connection (HTTPS): ?
    Hide errors from visitors: ?

    ### Active Plugins (12) ###

    Blocksy Companion: by CreativeThemes – 2.0.66
    Crush.pics Image Optimizer – Image Compression and Optimization: by Space Squirrel Ltd. – 1.8.7
    Facebook for WooCommerce: by Facebook – 3.2.8
    Judge.me Product Reviews for WooCommerce: by Judge.me – 1.3.24
    Klaviyo: by Klaviyo
    Inc. – 3.3.5

    Printify Shipping Method: by Printify – 2.14
    Secure Copy Content Protection: by Copy Content Protection Team – 4.2.4
    Showcase Payment Options (icons): by KNEET – 1.4.0
    WooPayments: by WooCommerce – 8.2.0
    WooCommerce PayPal Payments: by WooCommerce – 2.9.0
    WooCommerce: by Automattic – 9.2.3
    WPC Variation Bulk Editor for WooCommerce: by WPClever – 1.1.8

    ### Inactive Plugins (3) ###

    Goaffpro Affiliate Marketing: by Goaffpro – 2.7.9
    UpsellWP Lite - WooCommerce Upsell, Cross-sell and Order Bumps: by UpsellWP – 2.1.2
    Variation Swatches for WooCommerce: by CartFlows – 1.0.10

    ### Dropin Plugins () ###

    maintenance.php: maintenance.php

    ### Settings ###

    Legacy 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)

    Connected to WooCommerce.com: –
    Enforce Approved Product Download Directories: ?
    HPOS feature enabled: ?
    Order datastore: Automattic\WooCommerce\Internal\DataStores\Orders\OrdersTableDataStore
    HPOS data sync enabled: –

    ### Logging ###

    Enabled: ?
    Handler: Automattic\WooCommerce\Internal\Admin\Logging\LogHandlerFileV2
    Retention period: 30 days
    Level threshold: –
    Log directory size: 10 MB

    ### WC Pages ###

    Shop base: #18 - /
    Cart: #19 - /cart/ -  Contains the [woocommerce_cart] shortcode
    Checkout: #20 - /checkout/ -  Contains the [woocommerce_checkout] shortcode
    My account: #21 - /my-account/
    Terms and conditions: #229 - /terms-of-service/

    ### Theme ###

    Name: Blocksy
    Version: 2.0.66
    Author URL: https://creativethemes.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: blocksy/woocommerce/cart/cart.php
    blocksy/woocommerce/cart/mini-cart.php
    blocksy/woocommerce/content-widget-product.php
    blocksy/woocommerce/content-widget-reviews.php
    blocksy/woocommerce/myaccount/my-account.php
    blocksy/woocommerce/product-searchform.php
    blocksy/woocommerce/single-product/tabs/tabs.php


    ### WooPayments ###

    Version: 8.2.0
    Connected to WPCOM: Yes
    WPCOM Blog ID: 236605435
    Account ID: acct_1PueOvFjB9mg7Z2w
    Payment Gateway: Enabled
    Test Mode: Disabled
    Enabled APMs: card,klarna
    WooPay: Not eligible
    Apple Pay / Google Pay: Enabled (product,cart,checkout)
    Fraud Protection Level: basic
    Multi-currency: Enabled
    Auth and Capture: Enabled
    Documents: Enabled
    Logging: Disabled

    ### WooCommerce PayPal Payments ###

    Onboarded: ?
    Shop country code: DE
    WooCommerce currency supported: ?
    Advanced Card Processing available in country: ?
    Pay Later messaging available in country: ?
    Webhook status: –
    PayPal Vault enabled: –
    ACDC Vault enabled: –
    Logging enabled: –
    Reference Transactions: –
    Used PayPal Checkout plugin: –
    Subscriptions Mode: Disabled

    ### Admin ###

    Enabled Features: activity-panels
    analytics
    product-block-editor
    coupons
    core-profiler
    customize-store
    customer-effort-score-tracks
    import-products-task
    experimental-fashion-sample-products
    shipping-smart-defaults
    shipping-setting-tour
    homescreen
    marketing
    mobile-app-banner
    navigation
    onboarding
    onboarding-tasks
    pattern-toolkit-full-composability
    product-custom-fields
    remote-inbox-notifications
    remote-free-extensions
    payment-gateway-suggestions
    printful
    shipping-label-banner
    subscriptions
    store-alerts
    transient-notices
    woo-mobile-welcome
    wc-pay-promotion
    wc-pay-welcome-page
    launch-your-store

    Disabled Features: experimental-blocks
    minified-js
    product-pre-publish-modal
    settings
    async-product-editor-category-field
    product-editor-template-system

    Daily Cron: ? Next scheduled: 2024-09-11 23:51:29 -05:00
    Options: ?
    Notes: 64
    Onboarding: completed

    ### Action Scheduler ###

    Complete: 8,987
    Oldest: 2024-08-14 18:53:10 -0500
    Newest: 2024-09-11 13:40:06 -0500

    Failed: 3
    Oldest: 2024-08-24 12:49:16 -0500
    Newest: 2024-09-02 17:25:19 -0500

    Pending: 1
    Oldest: 2024-09-12 13:09:50 -0500
    Newest: 2024-09-12 13:09:50 -0500


    ### Status report information ###

    Generated at: 2024-09-11 13:41:45 -05:00

    Please let meknow if you need any additional info from me.
    Thank you so much for your help!

    Kind regards
    Eva

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support ckadenge (woo-hc)

    (@ckadenge)

    Hi @eeevaaa,

    Thank you for reaching out.

    I understand you’re facing an alignment issue with your cart on mobile.

    WooCommerce is built to be responsive, however, certain themes or custom CSS can sometimes interfere with this. Therefore, as you’ve already checked the plugins, the next step would be to switch to a default WordPress theme like Twenty Twenty-Four to see if the issue persists.

    If the problem is resolved, then the issue is likely with your current theme.

    Please try this and let us know how it goes.

    Thread Starter eeevaaa

    (@eeevaaa)

    Hi @ckadenge ,

    I switched to another theme and the problem wasn’t present anymore. However, I now have to reconfigure the whole rest of my shop. Too bad, I would have preferred an easier solution.

    Anyways, thank you very much for your assistance.

    Plugin Support Rajesh K. (woo-hc)

    (@rajeshml)

    Hello @eeevaaa,

    Thank you for confirming with us that switching the theme has resolved the issue for you.

    I would suggest reaching out to theme support regarding this issue before reconfiguring your shop design with the new theme. If they can offer a solution, you can continue to use the same theme. You can share our findings from here with them as well.

    I hope this information helps!

    Thanks!

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