워드프레스 메뉴에서 장바구니 아이콘을 없애는 방법

워드프레스 정보를 제공하는 블로그 Avada 2020. 4. 21. 00:09 • 댓글:

워드프레스에서 우커머스 플러그인을 활성화하면 메뉴에 장바구니 아이콘과 내 계정 링크가 표시되는 경우가 있습니다. 워드프레스 메뉴에서 장바구니 아이콘이 표시되는 경우 없애는 방법에 대해 살펴보겠습니다.

목차

    테마 옵션에서 장바구니 아이콘 표시 옵션을 비활성화하기

    메뉴에 장바구니 아이콘이나 내 계정 (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

     

    CSS Layout - The display Property

    CSS Layout - The display Property The display property is the most important CSS property for controlling layout. The display Property The display property specifies if/how an element is displayed. Every HTML element has a default display value depending o

    www.w3schools.com

    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 수업 - 생활코딩

    CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어입니다. 화가가 붓을 만드는 법을 알 필요는 없지만, 붓을 만드는 사람보다 붓 질은 훨씬 잘해야 할 것입니다. 붓 질하는 법을 모른다면 표현하고자하는 것을 제대로 표현하는 것이 어려울 것이니까요. CSS는 디지털 컨텐츠를 생산하는 사람들에게는 붓 질과 같은 것이 아닐까 싶습니다. 이 수업에서는 디지털 붓 질을 하는 법을 알려드립니다.  먼저 공부하셔야 할 것 CSS를 공부하기 위해서는 선행해야 할 것이

    opentutorials.org

    워드프레스에서 CSS 코드를 넣는 방법은 다음 글을 참고해보세요.

     

    워드프레스에서 CSS 추가하기 - 워드프레스 기본

    워드프레스 커스터마이징에서 가장 중요한 부분 중 하나가 CSS입니다. CSS를 통해 레이아웃을 완전히 다르게 바꿀 수 있습니다. 하지만 "이 CSS 코드를 워드프레스 시타일시트에 추가하세요"라고 하면 "어떻게 CSS 코드를 추가하나요?"하고 묻는 분들이 간혹 있습니다. 처음 워드프레스를

    www.thewordcracker.com

    참고:

     

    워드프레스 아바다(Avada) 테마 데모 설치 및 제거

    워드프레스 아바다(Avada)는 현재 45만 개 이상 판매된 베스트셀링 테마입니다. 아바다 테마가 Themeforest에서는 가장 많은 판매량을 자랑하고 있으며, 최근 50만 고객을 돌파한 Elegant Themes의 Divi 테마가 아..

    avada.tistory.com