Resizing Product page price and color swatch

Can I please have two css codes for the attached. Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to Theme Settings > Custom CSS:

.swatches-select .colored-swatch, .swatches-select .image-swatch {
    width: 55px;
    height: 25px;
}

.price .amount {
    font-size: 52px;
}

Replace the values as per your needs

Best Regards

Hi,
The code to resize swatch circles does not work proportionally.
Can you please help me with these (screenshots and access to admin provided if needed)

1- Adding an attribute image is not loading on swatch or as hover (loads somewhere else shown in the screenshot…any way to make that happen? ( screenshot attached)
2- Css code needed to change the Text label of product attributes ( screenshot attached)
3- Css code to proportionally resize the attribute circle size and distance between them to half.( screenshot attached)

Attachments:

You must be logged in to view attached files.

Hello,

The code to resize swatch circles does not work proportionally.

I do not see you have added the code in Theme Settings > Custom CSS Also I wrote to change the values as per your needs, put width and height values equal you will get the proportional size.

1. http://prntscr.com/k2sep6 You need to add images in your variations.

2. Please add this code to Theme Settings > Custom CSS

.variations_form .variations label {
    font-weight: 600;
    color: #2d2a2a;
}

3. Add this code:

.swatches-select .colored-swatch, .swatches-select .image-swatch {
    margin-right: 30px;
}

Put the value as per your needs.

Best Regards,

Sorry, the point is mistaken. Please check the video attached.

1- Circles are not proportional with equal width and height in the coed.
2- Attribute Thumbnails are loaded on the corner instead of on the attribute itself.

Hello,

Try this code to see that they are proportional

 .swatches-select .image-swatch {
    width: 70px;
    height: 70px;
}

I have activated the Grid swatch attribute to display setting http://prntscr.com/k2thpq and now I see the image instead of color http://prntscr.com/k2ti70

Best Regards

[Author]

Posts