How to make the default Swatch display as a square instead of a circle

Now the default display mode of Swatch is a circle, but I want to change it to a square, because the picture I uploaded is a square, and displaying it in a circle will result in the loss of the content of the picture.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

Please Check

Hello,

Sorry for the delay, Unfortunately, site admin access is not valid.

In addition, the site is empty, You need to create variable products and configure the swatches, https://xtemos.com/docs-topic/attribute-swatches/ and we will give you custom CSS.

If you have any questions please feel free to contact us.

Best Regards

Please try again.
If you look at the screenshot, you can see that the Swatch is circular by default, but I want to set it to a square, and I don’t want the image to be missing.

Attachments:

You must be logged in to view attached files.

Hello,

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

body .single-product-content .variations .swatches-select :is(.image-swatch,.colored-swatch) {
    border-radius: 0;
}

Best Regards

Another question is how to hide the SKU number?

What I mean is hiding SKUs on individual product pages.Another question is how to close the Additional information Tab.

Attachments:

You must be logged in to view attached files.

Hello,

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

.single-product-content .product_meta>span.sku_wrapper {
 display:none;
}

You can remove or edit the Additional tab in the Theme Setting > Single product > Tabs.

Best Regards

Hello, the screenshot above shows the Additional Information Tab, not the Additional Tab. The Additional Information Tab is automatically displayed when the weight and variation of the product are entered. Please check carefully.

Hello,

Additional tab (with the attributes) enter each attribute in the product page and disable showing on the product page to hide the tab.

If you have any questions please feel free to contact us.

Best Regards

But there is another attribute which is weight, how can this be hidden?

Hello,

You need to remove it in the product settings or we can hide the whole tab with custom CSS, please provide the product URL.

Best Regards

https://clubjerseys.online/product/real-madrid-2023-24-third-womens-jersey/
This is a link to the product, please check it out.

Hello,

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

body .single-product-content .tabs li.additional_information_tab {
   display:none;
}

Best Regards

[Author]

Posts