Return to previous page

Change the image size of an attribute on product page

This topic has 7 replies, 2 voices, and was last updated 3 years ago ago by franked

franked

Participant

November 23, 2021 at 17:55

I created an attribute with different terms because I have a variable product. In the Xstore (airpods) demo the attribute image is much bigger than when i created the attributes.
For example I have included an imgur link where you can see the difference.

The different sizes: https://imgur.com/a/MvYO9Pl

My question is how can i make the attribute/terms image larger? Would love to hear it!

#309647 Copied Theme version: 8.0.9

6 Answers

Rose Tyler

Support staff

November 24, 2021 at 09:12

Hello,

We use custom CSS code on the demo. Provide URL of your variable product and we will help you with the code.

Regards

#309700 Copied

franked

Participant

November 24, 2021 at 09:16

Thank you i have included the URL in the private content area!

Please contact administrator
for this information.

#309701 Copied

Rose Tyler

Support staff

November 24, 2021 at 09:18

Add the next code in Theme Options > Theme custom CSS:

.single-product .st-swatch-size-large li.type-image {
width: 80px;
height: 80px;
}

Regards

#309702 Copied

franked

Participant

November 24, 2021 at 10:34

Thank you! Is it also possible to make the line around the swatch thicker and a different color perhaps?

#309712 Copied

Rose Tyler

Support staff

November 24, 2021 at 10:47

Change color via Theme Options > WooCommerce > Shop elements > Variation swatches > Swatches Border Color

Change code to – https://prnt.sc/20reqgo
border-width: 2px;

Regards

#309713 Copied

franked

Participant

November 24, 2021 at 11:37

Amazing thank you!

#309717 Copied
Tagged: attribute, change, image, product, size, templates, woocommerce, wordpress
Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘Change the image size of an attribute on product page’' has been successfully resolved, and the topic is now closed for further responses

Change the image size of an attribute on product page

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection