플러그인 없이 WooCommerce 제품 범주에 사용자 정의 필드 추가

일반적으로 ACF 플러그인과 같은 플러그인 사용을 고려하고 싶을 수 있지만 웹 사이트를 가볍게 유지하고 싶으므로 일부 코드를 사용하여 이를 수행해 보겠습니다.

우리는 2개의 필드를 추가할 것입니다. 하나는 간단한 텍스트 입력이고 다른 하나는 선택 드롭다운입니다. 데모용으로 배경색(텍스트 필드) 및 프런트엔드 가시성(선택 드롭다운)과 같은 값을 저장하므로 원하는 정보를 자유롭게 저장할 수 있습니다.

새 범주가 생성되면 필드 표시

여기서는 product_cat_add_form_fields() 후크를 사용하여 사용자 정의 필드의 html을 추가합니다. 여기서 가장 중요한 것은 양식 필드의 이름입니다. 이름을 사용하여 이러한 필드를 저장하기 때문입니다.

<?php
// show custom fields when new category is created
function add_custom_field_to_prod_category() { ?>
    <div class="form-field">
        <label for="term_meta[cat_bg_color]">Background Color</label>
        <input type="text" name="term_meta[cat_bg_color]" id="term_meta[cat_bg_color]" value="" />
        <p class="description">You can use rgb() or hexadecimal style.</p>
    </div>
    <div class="form-field">
        <label for="term_meta[cat_visiblity]">Visibility</label>
        <select id="term_meta[cat_visiblity]" name="term_meta[cat_visiblity]">
            <option value="no" selected>No</option>
            <option value="yes">Yes</option>
        </select>
    </div>
<?php }
add_action('product_cat_add_form_fields', 'add_custom_field_to_prod_category', 10, 2);

범주를 편집할 때 필드 표시

또한 이전 범주를 편집할 때 사용자 지정 필드를 표시해야 합니다. 이번에는 저장된 데이터로 미리 채워야 합니다. get_option() 함수로 이미 저장된 데이터를 가져올 수 있습니다.

<?php
// show custom fields when category is edited
function edit_custom_field_to_prod_category($term) {
    $t_id = $term->term_id;
    // store meta values to autofill form fields
    $term_meta = get_option("taxonomy_$t_id");
    ?>
    <tr class="form-field">
        <th scope="row" valign="top">
            <label for="term_meta[cat_bg_color]">Background Color</label>
        </th>
        <td>
            <input type="text" name="term_meta[cat_bg_color]" id="term_meta[cat_bg_color]" value="<?php echo esc_attr( $term_meta['cat_bg_color'] ) ? esc_attr( $term_meta['cat_bg_color'] ) : ''; ?>" />
            <p class="description">You can use rgb() or hexadecimal style.</p>
        </td>
    </tr>
    <tr class="form-field">
        <th scope="row" valign="top">
            <label for="term_meta[cat_visiblity]">Visible</label>
        </th>
        <td>
            <select name="term_meta[cat_visiblity]" id="term_meta[cat_visiblity]">
                <option value="no" <?php echo $term_meta['cat_visiblity'] == 'no' ? 'selected' : ''; ?>>No</option>
                <option value="yes" <?php echo $term_meta['cat_visiblity'] == 'yes' ? 'selected' : ''; ?>>Yes</option>
            </select>
            <p class="description">Toggle to make it visible as colored box.</p>
        </td>
    </tr>
<?php
}
add_action('product_cat_edit_form_fields', 'edit_custom_field_to_prod_category', 10, 2);

사용자 정의 필드 저장

이제 마지막으로 동일한 콜백 함수와 두 가지 작업에 연결하여 모든 사용자 정의 필드를 저장합니다.

<?php
// save custom fields callback function
function save_custom_field_to_prod_category( $term_id ) {
    if ( isset( $_POST['term_meta'] ) ) {
        $t_id = $term_id;
        $term_meta = get_option("taxonomy_$t_id");
        $cat_keys = array_keys( $_POST['term_meta'] );
        foreach ( $cat_keys as $key ) {
            if ( isset ( $_POST['term_meta'][$key] ) ) {
                $term_meta[$key] = $_POST['term_meta'][$key];
            }
        }
        // save the option array
        update_option("taxonomy_$t_id", $term_meta);
    }
}
add_action('edited_product_cat', 'save_custom_field_to_prod_category', 10, 2);
add_action('create_product_cat', 'save_custom_field_to_prod_category', 10, 2);

저장된 데이터 가져오기

다음은 사용자 지정 필드에 저장된 데이터를 가져오는 방법의 예입니다. 충분히 쉬웠죠?

다음에 제품 카테고리에 사용자 정의 필드를 추가하기 위해 플러그인을 사용하는 것에 대해 두 번 생각할 것입니다.

<?php
$all_categories = get_terms(
    array(
        'taxonomy' => 'product_cat',
        'orderby' => 'name',
        'order' => 'asc',
        'hide_empty' => false,
    )
);
?>
<ul>
    <?php foreach ($all_categories as $category) { ?>
        <?php $term_meta = get_option("taxonomy_$category->term_id"); ?>
        <li>
            <a href="<?php echo get_term_link($category->term_id); ?>">
                <?php echo $category->name; ?> - <?php echo $term_meta['cat_bg_color']; ?> - <?php echo $term_meta['cat_visiblity']; ?>
            </a>
        </li>
    <?php } ?>
</ul>