워드프레스 Flatsome 테마 로그인 팝업 비활성화하기

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

Flatsome 테마는 워드프레스에서 쇼핑몰 구축 시에 사용할 수 있는 우커머스 전용 테마입니다. 이 테마는 꾸준히 Top 10 테마 리스트에 이름을 올리면서 인기를 얻고 있습니다. 플랫섬 테마에서 내 계정 아이콘을 클릭하면 로그인 팝업이 표시됩니다. 로그인 팝업을 비활성화하는 방법에 대해 살펴보겠습니다.

워드프레스 Flatsome 테마 로그인 팝업 비활성화하는 방법

Flatsome 테마의 '내 계정' 옵션

Flatsome 테마에서는 워드프레스 관리자 페이지 > 테마 디자인 > 사용자 정의하기 > Header > Account에서 내 계정 아이콘과 라벨을 표시할지 여부를 설정할 수 있습니다.

워드프레스 Flatsome 테마의 '내 계정' 옵션

Icon Style (아이콘 스타일)에서 메뉴에 표시할 '내 계정' 아이콘 스타일을 지정할 수 있습니다. 그리고 Show label (레이블 표시)을 체크하면 아이콘과 함께 레이블(예: "내 계정")이 표시됩니다.

또한, Show "Register" label ("회원가입" 레이블 표시)을 체크하면 비로그인 사용자에게 "회원가입" 섹션이 함께 표시됩니다. 게스트 사용자가 내 계정 페이지에서 회원가입이 가능하도록 허용하려면 우커머스 > 설정으로 이동하여 계정 및 개인정보 탭의 계정 생성 섹션에서 고객이 "내 계정" 페이지에서 계정을 만들 수 있습니다. 옵션의 체크를 선택하면 됩니다.

우커머스 내 계정 페이지에서 계정 생성 허용

비회원 결제 기능을 허용하려면 비회원 결제 섹션의 이 페이지에서 고객이 계정 없이 주문할 수 있습니다. 옵션을 체크하면 됩니다.

회원 가입을 유도하는 것이 재구매로 이어질 가능성이 높을 것입니다. 회원가입에 대한 거부감이 있는 사용자들을 위해 비회원 결제 기능을 활성화할 수 있습니다. 비회원 결제를 허용한 겨우 비회원으로 주문을 한 후에 회원으로 가입하도록 유도하는 좋습니다. 이 경우 Thank You 페이지를 활용할 수 있습니다("우커머스용 맞춤형 Thank you 페이지 플러그인 - YITH Custom Thank You Page" 참고).

하지만 우리나라에서는 쇼핑몰에서 상품을 구매할 때 회원가입하는 것에 대하여 거부감이 덜하고 당연하게 생각(?)하는 경향이 있기 때문에 비회원 결제 기능을 비활성화해도 될 것 같다는 생각이 드네요.

위와 같이 Flatsome 테마의 Account 옵션을 설정하면 메뉴에 내 계정 아이콘이 (설정에 따라 라벨과 함께) 표시되고, 비로그인 사용자가 아이콘을 클릭하면 팝업 창으로 로그인 섹션 또는 로그인/회원가입 섹션이 표시됩니다. (로그인 사용자가 '내 계정' 아이콘을 클릭하면 곧바로 '내 계정' 페이지로 이동합니다.)

워드프레스 Flatsome 테마 로그인/회원가입 팝업

이렇게 팝업으로 표시되는 형식을 사용자들이 많이 원하기 때문에 로그인 팝업 기능을 Flatsome 테마에서 제공하는 것으로 보입니다.

로그인/회원가입 팝업 비활성화하기

개인적으로는 이런 방식이 무난한 것 같지만, 로그인 팝업을 비활성화하고 곧바로 내 계정 페이지가 표시되도록 하기를 원하는 사용자들이 드물지만 있습니다. 그런 경우, wp-content/themes/flatsome/template-parts/header/partials 폴더 아래의 element-account.php 파일을 찾아서 다름 라인을 삭제하면 됩니다.

<?php if( get_theme_mod('account_login_style','lightbox') == 'lightbox' && !is_checkout() && !is_account_page() ) echo 'data-open="#login-form-popup"'; ?>

하지만 이 방법을 이용하여 테마 파일을 수정하면 추후 테마 업데이트 시에 수정 사항이 사라집니다. 다른 방법으로 자바스크립나 jQuery를 사용하여 data-open 속성을 제거하는 것을 고려해볼 수 있습니다. 예를 들어, 다음과 같은 코드 스니펫을 차일드 테마 내의 함수 파일(functions.php)에 추가할 수 있습니다.

// 플랫섬 테마에서 로그인 팝업 비활성화하기
 add_action('wp_footer', 'remove_data_open');
function remove_data_open() { ?>
<script>
jQuery(".account-item a").removeAttr("data-open");
</script>
<?php
}

(위의 코드는 예시용일 뿐입니다. 더 좋은 코드가 있으면 댓글로 알려주시기 바랍니다.)

꼭 로그인 팝업을 비활성화하고 싶은 경우 위의 방법을 이용할 수 있습니다.

워드프레스에서 제공하는 로그인/회원가입 페이지가 마음에 들지 않으면 커스텀 로그인 페이지 플러그인을 사용하면 효과적일 수 있습니다. 플러그인을 사용하면 로그인 페이지에 원하는 배경 이미지를 추가할 수 있고 회사 로고를 쉽게 표시할 수 있습니다.

마치며

Flatsome 테마는 다목적 우커머스 테마로서 쇼핑몰과 함께 회사 소개 사이트, 블로그 등을 만들고자 하는 경우에도 활용할 수 있습니다. 제한적이지만 Flatsome에서 제공하는 블로그 레이아웃을 이용하면 심플한 블로그 사이트도 함께 운영할 수 있습니다.

블로그만을 염두에 두고 있다면 이런 테마보다는 유명한 뉴스페이퍼나 혹은 이 블로그에 사용되고 있는 GeneratePress 테마나 다른 블로그용 테마를 사용하는 것이 더 적합할 수 있지만, 쇼핑몰을 함께 운영하려는 경우 Flatsome을 하나의 선택지로 고려해볼 수 있습니다. (또는, 아바다, 엔폴드 등의 다목적 테마를 활용하는 것도 하나의 방법일 수 있습니다.)

참고



2 개 댓글

  1. 안녕하세요!
    https://makemoneyskills.com/
    이 웹사이트에 적용된 테마가 무엇인지 알고 싶습니다!!
    테마를 다 찾아봤는데 비슷한 것이 잘 없네요. 특히 모바일에서 접속했을 때 다른 테마들과 완전히 다릅니다.ㅠㅠ

    응답
    • 안녕하세요, 이석민님.

      해당 사이트를 살펴보니 평범하네요.

      마음에 드는 무료 또는 유료 테마를 사용하여 커스텀하면 될 것 같습니다.

      모바일에서 모양은 CSS로 조정 가능합니다. 모바일에서는 글 요약문이 표시되지 않네요. CSS를 사용하여 숨길 수 있습니다.

      이 블로그에 사용 중인 GeneratePress 테마로도 어렵지 않게 비슷하게 만들 수 있을 것입니다.

      https://www.thewordcracker.com/basic/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%A6%AC%EB%89%B4%EC%96%BC-generatepress-%ED%85%8C%EB%A7%88/

      기본적인 CSS를 익히면 도움이 될 것입니다.

      응답