# 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="https://1685692939-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNRBzBxqo8wmsZqqHcdjE%2Fuploads%2FtS0QOEM68SbYBIl0dP9x%2FYay%20Shortcode%201.png?alt=media&#x26;token=b1544852-39cb-45a9-a1f1-c05816e0b96d" alt=""><figcaption><p>Add YaySwatches shortcode to display attribute</p></figcaption></figure>

<figure><img src="https://1685692939-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNRBzBxqo8wmsZqqHcdjE%2Fuploads%2FkK8C0y80Irf0XRWbNuDO%2Fyayswatches%20shortcode%20in%20front%20end.png?alt=media&#x26;token=3c95615a-b6f2-43af-b70d-aa2dc5009830" 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="https://1685692939-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNRBzBxqo8wmsZqqHcdjE%2Fuploads%2FvAzQ87REtDkjvezwAidW%2FYaySwatches%20shortcode.png?alt=media&#x26;token=fa1b86aa-f127-45ce-b190-398726eff9ef" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1685692939-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNRBzBxqo8wmsZqqHcdjE%2Fuploads%2Fbz3nTlVuug6t4zDYRHLa%2Fyayswatches%20shortcode%20in%20front%20end%202.png?alt=media&#x26;token=c0cee877-2a05-4f9b-a406-855c9f398b75" 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 %}