color swatches

[Mag8891]

Hi Harry,

I notices that for some reason on shop page I don’t see first color swatch for this product /product/test-layout-1-right-copy/

it is showing correctly on the quick view and on product page as well.

[Mag8891]

2. Also how can I edit colour of background of the varioation swatches tool tip and text, and color of the variation circle when it is active.

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. Please follow our document at http://janstudio.net/claue/document/#create-attributes and http://janstudio.net/claue/document/#create-product-color-swatches

2. You can edit tooltip in Products > Attributes > Configure Terms and change Tooltip text

To change background of active tooltip, please use below code

.swatch__tooltip {
    background: rgba(0, 0, 0, 0.8);
}

0,0,0 as RGB and 0.8 as opacity from 0.0 – 1.0

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

Hi Harry, this code only changes the background of the text, how can I change the color of the circle around chosen variation which is black at the moment.

 

thank you

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Mag,

Please use below code

.swatch__list--item.is-selected {
    background: #333;
    border-color: #333;
}

and change #333 with yours.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

Hi Harry,  and what about the tiny little black arrow below the tooltip, it is not part of any code, does it have separate name?

please check my site /product/variable-test-layout-1-right/

thank you

[Harry]

Hi Mag,

It now your site use style of plugin AliDropship for color swatch. So I don’t see style of tooltip.

Please setup stable site before customize. I have to spend more time to do other work it will waste time for you and for me to do something you don’t use for your site.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Harry]

Hi,

1. Please add below code

.adsw-attribute-option .meta-item-text.active {
	border: 1px solid #000;
	background: #000;
	color: #fff;
}

2. Please change code

.entry-summary .wcst_savings_variation {
	float: right;
}

to

.entry-summary .wcst_savings_variation {
	display: inline-block;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

Hi Harry, Thank you,

1.but I think it doesn’t change the circles border, please see attached. I added !important it started to work but only for Label variations, not circles swatches

.adsw-attribute-option .meta-item-text.active {
border: 5px solid rgba(86,207,225,0.87) !important;
background: rgba(86,207,225,0.87);
color: #fff;
}

2. It made You save to be under the price but not in one line, can I have it in one line?

thank you

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Mag,

Please use below code

.adsw-attribute-option .meta-item-img.active img {
	border: 5px solid rgba(86,207,225,0.87) ;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

OK thank you and what about

2. It made You save to be under the price but not in one line, can I have it in one line or is it bag with alidropship because it was in one line before this plugin? what do you think?

Thank you

[Harry]

Hi,

I tried but can’t make “You Save …” in one line with price.

It only way put it below price.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts