Overview
In the following short video you’ll see the whole process of adding Visual Composer to a Category. Below you’ll find also step-by-step instructions highlighting some details.
Step 1 - Create Field
First of all you need to add Visual Composer field to your Field Group. Refer to this article to see how to add Visual Composer field and this article to see how to create Field Group.
Step 2 - Target field group at category terms
Under Field Group’s location rules, choose: Show this field group if “Taxonomy term” is equal to “category”.
Step 3 - Edit your category content or layout
Now when Field Group created, targeted at category and has Visual Composer field added, you can go to edit the category you want and set your content.
Step 4 - Display your field in category
By default, newly added ACF fields to category won’t be displayed on front-end. You have 2 options:
- Modify category template file
- Add ACF shortcode in category description
Option 1: Modify template file
This option definitely gives you more flexibility, because you precisely control what, how and where to display. To render Visual Composer field, you do it absolutely in the same way as you display all other ACF fields.
Note: Since this field will be rendered on taxonomy term page, you’ll need to set post id properly. See this post for more details.
<?php $queried_object = get_queried_object(); echo get_field( 'category_custom_content', $queried_object->taxonomy.'_'.$queried_object->term_id ); ?>
Option 2: Add ACF shortcode in category description
You’ll need to add to each category where you want this field to be displayed. Note the post_id syntax {taxonomy}_{category_id}
[
acf field="category_custom_content" post_id="category_1"]
If you want to add to woocommerce product category, then use “product_cat” slug instead:
[
acf field="category_custom_content" post_id="product_cat_1"]
It’s possible that your theme doesn’t process shortcodes in category descriptions. In this case, you’ll need to add the following code in your functions.php file
add_filter( 'category_description', 'my_category_description' ); function my_category_description( $desc, $cat_id ) { return do_shortcode( $desc ); }