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

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

[Author]

Posts