Variation Swatches Hook Reference

This WooCommerce variation swatches plugin comes with a couple of WordPress filter hooks, which make it customizable for your specific needs.

Some of the examples can be found below.

rudr_sws_get_attribute_meta

This filter hook allows you to change settings of a specific whole attribute (e.g., “Color”, “Size”, etc) depending on a product where its swatches are displayed (its category, tag, ID, or any other information available in the WC_Product object).

$attribute_meta = apply_filters( 'rudr_sws_get_attribute_meta', $attribute_meta, $attribute, $product );
$attribute_metaarray
Contains an array of attribute settings.
swatch_widthint
The width of a swatch of this attribute (in pixels).
swatch_heightint
The height of a swatch of this attribute (in pixels).
swatch_shapestring
The shape of a swatch of this attribute (can be square or round).
show_labelsstring
Whether the labels should be displayed below the swatches (only for product pages) (can be yes or no).
show_pricesstring
Whether the prices should be displayed below the swatches (only for product pages).
$attributestring
The attribute taxonomy name, for example pa_color.
$productWC_Product
A product object for which the swatches of this attribute are displayed.

Example. Only show labels and prices for products in a specific category

This example I actually used in the demo site, for this sample product. If you take a look, it is the only product with color swatches in a bigger size, plus the swatches are displayed along with labels and prices.

How could I achieve that? With this simple code snippet:

add_filter( 'rudr_sws_get_attribute_meta', function( $attribute_meta, $attribute, $product ) {
	
	if( 'pa_color' !== $attribute ) {
		return $attribute_meta;
	}

	$category_id = 1234;
	
	if( in_array( $category_id, $product->get_category_ids() ) {
		$attribute_meta[ 'swatch_width' ] = 70;
		$attribute_meta[ 'swatch_height' ] = 35;
		$attribute_meta[ 'swatch_shape' ] = 'square';
		$attribute_meta[ 'is_show_labels' ] = 'yes';
		$attribute_meta[ 'is_show_prices' ] = 'yes';
	}

	return $attribute_meta;
	
}, 25, 3 );

I also used the following condition, because I didn’t want to change the swatches on product archive pages:

if( ! is_product() || get_queried_object_id() !== $product->get_id() ) {
	return $attribute_meta;
}

As a result, we have a product with a unique design of its variation swatches.

rudr_sws_allow_swatches

This filter hook will help you to allow variation swatches conditionally – for example, only for the shop and archive pages or for specific products only.

$allow = apply_filters( 'rudr_sws_allow_swatches', $allow, $attribute, $attribute_type, $is_single_product, $product );
$attributestring
The attribute taxonomy name, for example pa_color.
$attribute_typestring
The attribute type.
$is_single_productbool
  • true – swatches on single product pages, for the product itself,
  • false – the shop and product category pages, related products, etc.
$productWC_Product
A product object for which the swatches of this attribute are displayed.

Example. Only allow variation swatches on product archive pages (the Shop page, product categories, etc.)

add_filter( 'rudr_sws_allow_swatches', function( $allow, $attribute, $attribute_type, $is_single_product, $product ) {
	
	if( $is_single_product ) {
		$allow = false;
	}
	return $allow;
	
}, 25, 5 );

Of course, do not forget to activate the swatches for product archive pages in the plugin settings as well :)

rudr_sws_{$type}_swatch_html

This filter hook allows you to change the HTML of a particular swatch. For example, you can add some custom HTML tags to it.

The $type variable can have color, image, label, and radio values.

$swatch_html = apply_filters( "rudr_sws_{$type}_swatch_html", $swatch_html, $attribute_term, $attribute_meta, $product );
$swatch_htmlstring
The HTML of a swatch.
$attribute_termWP_Term
An object of a specific attribute term.
$attribute_metaarray
Contains an array of attribute settings.
$productWC_Product
A product object.

Need more help?