Home › Forums › WoodMart support forum › How to disable single product thumbnails for moible devices?

How to disable single product thumbnails for moible devices?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 21, 2023 at 6:10 am #505898

    nbgamer897
    Participant

    Hi, I want to disable thumbnails for single products on mobile devices but I can not find any option to do so and I also want to full width the product images tab for mobile devices. Thank you.

    • This topic was modified 1 year, 1 month ago by nbgamer897.
    Attachments:
    You must be logged in to view attached files.
    October 21, 2023 at 1:41 pm #505980

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please use the Theme Presets and change the thumbnail position for mobile devices from Theme settings > Single Product > Images > Thumbnail position.

    Please check this:
    Select the custom condition and select it for mobile device.
    https://xtemos.com/docs-topic/theme-settings-presets/

    Best Regards.

    October 21, 2023 at 7:11 pm #506027

    nbgamer897
    Participant

    Hi, thanks for getting back. But I still can’t figure it out. If you could do it that would be very helpful. Thank you.

    October 23, 2023 at 10:06 am #506198

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Custom CSS for Mobile:

    .thumbs-position-left .thumbnails {
    display: none !important;
}

    Best Regards.

    October 23, 2023 at 5:38 pm #506459

    nbgamer897
    Participant

    Hi, thanks thumbnails are gone but product image is still not full width and also need to hide the navigation arrows.

    Attachments:
    You must be logged in to view attached files.
    October 24, 2023 at 2:49 pm #506714

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please check this Manual to change the size:
    https://www.businessbloomer.com/woocommerce-single-product-image/

    Try to ass following custom CSS in theme settings > Custom CSS > mobile custom CSS:

    .wd-owl :is(.owl-nav .owl-prev,.owl-nav .owl-next,.owl-dot) {
	display:none;
}

    Best Regards.

    October 24, 2023 at 4:04 pm #506741

    nbgamer897
    Participant

    Hi, thanks for getting back, i think the article you provided is for changing shop page image size. I want to change product image size to full width but i can’t figure it out I tried editing single product layout but still can’t figure it out.

    Attachments:
    You must be logged in to view attached files.
    October 25, 2023 at 10:13 am #506941

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Try to add the following custom CSS code in Theme Settings > Global custom CSS:

    .woocommerce.single-product #content div.product div.images,
.woocommerce.single-product div.product div.images,
.woocommerce-page.single-product #content div.product div.images,
.woocommerce-page.single-product div.product div.images {
max-width: 70%;
display: block;
width: 70% !important;
float: none !important;
margin-left: auto;
margin-right: auto;
}

    Change the code as per your requirements.

    Best Regards.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)