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

This topic has 14 replies, 2 voices, and was last updated 2 months ago by Aizaz Imtiaz Awan.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
October 8, 2024 at 8:56 am #603267

tradeadaptkorea
Participant

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.

October 8, 2024 at 11:09 am #603342

Aizaz Imtiaz Awan
Keymaster

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

October 10, 2024 at 5:00 am #603891

tradeadaptkorea
Participant

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.

October 10, 2024 at 10:54 am #603989

Aizaz Imtiaz Awan
Keymaster

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

October 11, 2024 at 4:32 am #604230

tradeadaptkorea
Participant

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.

October 11, 2024 at 10:26 am #604300

Aizaz Imtiaz Awan
Keymaster

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

October 15, 2024 at 4:41 am #604981

tradeadaptkorea
Participant

Please check this is urgent

October 15, 2024 at 11:25 am #605094

Aizaz Imtiaz Awan
Keymaster

Hello,

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

Best Regards

October 17, 2024 at 4:25 am #605622

tradeadaptkorea
Participant

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.

October 17, 2024 at 2:10 pm #605775
Aizaz Imtiaz Awan
Keymaster
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
October 18, 2024 at 3:55 am #605919

tradeadaptkorea
Participant

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.

October 18, 2024 at 10:43 am #605994
Aizaz Imtiaz Awan
Keymaster
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
October 23, 2024 at 4:47 am #606936

tradeadaptkorea
Participant

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.

October 23, 2024 at 5:17 am #606939

tradeadaptkorea
Participant

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 */
}
}

October 23, 2024 at 9:40 am #606975

Aizaz Imtiaz Awan
Keymaster

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