Formatting replacement value in Dynamic Shortcode Values

Each replacement value used in Visual Composer  editor can be adjusted with this hook "cptemplates/dynamic_shortcode_values/get_{name}_value", where {name} corresponds the current replacement value.

For example, you want to output category links of the current WooCommerce product. To do this, you configure Dynamic Shortcode Values like shown on the following screenshot:

This will render comma-separated product category links as shown on the next screenshot:

Now if you want to list categories as a vertical list, instead of comma-separated links, you need to add a filter to your functions.php file. The complete filter name in this case will be "cptemplates/dynamic_shortcode_values/get_post_value" and the code may look like this:

add_filter( "cptemplates/dynamic_shortcode_values/get_post_value", function( $value, $name ) {

switch ( $name ) {
case 'post_terms_product_cat_links': // Check if this is the right replacement call
$links = explode( ',', $value ); // Explode comma-separated links
$links = array_map( function( $item ) { // Loop through links
return sprintf( '
<ul>
 	<li>%s</li>
</ul>
', trim( $item ) ); // Wrap links with li tag
}, $links );
return sprintf( '
<ul class="product-categories-list">%s</ul>
', implode( '', $links ) ); // Return complete list
break;
}

return $value;
}, 10, 2 );

Now the list rendered is vertical:

With a bit of CSS, you make remove bullets and add additional styles.

.product-categories-list li {
list-style: none;
}

How do you know all these replacement names to write filters and case statements?

The simple way would be to switch editor to classic mode to see the shortcodes. In the example above, this shortcode has been used

[vc_column_text cptdsv="text:__categories_list__=post:post_terms_product_cat_links:remove_shortcode"]Product Categories: __categories_list__[/vc_column_text]

If you look at cptdsv attribute there will be all these names after the equal sign:

  • post: replacement value name
  • post_terms_product_cat_links: replacement value function name

Recent Posts