Product page not fully responsive

  • Resolved ldwd

    (@ldwd)


    1 year, 6 months ago

    The product page is not fully responsive as shown in the screenshot below. The image is too wide and the attribute label is a mess. Also, the Add to Cart button is below the amount field instead of next to it.

    I noticed this on WordPress 6.6.2 with WooCommerce 9.3.3. I then reviewed this in a clean installation updated to WordPress 6.7 and Woocommerce 9.4.1 with the Twenty Twenty-Four theme and no other plugins activated, and it occured there too (screenshot above is from this installation).

    Downgrading to Woocommerce 9.0.0 gave the same issues. Randomly picking version 6.9.0 gave me the old, correct(ish) result.

    Any help on this?

    EDIT: reviewed on mobile (Samsung browser) and desktop (Firefox and Chrome). Screenshots are from Firefox.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Reynier (a11n)

    (@reynierc)

    1 year, 6 months ago

    Hi @ldwd ,

    Thanks for reaching out and for the details + screenshots. I see the trouble with the product page layout on different versions of WooCommerce and WordPress.

    To start, could you try clearing your cache (both site and browser)? Since you’ve tested across browsers and devices, clearing the cache can sometimes solve visual issues caused by outdated data.

    Next, could you confirm which main theme you’re using? While you mentioned the Twenty Twenty-Four theme, knowing the primary theme helps us get a clearer picture.

    Also, if possible, please share your site URL. I’d like to take a look and get a better sense of what might be happening.

    Looking forward to getting this sorted out.

    Thread Starter ldwd

    (@ldwd)

    1 year, 6 months ago

    Hi @reynierc,

    Thanks for your reply!
    I cleared the cache and it still happened.
    The primary theme is Flash (free version).

    I can not share the url but I can share an instaWP sandbox: https://futuristic-jellyfish-4f6371.instawp.xyz/?upass=bXkgYXdlc29tZSBzdHJpbmczNTA2OTg0Mzky

    Then click on this link: https://futuristic-jellyfish-4f6371.instawp.xyz/product/test/ to view the product page.

    Both Twenty Twenty-Four and Flash are installed (you can switch as you like).

    Plugin Support shahzeen(woo-hc)

    (@shahzeenfarooq)

    1 year, 6 months ago

    Hi there!

    Thank you for sharing the sandbox link. I’ve reviewed the issue and noticed that you are using a two-column block and have set the width of the first column (containing the product image) to 512px. This is causing the issue, as shown in this screenshot: View Screenshot.

    To resolve this, you have two options:

    Option 1:
    Adjust the column width to use percentages (%) instead of a fixed pixel value. This will allow the column to resize automatically based on the screen size. you just need to replace the 512px with the 45% or 50%, see this screenshot: https://prnt.sc/LPq_ztQrWVDH

    Option 2:
    Apply custom CSS to reduce the column width only for specific screen sizes where the issue occurs.

    I recommend trying the first option, as it is the most flexible and effective solution.

    Let me know how it works out for you! 😊

    Thread Starter ldwd

    (@ldwd)

    1 year, 6 months ago

    Thanks for looking into this @shahzeenfarooq!

    Since I didn’t edit either of the themes in this sandbox, I took a look at the WooCommerce files and found that the 512px is hardcoded in one of the files (see screenshot below).

    Besides that, this is only applicable in the Twenty Twenty-Four theme while I am using the Flash theme with the Classic Editor plugin enabled. In this theme the column widths are indeed 48%, but the label is not being displayed correctly as well. I tested some more and found out that this is due to the width of the dropdown field when a longer option is being used (see screenshot below). I need to use longer options in my shop. You can check the sandbox again to view the combination of Flash theme and long options.

    I am using WooCommerce for seven years now and like I said, it used to be correct (testing with WooCommerce version 6.9.0 did not reproduce this issue – that version was just a random pick).

    Any suggestions on this theme? 🙂

    • This reply was modified 1 year, 6 months ago by ldwd. Reason: Added extra info about Classic Editor in primary theme
    Plugin Support shahzeen(woo-hc)

    (@shahzeenfarooq)

    1 year, 6 months ago

    Hi there!

    Thank you for providing more information about the issue. I can see that the column width is set to 48%. However, on smaller screens, the “Choose courses” text breaks due to longer options, while the “Add to Cart” button appears fine, as shown in this screenshot: https://prnt.sc/TjYwxDqAlteh.

    To address this issue, you have two options:

    1. Reduce the image width using custom CSS code specifically for those screen where this issue occurs.
    2. Stack both columns on top of each other, similar to the mobile view, by using custom CSS code.

    Please note that providing custom CSS code is typically outside our scope of support. However, I can make an exception in this case. Could you confirm which option you’d like to proceed with so I can provide the necessary custom CSS code?

    Thank you!

    Thread Starter ldwd

    (@ldwd)

    1 year, 6 months ago

    Hi @shahzeenfarooq,

    Thank you for your offer. I’m familiar with css so no need to do the extra affort, though very much appreciated.

    Since the issue still exists when the columns are stacked (see screenshot below) I decided to divide the label and dropdown over two lines by default on all screen sizes with some css code. I share it here in case someone else is looking for a solution:

    .woocommerce div.product form.cart .variations td,
     .woocommerce div.product form.cart .variations th {
        display: block;
        padding-left: 0
    }

    ‘Add to cart’ is not an issue in my primary theme, only in Twent Twenty-Four, so for now I’m good, thanks!

    Plugin Support shahzeen(woo-hc)

    (@shahzeenfarooq)

    1 year, 6 months ago

    Hi there!

    Thank you for the update and for sharing your CSS solution—it’s always great when the community contributes fixes for others to benefit from!

    I’m glad to hear the issue with the “Add to Cart” button is limited to the Twenty Twenty-Four theme and doesn’t affect your primary theme. If you need further assistance or run into any other issues, feel free to reach out.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Product page not fully responsive’ is closed to new replies.