Home › Forums › WoodMart support forum › Vendor dashboard featured image preview stretched to square with Woodmart+Dokan

Vendor dashboard featured image preview stretched to square with Woodmart+Dokan

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 26, 2025 at 12:23 am #697678

    zmicier.zavadski
    Participant

    Hi Woodmart support team,

    I’m using the Woodmart theme together with Dokan Pro for a multi-vendor marketplace, and I’ve run into an issue with how product featured images are displayed in the vendor dashboard (frontend).

    Issue

    In the vendor dashboard → Products → Add/Edit product, the featured image preview inside the dashed box is always forced into a square.
    If I upload a non-square image (for example, a 5:6 portrait), it gets stretched/cropped to fill that square box.

    On the single product page on the frontend, the same image looks correct (aspect ratio is preserved according to WooCommerce image settings) — the problem affects only the vendor dashboard preview.

    Dokan support has checked this on a staging site and confirmed that when I switch to the default Storefront theme, the vendor dashboard preview behaves correctly and the image is not distorted. With Woodmart active, the image is stretched, so they advised me to contact you as the theme seems to be forcing the image into a square container.

    Expected behavior

    In the vendor dashboard Add/Edit product form, the featured image preview should keep the original aspect ratio (or at least match the way it appears on the single product page), without horizontal stretching or unwanted cropping.

    I’ve prepared a separate staging site where you can reproduce the issue.

    Could you please check what in Woodmart is causing the image in the Dokan vendor dashboard preview to be forced into a square, and recommend a fix (CSS override, setting, or code snippet) so that the preview keeps the proper aspect ratio?

    Best regards,
    Zmicier

    November 26, 2025 at 1:16 pm #697751

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Navigate to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> paste the CSS. You can change the values according to your choice in it.

    .product-edit-new-container .dokan-new-product-featured-img {
    height: auto !important; /* allow flexible height */
    max-height: 400px; /* optional: limit max height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.product-edit-new-container .dokan-new-product-featured-img img {
    width: auto !important;   /* natural width */
    max-width: 100%;          /* responsive */
    height: auto !important;  /* maintain aspect ratio */
    object-fit: contain;      /* prevent cropping */
    display: block;
}

    Best Regards,

    November 27, 2025 at 4:02 am #697890

    zmicier.zavadski
    Participant

    Hi Aizaz,

    Thank you very much for your help and for providing the CSS snippet.

    It pointed me in the right direction and solved the stretching issue in the Dokan vendor dashboard. I slightly adjusted the code to better match the 5:6 product card ratio on my site, but your example was exactly what I needed to fix the problem.

    Really appreciate your quick support!

    Best regards,
    Zmicier

    November 27, 2025 at 7:39 am #697893

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    You’re Most Welcome!

    Feel free to write back anytime. If you need further assistance, we are always here to help you.

    If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

    Thanks for contacting us.
    Have a great day.

    Topic Closed.
    Best Regards.

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

The topic ‘Vendor dashboard featured image preview stretched to square with Woodmart+Dokan’ is closed to new replies.