워드프레스에서 우커머스 플러그인을 활성화하면 메뉴에 장바구니 아이콘과 내 계정 링크가 표시되는 경우가 있습니다. 워드프레스 메뉴에서 장바구니 아이콘이 표시되는 경우 없애는 방법에 대해 살펴보겠습니다.
목차
테마 옵션에서 장바구니 아이콘 표시 옵션을 비활성화하기
메뉴에 장바구니 아이콘이나 내 계정 (My Account) 페이지 링크가 표시되면 보통 테마 옵션에서 해당 옵션이 설정되어 있을 수 있습니다.
아바다 테마의 메뉴에서 장바구니 아이콘을 제거하기
예를 들어, 베스트셀링 테마인 아바다 (Avada)에서 우커머스를 활성화하면 그림과 같이 장바구니 아이콘이 표시될 수 있습니다.
아바다 테마의 경우 워드프레스 알림판 > Avada > Theme Options > WooCommerce > General WooCommerce에서 우커머스 관련 옵션을 지정할 수 있습니다.
WooCommerce My Account Link in Main Menu (메인 메뉴에 우커머스 내 계정 링크) 옵션을 On으로 설정하면 메인 메뉴에 '내 계정' 링크가 표시됩니다.
WooCommerce Cart Icon in Main Menu (메인 메뉴에 우커머스 장바구니 아이콘) 옵션을 On으로 설정하면 메인 메뉴에 장바구니 아이콘이 표시됩니다. 장바구니가 메뉴에 표시되지 않도록 하려면 이 옵션을 Off로 설정합니다.
보조 메뉴에도 우커머스 내 계정 페이지 링크나 우커머스 장바구니 아이콘을 표시하거나 숨길 수 있습니다.
WooCommerce My Account Link in Secondary Menu (보조 메뉴에 우커머스 내 계정 링크) 옵션을 On을 설정하면 보조 메뉴에 '내 계정' 링크가 표시됩니다.
WooCommerce Cart Icon in Secondary Menu (보조 메뉴에 우커머스 장바구니 아이콘) 옵션을 On으로 설정하면 보조 메뉴에 장바구니 아이콘이 표시됩니다.
아스트라 테마의 메뉴에서 장바구니 아이콘 없애기
Astra 테마를 이용하는 경우 워드프레스 알림판 > 테마 디자인 > 사용자 정의하기 > Header > Primary Menu에서 우커머스 아이콘들을 표시하거나 표시되지 않도록 설정할 수 있습니다.
Last Item in Menu (메뉴에서 마지막 항목) 섹션에 WooCommerce를 선택하면 메인 메뉴의 오른쪽 끝에 장바구니 보기 아이콘이 표시됩니다.
장바구니 아이콘을 없애려면 Last Item in Menu (메뉴에서 마지막 항목)에서 None(없음)을 선택하거나 다른 항목을 선택하시기 바랍니다.
참고로 워드프레스 우커머스 쇼핑몰 사이트의 속도가 마음에 들지 않는 경우 Astra, OceanWP, GeneratePress와 같은 가벼운 테마를 사용하면 속도가 쾌적해질 것입니다.
플러그인을 사용하여 장바구니 아이콘을 표시한 경우
테마에서 장바구니 아이콘을 메뉴에 표시하는 기능을 제공하지 않는 경우 WooCommerce Menu Cart와 같은 플러그인을 사용하여 장바구니 아이콘을 메뉴에 추가할 수 있습니다. 이 플러그인을 사용하면 테마 스타일에 맞게 장바구니 아이콘이 메뉴에 표시됩니다.
플러그인을 사용하여 장바구니 아이콘을 표시한 경우 해당 플러그인을 비활성화/삭제하거나 플러그인 설정에서 장바구니 아이콘이 표시되지 않도록 설정하면 됩니다.
CSS로 장바구니 아이콘을 숨기기
테마 옵션에서 해당 항목을 찾지 못하는 경우 CSS로 강제로 숨길 수 있습니다. 다만, 이 방법을 이용할 경우 장바구니 또는 내 계정 아이콘이 로드되지만 브라우저에서는 표시되지 않습니다.
이 방법을 사용하려면 기본적인 CSS를 이해해야 합니다. 요소를 숨기는 방법은 매우 간단합니다. 다음 문서를 참고해보세요:
https://www.w3schools.com/css/css_display_visibility.asp
Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:
요소를 숨기려면 display 속성을 none으로 설정하면 됩니다. 그러면 요소가 숨겨지고 페이지는 마치 해당 요소가 없는 것처럼 표시됩니다.
기본적인 CSS 사용법을 익히면 레이아웃을 변경하는 데 유용하게 활용할 수 있습니다. 기본적인 CSS 사용법은 생활코딩 강의(무료)를 들어보시기 바랍니다.
워드프레스에서 CSS 코드를 넣는 방법은 다음 글을 참고해보세요.
참고: