fbpx
Want To Add Extra Images Per Product Variation? Download This Free Plugin

Available hooks (add_action) and filters (add_filter) in Pro version

Hi, my client have bought Pro version (lifetime licence).

We need to do some changes for product page, for example add some additional HTML after some of attributes.

We need to know about possible hooks (using by add_action) and filters (using by add_filter) in “Variation Swatches Pro” to do it seamlessly.

Unfortunatelly we can’t find it in documentation.

Hakik Zaman

Hi Adam,

Thanks for reaching out to us.

We need to do some changes for product page, for example add some additional HTML after some of attributes.

Here are the filter hooks you can use to push your HTML for attributes:

> Dual Color:

woo_variation_swatches_duel_color_attribute_template. Example:

add_filter( 'woo_variation_swatches_duel_color_attribute_template', function( $html, $data, $attribute_type, $variation_data ){
return $html .= "<b>Some Text</b>";
}, 10, 4);

> Color:

woo_variation_swatches_color_attribute_template. Example:

add_filter( 'woo_variation_swatches_color_attribute_template', function( $html, $data, $attribute_type, $variation_data ){
return $html .= "<b>Some Text</b>";
}, 10, 4);

> Image:

woo_variation_swatches_image_attribute_template. Example:

add_filter( 'woo_variation_swatches_image_attribute_template', function( $html, $data, $attribute_type, $variation_data ){
return $html .= "<b>Some Text</b>";
}, 10, 4);

> Button:

woo_variation_swatches_button_attribute_template. Example:

add_filter( 'woo_variation_swatches_button_attribute_template', function( $html, $data, $attribute_type, $variation_data ){
return $html .= "<b>Some Text</b>";
}, 10, 4);

> Radio:

woo_variation_swatches_radio_attribute_template. Example:

add_filter( 'woo_variation_swatches_radio_attribute_template', function( $html, $data, $attribute_type, $variation_data ){
return $html .= "<b>Some Text</b>";
}, 10, 4);

I hope this will help.

Thank You

Hi.

Thank You for Your reply.

Those filters allows to add content to each value of atribute. I need filter/hook which allows me to add content to whole section of attribute, not each value inside.

For example:
<table class=”variations” cellspacing=”0″ role=”presentation”>
<tbody>
<tr>
<th class=”label”><label for=”pa_attribute1″>Attribute1</label><span class=”woo-selected-variation-item-name” data-default=””></span></th>
<td class=”value woo-variation-items-wrapper”>
<select style=”display:none” id=”pa_attribute1″ class=”woo-variation-raw-select” name=”attribute_pa_attribute1″ data-attribute_name=”attribute_pa_attribute1″ data-show_option_none=”yes”>
<option value=””>Wybierz opcję</option>
<option value=”value1″ class=”attached enabled”>Value1</option>
<option value=”value2″ class=”attached enabled”>value2</option>
</select>
<ul role=”radiogroup” aria-label=”Attribute1″ class=”single-product-variable-items enabled-large-size wvs-style-squared variable-items-wrapper image-variable-items-wrapper” data-attribute_name=”attribute_pa_attribute1″ data-attribute_values=”[&quot;value1&quot;,&quot;value2&quot;]”>
<li aria-checked=”false” tabindex=”0″ class=”variable-item image-variable-item image-variable-item-value1″ data-title=”Value1″ data-value=”value1″ role=”radio” aria-expanded=”false” data-wvstooltip-out-of-stock=””>
<div class=”variable-item-contents”>
<img class=”variable-item-image” aria-hidden=”true” alt=”Primo 8818″ src=”//localhost:3000/wp-content/uploads/2023/07/Primo-8818-50×50.jpeg” width=”50″ height=”50″>
</div>
</li>
<li aria-checked=”false” tabindex=”0″ class=”variable-item image-variable-item image-variable-item-value2″ data-title=”Value2″ data-value=”value2″ role=”radio” aria-expanded=”false” data-wvstooltip-out-of-stock=””>
<div class=”variable-item-contents”>
<img class=”variable-item-image” aria-hidden=”true” alt=”Value2″ src=”//localhost:3000/wp-content/uploads/2023/09/tkanina-dowolna-50×50.jpg” width=”50″ height=”50″>
</div>
</li>
</ul>

HERE I WANT TO INJECT HTML

</td>
</tr>

OR HERE

<tr>
<th class=”label”><label for=”pa_attribute2″>Attribute2</label><span class=”woo-selected-variation-item-name” data-default=””></span></th>
<td class=”value woo-variation-items-wrapper”>
<select style=”display:none” id=”pa_attribute2″ class=”woo-variation-raw-select” name=”attribute_pa_attribute2″ data-attribute_name=”attribute_pa_attribute2″ data-show_option_none=”yes”>
<option value=””>Wybierz opcję</option>
<option value=”140×200″ selected=”selected” class=”attached enabled”>140x200cm</option>
</select>
<ul role=”radiogroup” aria-label=”Attribute2″ class=”single-product-variable-items wvs-style-squared variable-items-wrapper button-variable-items-wrapper” data-attribute_name=”attribute_pa_attribute2″ data-attribute_values=”[&quot;140×200&quot;]”>
<li aria-checked=”true” tabindex=”0″ class=”variable-item button-variable-item button-variable-item-140×200 selected” data-title=”140x200cm” data-value=”140×200″ role=”radio” aria-expanded=”false” data-wvstooltip-out-of-stock=””>
<div class=”variable-item-contents”>
<span class=”variable-item-span variable-item-span-button”>140x200cm</span>
</div>
</li>
</ul>
</td>
</tr>
</tbody>
</table>

Hakik Zaman

Hi Adam,

Glad to know you found it.

Please let me know if you have more questions.

Thank You