Home › Forums › WoodMart support forum › On the single product page, how to click the main product image to zoom it out

On the single product page, how to click the main product image to zoom it out

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 5, 2024 at 11:27 am #609963

    hey3212
    Participant

    Hi,

    Currently in the default template, users have to click on the icon ”click to enlarge” to zoom out the product image. Most people cannot find the small icon. I want to get rid of the icon and just click on any spot of the image to zoom it out. How to do this?

    Attachments:
    You must be logged in to view attached files.
    November 5, 2024 at 2:19 pm #610027

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Navigate to Theme Settings > Single Product > Gallery > Main image click action > Enable “zoom” option.

    Best Regards

    November 6, 2024 at 8:43 am #610187

    hey3212
    Participant

    Thanks. The default background color is black once the image is zoomed out. It does not look good. How to change to white or transparent? Also how to make the arrows bigger and closer to the image once zoomed out? See attached.

    Attachments:
    You must be logged in to view attached files.
    November 6, 2024 at 10:31 am #610226

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Can you please share the page URL so I will check and give you a possible solution?

    Best Regards

    November 6, 2024 at 4:42 pm #610348

    hey3212
    Participant

    Hi, click on any product on the home page and then click on the main image of that product, you will see the image zoom out with the black background. Link in the private section. do you still need the login?

    November 7, 2024 at 8:43 am #610431

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I am unable to visit your site due to maintenance mode. 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

    November 7, 2024 at 6:24 pm #610584

    hey3212
    Participant

    See the private section

    November 8, 2024 at 10:32 am #610669

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

    .pswp__item {
  background-color: white;
}

    Best Regards

    November 8, 2024 at 11:32 am #610694

    hey3212
    Participant

    Thank you. how to make the arrows closer to the image too? They are currently too much apart from the image. Being closer will make it easier for users to scroll.

    Attachments:
    You must be logged in to view attached files.
    November 8, 2024 at 1:45 pm #610753

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

    .pswp__button--arrow--left:before {
    left: 300px !important;
}

.pswp__button--arrow--right {
   right: 300px !important;
}

    Best Regards

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