Image SWATCHES

[bestfitbybrazil]

The product page in Claue uses dropdowns for size and color.  How can I integrate images for “Color” instead of dropdown.  When ever I have more than one color for a product, i create a separate product for each additional color.  How can i make it so if someone clicks on a color swatch image, it jumps to the product detail page of the selected color product?  I tried “CleverSwatches – WooCommerce Color or Image Variation Swatches‎” and it was disabling the ability to put products in cart, plus it never worked.  I could not see images on product detail page.  Then I tried “WooSwatches – Woocommerce Color or Image Variation Swatches” and it didn’t change product detail page.  I can only see text, not image swatches.  I have not tried free version of Woocommerce Variation Swatches, but first wanted to see if you knew what i might be missing so that the template will allow images swatches on product detail page.

This is what i want to be able to accomplish:

Notice that this product detail page has 2 colors options swatches, and if you click one it takes you right to the other product detail page with that color.

This how i want it to work…

https://www.carbon38.com/product/velvet-puffer-rose/

This is how my detail page looks now

ALO Yoga Velvet Puffer (rosewood)

[Harry]

Hi,

Please install plugin WooCommerce Variation Swatch from WP Addon integrated with our theme. And after that go to Products > Attributes > Color and change to color type to color

http://janstudio.net/claue/document/#create-attributes

Kind regards

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

[bestfitbybrazil]

ok i set this up on one product. https://bestfitbybrazil.com/product/alo-yoga-velvet-puffer-rosewood/

but it does not select the color option image on mobile, so can’t put in cart.

[bestfitbybrazil]

also i want to make sure this is the right plugin.  https://getwooplugins.com/plugins/woocommerce-variation-swatches/?utm_source=wp-admin-plugins&utm_medium=style-tab&utm_campaign=woo-variation-swatches&utm_term=claue

seems like to get more features like links i need to pay for this plugin ?

[Harry]

Hi,

Could you give me your site admin account to check.

I see you use more plugins they cause conflict style.

Just use plugin WooCommerce Variation Swatch.

Kind regards

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

[Harry]

I tried account you sent but can’t access. Please reply on this topic and check in “Set as private reply”

Thanks

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

[Harry]

I help you install plugin Variation Swatch. Please follow our document at http://janstudio.net/claue/document/#create-attributes to setup your product.

Kind regards

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

[bestfitbybrazil]

Ok that works.  But one thing does not.  How can i get the individual swatches to by size 60px and square, and how to make image swatches link to the product detail page for each individual color?

this is where the original product is:

ALO Yoga Velvet Puffer (rosewood)

when i click the black color image of the coat i want it to go here and vice versa

https://bestfitbybrazil.com/product/alo-yoga-velvet-puffer-black/

[Harry]

Hi,

Please add below code

.is-color .swatch__value {
	width: 60px;
	height: 60px;
	line-height: 60px;
	border-radius: 0;
}
.is-color .swatch__list--item {
	border-radius: 0;
}

Please upload gallery image for color on the right column. http://prntscr.com/m7bqxz

This plugin only support change color and doesn’t support link to new page.

Your support expired, could you please pay renew support at https://themeforest.net/item/claue-clean-minimal-woocommerce-theme/18929281

Thanks

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

[bestfitbybrazil]

thanks that works.  so when i click on the image swatches, it changes the product photo to the other one full size on computer, but on mobile device it displays a thumbnail in the product area “smaller”.  How to fix this problem on mobile?

[bestfitbybrazil]

This reply has been marked as private.

[Harry]

Hi,

The issue because plugin Magic Zoom Plus. so color gallery doesn’t work. I deactivate and it work now.

Kind regards

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

[Harry]

when you mouse over the image it will zoom, please check on desktop.

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

[Harry]

Yes, the zoom function only on the image not pop out

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

[Harry]

Please reply on this topic.

Thanks

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

[bestfitbybrazil]

when there is 5 or more thumbnails, the gallery is showing piece of thumbnail cut-off and placed partially in its own thumbnail.  see here

ALO Yoga Velvet Puffer (rosewood)

how to fix this?

[Harry]

Thank for report we are working on this issue and update soon.

Could you please pay for renew support?

Thanks

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

[Harry]

Hi,

Please go to this link https://themeforest.net/item/claue-clean-minimal-woocommerce-theme/18929281 and click on renew support.

Thanks

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

[Harry]

Hi,

The discount badge integrated in our theme.

Kind regards

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

[Harry]

Hi,

Please change color in Claue > Theme Option > Color Scheme

To hide badge please add below code to Claue > Theme Option > General Layout > Custom CSS

.badge span {display: none;}

Please try reset your account password and post on our forum.

Regards

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

[bestfitbybrazil]

Thanks I was able to change color.

[Author]

Posts