Hooks and Shortcodes

1. Hooks

• Filter yay_swatches_show_all_pages hook is used to display YaySwatches on a page.

Currently in YaySwatches settings, attributes are displayed only on Single Product Page and Shop/Categories Page. To display YaySwatches on other pages, you can add the following code to Code Snippets or to the file functions.php of your theme.

add_filter( 'yay_swatches_show_all_pages', '__return_true' );

• Filter hook to show/hide term name on variant: yay_swatches_show_term_name_variant_button, yay_swatches_show_term_name_variant_custom, yay_swatches_show_term_name_variant_image

add_filter( 'yay_swatches_show_term_name_variant_button', '__return_true' );
add_filter( 'yay_swatches_show_term_name_variant_custom', '__return_true' );
add_filter( 'yay_swatches_show_term_name_variant_image', '__return_true' );

1. Shortcodes

• [yay-swatches-variant-html]: You can use this shortcode to display YaySwatches by product ID

Eg: Display attribute of product ID 21

Add YaySwatches shortcode to display attribute

Attribute displayed in the front end

• [yay-swatches-variant-loop] shortcode is to show YaySwatches in Products Loop.

1. Custom CSS

• Make some space between the variant name and the image swatch or button

.single-product div.product table.variations .value {
padding-bottom: unset !important;
}

.yay-swatches-wrapper .variations_form.cart .variations .value {
padding-top: 12px;
}

.yay-swatches-swatch {
margin: 0px 16px 10px 0px !important;
}

.yay-swatches-button {
margin-right: 16px !important;
}

• Remove "Clear option" from the front end

.yay-swatches-wrapper .variations_form.cart .variations .reset_variations {
display: none !important;
},

These provided hooks and shortcodes are fully functional only in the YaySwatches pro version.