Product Details Not Displaying on Mobile

  • Resolved mitchp31

    (@mitchp31)


    5 years, 1 month ago

    Hi,

    I really need the product details to show up on mobile devices. I am using the default product page display, which works fine on desktop and tablet, but only shows the product title, price, main image, and additional images on mobile. I have tried to use the custom product page feature, but the functionality of that is awful and displays really unusual at different sizes. It really just isn’t great all around because you have to include the “Label” and the corresponding info in separate fields for the custom fields. That results in losing the ability to hide all custom fields that don’t have any information.

    Can you please help me resolve this issue and display all of my product detail fields that contain information on mobile devices?

    Looking forward to your response.

    Thanks!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • etoilewebdesign

    (@etoilewebdesign)

    5 years, 1 month ago

    Hi mitchp31,

    That definitely shouldn’t be happening.

    Could you try switching briefly to the “Tabbed Product Page” (in Options->Premium) , test in mobile and let us know if the product details appear then?

    Thread Starter mitchp31

    (@mitchp31)

    5 years, 1 month ago

    That does work to show the product details, but the format of that page type is not ideal. Most of my product details are from custom fields which can only be shown under the “Additional Info” tab. I do have a few items that include actual description that would show on the “Product Details” tab, but otherwise that tab is just empty. I have set “additional details” to be the starting tab, renamed it to be the main info and the other tab renamed to be additional details, but some of the custom field info should actually be under my additional info tab. And while renaming them works, it is not ideal that the main starting tab be the second tab..

    The other aspect of the tabbed layout I don’t want to have is the ability to click on the image, but there is no way to deactivate. Can you provide a way to resolve these aspects of the tabbed page type? If so, I would be okay with this as the resolution.

    etoilewebdesign

    (@etoilewebdesign)

    5 years, 1 month ago

    Hi mitch,

    With a little bit of custom CSS, you can change the float of the tabs, so that the second one actually shows to the left of the first one.

    You can also use CSS to stop the click function on the image. I would suggest you turn off the Lightbox also, as that’s not needed if you don’t want an image click.

    The following CSS should help with both of these aspects:

    ul#upcp-tabs {
    position: relative;
    float: left;
    width: auto;
}
.upcp-tabbed-layout-tab {
    float: right;
}
.upcp-tabbed-tab {
    width: 100%;
}
.upcp-tabbed-image-container a {
    pointer-events: none;
}
.upcp-tabbed-main-image-div:hover {
    cursor: initial;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Product Details Not Displaying on Mobile’ is closed to new replies.