Optimizing ‘Frequently Bought Together’ Display for Mobile: Reducing Space

The “Frequently Bought Together” section on mobile is displayed too large and takes up too much space, requiring excessive scrolling. Are there any other themes or display options available to present it differently?

Attachments:

You must be logged in to view attached files.

Hello,

“To adjust the ‘Frequently Bought Together’ section on mobile, navigate to Theme Settings > Shop > Frequently Bought Together and set the Products Columns on Mobile option. This should help reduce the space.

If you have any questions feel free to contact us.

Best Regards

It’s not the ‘Frequently Bought Together’ tab, but the ‘Option’ tab within the product detail page. Please check the attached image. The text is too large, and the images are also oversized, requiring excessive scrolling. Please review it again. Are there any other themes or display options available to present it differently?

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

I am sharing login details.

Please ensure that the options are displayed in a way that minimizes excessive scrolling for customers, whether it’s through images, text, or other options, and preferably in a grid format. Kindly review this as soon as possible.

Attachments:

You must be logged in to view attached files.

Hello,

You have missed the admin login URL. Can you please share the WP admin login URL in the private area so I will check and give you a possible solution?

Best Regards

Please check this is urgent

Hello,

Can you please share the product page url where the frequently bought together products are situated.

Best Regards

I mentioned again that my inquiry is about the options section. Each product contains options to purchase additional products. I’m sharing the link below. When I check this link on mobile, the options section is too large and takes up too much space. It looks cluttered. I am asking if there are different display options available. Please check the enclosed file. PC seems fine, but need to change mobile version!

link : https://foodology-us.com/product/coleology-cut-30days/

Attachments:

You must be logged in to view attached files.

Hello,

Add this code to the Theme Settings > Custom CSS > Global> Custom CSS for mobile

.woobt-wrap-responsive .woobt-products .woobt-product {
    padding: 0px !important;
}

Best Regards

I followed your instructions, but nothing has changed. Even after refreshing the page, the issue remains the same. Could you please double-check? Is there any other method I can try? Also, I want the layout to appear the same or in grid format on mobile and tablets. Should I use the same code for this?

Attachments:

You must be logged in to view attached files.

Hello,

Please remove the previous code and add this code to the Theme Settings > Custom CSS > Global> Custom CSS for mobile.

.woobt-wrap-responsive .woobt-products {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Adjust this value for more/less columns */
        gap: 10px;
    }
    .woobt-wrap-responsive .woobt-product {
        text-align: center;
        padding: 10px;
    }
    .woobt-product > div {
        padding: 5px !important;
        width: 100% !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

Best Regards

Hello,I added the code you provided into the CSS for mobile section and Still not working
Please check the enclosed file.

Attachments:

You must be logged in to view attached files.

I fixed it ! I Added Custom CSS: Go to Appearance > Customize > Additional CSS and add the following code to reduce the size of the options section on mobile devices.

@media only screen and (max-width: 768px) {
.product-options {
max-height: 150px; /* Set a max height for the options section */
overflow-y: auto; /* Add scroll if content exceeds the height */
}
.product-options select, .product-options label {
font-size: 14px; /* Adjust the font size for better readability */
padding: 5px; /* Add padding to reduce the space */
}
}

Sounds Great! that your issue has been solved.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts