Use images for Variable products and linked variations

Hi team,

Could you provide css code to increase the image size for Variable products and linked variations, keep same ratio as thumb picture instead of square, our products are 5:7 ratio.
The theme default image size is too small, and not our ratio type picture, so we need to change.

2. We found the selected option name is only display to variable products, could you also enable displaying name for linked variations products.

Thank you for your help.

Attachments:

You must be logged in to view attached files.

Hello,

01. Navigate to Products > Attributes > Edit attribute and choose the swatch size:

See Screenshot for better understanding:https://postimg.cc/zVRwcDQn

02. The Linked Variations feature works differently from standard WooCommerce variable products. Linked Variations connect separate Simple or Variable products, and the selected product is opened as a separate product page when its swatch is clicked.

Currently, WoodMart does not have an option to display the selected linked variation/attribute name in the same way as it does for standard variable products.

If you would like the selected option name to be displayed for Linked Variations as well, this would require additional customization with custom code.

Best Regards

Hi,

1）Thank you for the guide on the setting for the swatch size, but the ratio is only square, could you provide css code to show 5:7 ratio which is exactly our pictures size.
2）We would like the selected option name to be displayed for Linked Variations as well, please provide additional customization with custom code.

Appreciate!

Attachments:

You must be logged in to view attached files.

Hello,

01. Try to add the following Custom CSS code in Theme Settings > Custom CSS.

/* Linked/Variable variation image swatches - 5:7 ratio */
[class*="wd-swatches"] .wd-swatch.wd-bg {
    width: 71.43px;
    height: 100px;
    aspect-ratio: 5 / 7;
    padding: 4px;
}

/* Keep the image inside the swatch at 5:7 ratio */
[class*="wd-swatches"] .wd-swatch.wd-bg .wd-swatch-bg {
    width: 100%;
    height: 100%;
    aspect-ratio: 5 / 7;
    background-size: cover;
    background-position: center;
}

02.Sorry, but there is no option in Theme Settings available for that. It requires customizations, and this is beyond our limitations and support policy.

Best Regards

Hi,

Thanks for the css code,
2), We do hope one day, you team can provide paid service plan for further customization, because it does matter to the e-commerce site business.
3), Could you enable the linked variation image always choose second image instead of first one in product gallary, because the second picture is pure white background color, it looks great and clear in the attribution selection. our first gallery picture is secenario style, the second one is pure white bg. I attached pictures for your reference.

Appreciate for your checking and best try.

Attachments:

You must be logged in to view attached files.

Hello,

01. Sorry for the inconvenience, but currently we are not offering any paid customization services.

Thanks for your understanding.

02. Sorry, but there is no option available in Theme Settings for that. It requires customizations, and this is beyond our limitations and support policy.

Best Regards

Hi,

We found the provided css code caused an issue on the shop page-> filter color swatch size, it becomes too big, see attached picture, would you please restore it, add another code to exclude the color swatch ratio on filter color widget.

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

Your issue has been resolved. I have updated the Custom CSS code on your with this one. Please check back your site and check the issue.

/* Linked/Variable variation image swatches - 5:7 ratio */
.single-product [class*="wd-swatches"] .wd-swatch.wd-bg {
    width: 71.43px;
    height: 100px;
    aspect-ratio: 5 / 7;
    padding: 4px;
}

/* Keep the image inside the swatch at 5:7 ratio */
.single-product [class*="wd-swatches"] .wd-swatch.wd-bg .wd-swatch-bg {
    width: 100%;
    height: 100%;
    aspect-ratio: 5 / 7;
    background-size: cover;
    background-position: center;
}

Best Regards

[Author]

Posts