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
squareorround). - show_labelsstring
- Whether the labels should be displayed below the swatches (only for product pages) (can be
yesorno). - 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.