Product attributes disabled attribute customissation on Single product page

HI

1) I want to customise the color attribute swatches disabled/not available color swatches attaching oon the single product page the Snaps bellow pls check and provide custom CSS for the same

2) The product grid prices Sale price and regular price on the product archive shop page is not align screenshot attached for the same I want to make it in one line

attahed Screenshots

Attachments:

You must be logged in to view attached files.

Hello,

01. Go to Products > Attributes > edit attribute > Choose the Disabled swatch style.

02. Please add the following Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile:

 html .wd-product .price, html .wd-product .price > .amount, html .wd-product .price ins > .amount {
    font-size: 13px !important;
    }
.wd-product.wd-hover-fw-button .wrap-price {
    width: 195px;
}

Best Regards.

thank you Aijaz, this worked

the first option

01. Go to Products > Attributes > edit attribute > Choose the Disabled swatch style.

not has the customisation I am looking for
its making an X mark i dont want X mark

Attachments:

You must be logged in to view attached files.

Hello,

Add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

[class*="wd-swatches"].wd-size-large {
    --wd-swatch-size: 50px !important;
}
.wd-swatch {
    width: 50px !important;
    height: 50px !important;
}

Best Regards.

i Dont want to change the swatch style nor the size I just want the this diagonal line / which appears like this “/ ” on the colors swatch which is not avaible or disabled swatch I want to increase the widht of it or the color of thee same
it is so thin that it is bearly visible please see aattached snap for example

Attachments:

You must be logged in to view attached files.

Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings for swatches:

[class*="wd-swatches"].wd-dis-style-3 .wd-swatch.wd-disabled {
    opacity: 2.4 !important; 
    --wd-swatch-brd-color: var(--brdcolor-gray-500) !important;
}

For other customization, We use this file woocommerce/single-product/add-to-cart/variable.php for showing single swatches, you can copy this file into the child theme, and customize it.

Best Regards.

thank you so much Aijaz you are an amazing guy thanks a lot

Most Welcome 🙂

If you do not mind, can you please leave 5 stars rating for our theme by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in future. It would encourage our work a lot. If you like our Theme and Support.

Have a great day 🙂

Topic Closed.
Best Regards.

[Author]

Posts