Title: Color and Image Swatches for Variable Product Attributes
Author: Phoeniixx
Published: <strong>2016年4月29日</strong>
Last modified: 2020年12月16日

---

プラグインを検索

![](https://ps.w.org/color-and-image-swatches-for-variable-product-attributes/assets/
banner-772x250.jpg?rev=1407118)

このプラグインは **WordPress の最新3回のメジャーリリースに対してテストされていま
せん**。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress
で使用した場合は互換性の問題が発生する可能性があります。

![](https://ps.w.org/color-and-image-swatches-for-variable-product-attributes/assets/
icon-256x256.jpg?rev=1407118)

# Color and Image Swatches for Variable Product Attributes

 作者: [Phoeniixx](https://profiles.wordpress.org/phoeniixx/)

[ダウンロード](https://downloads.wordpress.org/plugin/color-and-image-swatches-for-variable-product-attributes.2.0.6.zip)

 * [詳細](https://ja.wordpress.org/plugins/color-and-image-swatches-for-variable-product-attributes/#description)
 * [レビュー](https://ja.wordpress.org/plugins/color-and-image-swatches-for-variable-product-attributes/#reviews)
 *  [インストール](https://ja.wordpress.org/plugins/color-and-image-swatches-for-variable-product-attributes/#installation)
 * [開発](https://ja.wordpress.org/plugins/color-and-image-swatches-for-variable-product-attributes/#developers)

 [サポート](https://wordpress.org/support/plugin/color-and-image-swatches-for-variable-product-attributes/)

## 説明

[FREE VERSION DEMO LINK](http://colorandimageswatchesfree.phoeniixxdemo.com/product/ninja/)
| [FREE VERSION DOCUMENTATION LINK](https://colorandimageswatchesfree.phoeniixxdemo.com/wp-content/uploads/2019/07/color-swatches.pdf)

#### Overview

By using our woocommerce plugin you can generate color and image swatches to display
the available product variable attributes like colors, sizes, styles etc. You can
replace the drop down fields with color and image swatches.

#### Free Features:

 * **NEW ** Option to create Image Swatches.
 * **NEW ** Option to set swatch style as Square or Circle.
 * Option to create unlimited Color Swatches.
 * Works on variable products only.

[FREE VERSION DEMO LINK](http://colorandimageswatchesfree.phoeniixxdemo.com/product/ninja/)
| [FREE VERSION DOCUMENTATION LINK](https://colorandimageswatchesfree.phoeniixxdemo.com/wp-content/uploads/2019/07/color-swatches.pdf)

**Take a look at how to add Swatches to a product**.

#### Premium Features:

**Take a look at Premium features**.

[PREMIUM VERSION LIVE DEMO](http://colorswatches.phoeniixxdemo.com/shop/) | [PREMIUM VERSION LINK](https://www.phoeniixx.com/product/color-image-swatches-woocommerce/)
| [DOCUMENTATION LINK](https://www.phoeniixx.com/wp-content/uploads/2018/07/Color-Swatches-Documentation-Pro-1.pdf)

 * Option to show swatches on Shop Page.
 * Option to create swatches using Radio Buttons.
 * Option to create swatches using Bicolors.
 * Option to set the minimum number of attributes to show on Shop Page.
 * Option to zoom the swatch image on hover.
 * Can show tooltip on hover.
 * There are option for styling the Swatch Square Style. Can choose either Round
   Edge or Sharp Edge.
 * Option to adjust tooltip background color and text color.
 * Option to show tooltip on both shop page as well as on product page.
 * Option to set the Attribute Lable Text below or above the attributes.
 * Option to create swatches using colors.
 * Option to create swatches using images.
 * Option to create swatches using icons, grid of 300 icons library is available
   with this option.
 * Option to create swatches using text.
 * Attributes can be shown in the dropdown by choosing option None.
 * You can create Swatches globally.
 * You also have the option to create color and image swatches on a per-product 
   basis.
 * Swatches can be stylized by changing Default Swatch Border Color,Active Swatch
   Border Color,Swatch Color,Swatch Hover Color.
 * Option to change Swatch border style in circle or square shape.
 * Swatch Type Size can also be adjusted according to choice.
 * You can use swatches on each variation you have set up.
 * While creating global attributes list you can select swatch type to show it in
   Color, image or icon option.
 * You can use Taxonomy colors and images to show global attributes on per product.
 * Show or Hide attribute term label.
 * Option to set the attribute term label font size and font weight.
 * Option to set the top and bottom margin between the attribute term label.
 * Option to set the price label and font weight.
 * Can also set the Color , Icon , Image and Text swatch thumbnail size.

[PREMIUM VERSION LIVE DEMO](http://colorswatches.phoeniixxdemo.com/shop/) | [PREMIUM VERSION LINK](https://www.phoeniixx.com/product/color-image-swatches-woocommerce/)
| [DOCUMENTATION LINK](https://www.phoeniixx.com/wp-content/uploads/2018/07/Color-Swatches-Documentation-Pro-1.pdf)

#### Premium WordPress Themes

Here is our premium wordpress theme

 * [Foody Themes](https://www.phoeniixx.com/product/foody/)
 * [Jstore Themes](https://www.phoeniixx.com/product/jstore-theme/)
 * [Eezy Themes](https://www.phoeniixx.com/product/eezy-store/)
 * [Craze Themes](https://www.phoeniixx.com/product/craze/)
 * [Seofication Themes](https://www.phoeniixx.com/product/seofication/)
 * [News Prime Themes](https://www.phoeniixx.com/product/news-prime/)

> 
> #### Our Website
> 
>  *  [https://www.phoeniixx.com/](https://www.phoeniixx.com/)
> 
> #### Support Email
> 
>  *  [support@phoeniixx.com](https://ja.wordpress.org/plugins/color-and-image-swatches-for-variable-product-attributes/support@phoeniixx.com?output_format=md)
> 
> #### NOTE
> 
>  *  Our plugin doesn’t support the multisite network.

## スクリーンショット

[⌊Admin view: Adding color swatch to your attributes.⌉⌊Admin view: Adding color 
swatch to your attributes.⌉[

Admin view: Adding color swatch to your attributes.

[⌊Admin view: Adding image swatch to your attributes.⌉⌊Admin view: Adding image 
swatch to your attributes.⌉[

Admin view: Adding image swatch to your attributes.

[⌊Admin view : Adding text swatch to your attributes.⌉⌊Admin view : Adding text 
swatch to your attributes.⌉[

Admin view : Adding text swatch to your attributes.

[⌊Square swatch style.⌉⌊Square swatch style.⌉[

Square swatch style.

[⌊Circle swatch style.⌉⌊Circle swatch style.⌉[

Circle swatch style.

## インストール

 1. Install [WordPress](https://wordpress.org/)
 2. Go to your WordPress admin panel, and then to Plugins. Click on “Add New” and then
    upload the zip file of the plugin using the “Upload Plugin” button you can find
    on top of the screen.
 3. For the plugin to work as it should, WooCommerce plugin has to be installed and
    enabled.

## 評価

![](https://secure.gravatar.com/avatar/cfb00e788555633fe004182c1f48cc1bf88897a9bdb1b9abafde427a97c9c9c5?
s=60&d=retro&r=g)

### 󠀁[Doesn’t work](https://wordpress.org/support/topic/doesnt-work-2592/)󠁿

 [sheepdear](https://profiles.wordpress.org/sheepdear/) 2021年1月14日

Doesn't work any more. Images don't show.

![](https://secure.gravatar.com/avatar/83b2cb9b7a2e25b0b78f37e3caf761a85da0f0e8a702bf039b9f61b2af71e849?
s=60&d=retro&r=g)

### 󠀁[Fatal error](https://wordpress.org/support/topic/fatal-error-3527/)󠁿

 [Miguel Veloso](https://profiles.wordpress.org/portopedico/) 2020年6月18日

It gives fatal error once installed.

![](https://secure.gravatar.com/avatar/5e2d8dc62d25ba01656e8f77310902c53b49bfd2775f70c7fb0001babeb50d7d?
s=60&d=retro&r=g)

### 󠀁[Limited functionality and no trial period](https://wordpress.org/support/topic/limited-functionality-and-no-trial-period/)󠁿

 [nixsys](https://profiles.wordpress.org/nixsys/) 2019年8月30日

Limited functionality and no trial period.

![](https://secure.gravatar.com/avatar/b8a9b4ce39278478ba2b25393463ffa907cd841a933f256e81c30256a0ab014b?
s=60&d=retro&r=g)

### 󠀁[best variation plug-in – pro version](https://wordpress.org/support/topic/best-variation-plug-in-pro-version/)󠁿

 [iman0202](https://profiles.wordpress.org/iman0202/) 2019年3月7日

I bought and install the pro version of the plug-in, very handy and effective, as
I needed it, There was some issue that technical support took care of it very fast,
happy with my choice

![](https://secure.gravatar.com/avatar/4ffdefff2b06b99166621a9da84bd7d420214e4112bff53df96998115fb1dcb6?
s=60&d=retro&r=g)

### 󠀁[Waste of Time to try the free version](https://wordpress.org/support/topic/waste-of-time-to-try-the-free-version/)󠁿

 [lepress](https://profiles.wordpress.org/lepress/) 2018年9月25日

It totally wastes time to try the free version. Because only the type of color is
available in free version. So Ridiculous. There are so many other free versions 
of plugins with the type of Image.

![](https://secure.gravatar.com/avatar/b4a05d7a391927cad7534a89d6ef84aac0ad1fa634fc08b09efb6b8f99a9c4dd?
s=60&d=retro&r=g)

### 󠀁[Best Variations Image plugin, great service](https://wordpress.org/support/topic/best-variations-image-plugin-great-service/)󠁿

 [pwilliamson](https://profiles.wordpress.org/pwilliamson/) 2018年7月25日

I looked at the range of solutions available for my website and found this to be
the most functional and certainly the best value. When I had a problem setting up(
my own fault) the team got in there and solved it for me quickly and politely. Don't
worry about those year-old single star reviews, this company wins on function, value
AND support!

 [ 20件のレビューをすべて表示 ](https://wordpress.org/support/plugin/color-and-image-swatches-for-variable-product-attributes/reviews/)

## 貢献者と開発者

Color and Image Swatches for Variable Product Attributes はオープンソースソフトウェア
です。以下の人々がこのプラグインに貢献しています。

貢献者

 *   [ Phoeniixx ](https://profiles.wordpress.org/phoeniixx/)

[“Color and Image Swatches for Variable Product Attributes” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/color-and-image-swatches-for-variable-product-attributes)

### 開発に興味がありますか ?

[コードを閲覧](https://plugins.trac.wordpress.org/browser/color-and-image-swatches-for-variable-product-attributes/)
するか、[SVN リポジトリ](https://plugins.svn.wordpress.org/color-and-image-swatches-for-variable-product-attributes/)
をチェックするか、[開発ログ](https://plugins.trac.wordpress.org/log/color-and-image-swatches-for-variable-product-attributes/)
を [RSS](https://plugins.trac.wordpress.org/log/color-and-image-swatches-for-variable-product-attributes/?limit=100&mode=stop_on_copy&format=rss)
で購読してみてください。

## 変更履歴

#### 2.0.6 – 24/02/2020

 * Color picker issue fixed

#### 2.0.5 – 23/01/2020

 * Compatible with latest version of woocommerce

#### 2.0.4 – 18/11/2019

 * Compatible with latest version of wordpress

#### 2.0.3 – 06/11/2019

 * Compatible with latest version of woocommerce

#### 2.0.2 – 16/08/2019

 * Compatible with latest version of woocommerce

#### 2.0.1 – 23/07/2019

 * Support contact number updated.

#### 2.0.0 – 18/07/2019

 * Added image swatch feature.

#### 1.5.0 – 10/05/2019

 * Compatible with latest version of woocommerce and wordpress

#### 1.4.9 – 18/04/2019

 * Compatible with latest version of woocommerce

#### 1.4.8 – 28/02/2019

 * added live demo url

#### 1.4.7 – 27/02/2019

 * compatible with latest version of woocommerce and wordpress

#### 1.4.6 – 14/12/2018

 * compatible with latest version of woocommerce and wordpress

#### 1.4.5 – 07/11/2018

 * compatible with latest version of woocommerce

#### 1.4.4 – 02/11/2018

 * compatible with latest version of woocommerce

#### 1.4.3 – 07/09/2018

 * compatible with latest version of woocommerce

#### 1.4.2 – 07/08/2018

 * compatible with latest version of woocommerce

#### 1.4.1 – 19/07/2018

 * Bugs fixed

#### 1.4.0 – 14/07/2018

 * Content added.

#### 1.3.0 – 11/06/2018

 * Premium feature added

#### 1.2.9 – 11/06/2018

 * Bugs fixed

#### 1.2.8 – 05/04/2018

 * compatible with the latest version

#### 1.2.7 – 24/10/2017

 * compatible with the latest version

#### 1.2.6 – 12/10/2017

 * Added new feature

#### 1.2.5 – 25/09/2017

 * Added video in the first tab

#### 1.2.4 – 23/08/2017

 * Added video in the tab

#### 1.2.3 – 27/07/2017

 * Bug fixes.

#### 1.2.2 – 14/07/2017

 * Bug Fixes

#### 1.2.1 – 24/06/2016

 * Bug Fixes.

#### 1.2 – 16/06/2016

 * Bug Fixes.

#### 1.1 – 02/06/2016

 * Bug Fixes.

#### 1.0

 * Initial release.

## メタ

 *  バージョン **2.0.6**
 *  最終更新日 **6年前**
 *  有効インストール数 **900+**
 *  WordPress バージョン ** 4.0またはそれ以降 **
 *  検証済み最新バージョン: **5.6.22**
 *  言語
 * [English (US)](https://wordpress.org/plugins/color-and-image-swatches-for-variable-product-attributes/)
 * タグ
 * [variation swatches](https://ja.wordpress.org/plugins/tags/variation-swatches/)
   [woocommerce attributes](https://ja.wordpress.org/plugins/tags/woocommerce-attributes/)
 *  [詳細を表示](https://ja.wordpress.org/plugins/color-and-image-swatches-for-variable-product-attributes/advanced/)

## 評価

 5つ星中3.1つ星

 *  [  10 5-星レビュー     ](https://wordpress.org/support/plugin/color-and-image-swatches-for-variable-product-attributes/reviews/?filter=5)
 *  [  0 4-星レビュー     ](https://wordpress.org/support/plugin/color-and-image-swatches-for-variable-product-attributes/reviews/?filter=4)
 *  [  0 3-星レビュー     ](https://wordpress.org/support/plugin/color-and-image-swatches-for-variable-product-attributes/reviews/?filter=3)
 *  [  1 2-星レビュー     ](https://wordpress.org/support/plugin/color-and-image-swatches-for-variable-product-attributes/reviews/?filter=2)
 *  [  9 1-星レビュー     ](https://wordpress.org/support/plugin/color-and-image-swatches-for-variable-product-attributes/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/color-and-image-swatches-for-variable-product-attributes/reviews/#new-post)

[すべてのレビューを見る](https://wordpress.org/support/plugin/color-and-image-swatches-for-variable-product-attributes/reviews/)

## 貢献者

 *   [ Phoeniixx ](https://profiles.wordpress.org/phoeniixx/)

## サポート

意見や質問がありますか ?

 [サポートフォーラムを表示](https://wordpress.org/support/plugin/color-and-image-swatches-for-variable-product-attributes/)