Using Color Swatches

ShopWP provides two "variant styles": dropdowns and buttons. The color swatches will show only if you're using variant buttons.

By default, the plugin will attempt to transform your variant buttons into color swatches for you automatically. There are two requirements for this to "just work".

1. Your Option name must be called "Color" (case-insensitive) inside Shopify.
2. Your variant value must correspond to a valid HTML color name.

Disabling Swatches

If you wish to disable color swatches, add the below code to your theme's JavaScript:

wp.hooks.addFilter(
	'product.variant.styles.colorSwatch.names',
	'shopwp',
	function (defaultNames) {
		return []
	}
)

Customizing Option Name

If you want to use a custom Option name you can add it to the list of names that ShopWP will check for. You can do this by using the product.variant.styles.colorSwatch.names filter in your theme's JavaScript, like this:

wp.hooks.addFilter(
	'product.variant.styles.colorSwatch.names',
	'shopwp',
	function (defaultNames) {
		defaultNames.push('material')

		return defaultNames
	}
)

Here, we're adding the option name material to the list. Now ShopWP will check if your variants belong to an option called "Material" or "Color" to determine whether to show the color swatches or not.

Customizing Variant Value

If you're unable to name your variant to match a valid HTML color name, you can provide a custom color to use instead. You can do this by using the product.colorSwatchValue filter in your theme's JavaScript, like this:

wp.hooks.addFilter('product.colorSwatchValue', 'shopwp', function (colorName) {
	// Here any valid CSS color value will work
	if (colorName === 'Heather Gray') {
		return '#2e2e2e'
	}

	return colorName
})

Overriding All Variant CSS

If you want to customize the entire variant style, you can filter all of the CSS by using the product.variantStyles filter in your theme's JavaScript, like this:

wp.hooks.addFilter(
	'product.variantStyles',
	'shopwp',
	function (defaultCustomStyles, variant, isSelected, isAvailableToSelect) {
		return `
      margin: 0 10px 10px 0;
      padding: 10px;
   `
	}
)