우커머스 상품 이름을 두 줄로 표시하기

우커머스는 워드프레스에서 쇼핑몰을 운영할 때 사용되는 플러그인입니다. 우커머스 상품 이름에 줄 나누기 태그(<br>)를 추가하여 두 줄로 표시되도록 하고 싶은 경우가 있습니다. 그런 경우 아래의 방법으로 테스트해보시기 바랍니다.

우커머스 상품 이름을 두 줄로 표시하기

우커머스 상품 이름이 길면 자연스럽게 여러 줄로 표시됩니다.

위의 그림과 같이 제품 이름 공간이 부족하면 다음 라인으로 자연스럽게 넘어가면서 표시되지만, 제품명 자체는 한 줄입니다. 하지만 상품 이름을 "브랜드명 <br> 상품명"과 같이 강제로 두 라인으로 표시하고 싶은 경우가 있을 수 있습니다.

그런 경우 다음과 같은 코드를 사용 중인 테마의 함수 파일(functions.php)에 추가할 수 있습니다. 그러면 "브랜드명 | 상품명"처럼 입력하면 두 라인으로 표시됩니다.

// 우커머스에서 상품 이름에 줄나누기 추가하기
// "|"를 <br>로 변경
add_filter( 'the_title', 'custom_the_title', 10, 2 );
function custom_the_title( $title, $post_id ) {
    $post_type = get_post_field( 'post_type', $post_id, true );
    if( $post_type == 'product' || $post_type == 'product_variation' )
        $title = str_replace( '|', '<br/>', $title );
}

// 출처 - https://stackoverflow.com/questions/46412614/add-a-line-break-in-woocommerce-product-titles

반드시 차일드 테마를 만들어서 작업하시기 바랍니다. 차일드 테마(자식 테마, 하위 테마)를 이용하지 않고 원래 테마(부모 테마)의 함수 파일에 직접 코드를 넣을 경우 추후 테마가 업데이트 되면 수정 사항과 추가한 사항이 초기화되어 사라지게 됩니다.

그러면 상품 이름에 다음과 같은 형식으로 상품 이름을 입력할 경우...

상점이나 상품 상세 페이지에서는 다음 그림과 같이 "|" 부분에 줄나누기 태그 (<br>)가 삽입되어 두 줄로 표시됩니다. 베스트셀링 테마인 아바다 (Avada) 테마에서 테스트해보니 최신 워드프레스 버전과 우커머스 버전에서 잘 작동하네요.

하지만 장바구니와 결제 페이지, 그리고 주문 페이지에서는 줄나누기가 되지 않고 대신 "|" 기호가 표시됩니다.

장바구니

결제하기 페이지

주문 페이지

마치며

이상으로 워드프레스 우커머스 상품 이름을 두 줄로 표시하는 방법에 대해 살펴보았습니다.

워드프레스에 우커머스를 설치하면 사이트가 무거워질 수 있습니다. 그런 경우 아스트라나 OceanWP와 같은 테마를 사용하면 속도가 빠르게 나올 수 있습니다. 그리고 가급적 설치하는 플러그인 개수도 최소화하는 것이 바람직합니다.

참고

[우커머스 쇼핑몰] 무료 배송이 가능한 경우 다른 배송 방법 숨기기