> For the complete documentation index, see [llms.txt](https://docs.yaycommerce.com/yayswatches/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.yaycommerce.com/yayswatches/how-it-works/hooks-and-shortcodes.md).

# 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](https://wordpress.org/plugins/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' );
```

2. **Shortcodes**

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

Eg: Display attribute of product ID 21

<figure><img src="/files/RDgV8vhP6EkRuzdXOQbK" alt=""><figcaption><p>Add YaySwatches shortcode to display attribute</p></figcaption></figure>

<figure><img src="/files/JULYvgmlPiEPi5G8FbLZ" alt=""><figcaption><p>Attribute displayed in the front end</p></figcaption></figure>

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

<figure><img src="/files/pWNbSzhTAUKUBfyucKhC" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/X65uqQB9nPTXWDnb5XHn" alt=""><figcaption></figcaption></figure>

3. **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;
},
```

{% hint style="info" %}
These provided hooks and shortcodes are fully functional only in the YaySwatches pro version.
{% endhint %}