Divi에서 제품 페이지에 Woo 알림을 추가하는 방법

Rifat Feb 18, 2022

수락과 감사는 모든 전자 상거래 페이지의 중요한 구성 요소입니다. 사용자가 상품 구매 버튼을 클릭한 후 발생한 일에 대해 문의합니다. 또한 고객은 장바구니의 내용을 볼 수 있는 간단한 방법을 원합니다. WooCommerce 제품 페이지의 경우 Divi Woo 알림 모듈은 이러한 정확한 기능을 제공합니다. 이 기사에서는 Divi 제품 페이지에 Woo Notice 모듈을 추가하고 스타일을 지정하는 방법을 보여줍니다. 또한 하나가 필요한 이유와 최적의 장소에 대해 설명합니다.

시작하겠습니다.

디자인 미리보기

이것이 우리의 디자인이 보일 것입니다. 제품 페이지 상단에는 공지사항이 언제 표시되는지 게시판이 있습니다.

A Woo Notice 모듈이 하는 일

Woo Notice 모듈은 두 가지 중요한 작업을 수행합니다. 항목이 장바구니에 성공적으로 추가되었음을 사용자에게 알립니다. 또한 장바구니에 있는 제품을 볼 수 있는 장바구니에 대한 링크가 포함되어 있습니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

Woo 알림 모듈에는 Woo 제품 페이지, 장바구니 페이지 및 결제 페이지에 대한 설정이 포함되어 있습니다. other옵션은 장바구니의 상태와 쿠폰에 대한 정보를 표시합니다. 세 번째 섹션에는 로그인 영역과 할인 필드가 있습니다. 첫 번째 옵션인 — 제품 페이지로 이동하겠습니다.

현재 선택된 제품, 가장 최근에 추가된 제품 또는 목록의 모든 제품에 대해 표시되도록 설정할 수 있습니다.

다른 Woo 모듈과 달리 Woo 알림 모듈은 특정 상황에서만 페이지에 나타납니다. 사용자가 장바구니에 항목을 추가한 후에만 표시됩니다. 이 예에서는 장바구니에 항목을 추가하지 않고 제품 페이지를 표시합니다.

고객이 장바구니에 상품을 추가하면 알림 패널이 나타납니다.

Woo 알림 모듈 추가

Divi Builder의 모든 WooCommerce 모듈의 경우와 마찬가지로 Woo Notice 모듈은 WooCommerce가 설치된 경우에만 사용할 수 있습니다. 모듈을 삽입하려면 회색 + 아이콘을 클릭하고 검색 창에 Woo Notice를 입력한 다음 모듈을 선택합니다. Woo Notice 모듈은 많은 Divi 제품 페이지 디자인에 포함되어 있습니다.

Woo 알림 모듈 배치

Woo Notice 모듈은 페이지 상단의 이동 경로 아래에 이상적으로 배치됩니다. 이것은 사용자가 이러한 유형의 정보를 볼 것으로 예상되는 위치이기 때문에 사용자에게 눈에 띄게 될 것입니다.

여기에서 모듈이 제품 정보 위에 배치된 것을 볼 수 있습니다.

Woo 통지 모듈 스타일링

모듈은 이미 사용 중인 템플릿에 스타일이 지정되어 있습니다. 나만의 스타일을 만들고 싶은 경우 이 스타일을 검토한 다음 레이아웃 팩의 디자인 대기열과 Fashion Store 레이아웃 팩의 머리글 및 바닥글 템플릿을 사용하여 다르게 스타일을 지정합니다. 사용자가 마우스를 가져가면 색상이 바뀌는 버튼이 있습니다.

먼저 배경색을 변경합니다.

  • 배경: #ffffff

디자인 탭으로 이동하여 다음과 같이 변경합니다.

  • 제목 글꼴: Didact Gothic
  • 검정색
  • 줄 높이: 2em

버튼까지 아래로 스크롤하여 외부 디자인과 일치하도록 합니다.

  • 사용 버튼: 예
  • 텍스트 크기: 12px
  • 텍스트 색상: #ffffff
  • 배경색: #000000

이제 호버 섹션으로 이동하여 일부 조정을 수행합니다.

  • 호버 텍스트 색상: #000000
  • 호버 배경색: #f8ded5

그런 다음 테두리를 다음과 같이 변경합니다.

  • 테두리 너비: 0px
  • 테두리 반경: 0px
  • 문자 간격: 3px
  • 글꼴 두께: 굵게
  • 글꼴 스타일: TT

버튼에 약간의 스타일을 적용하십시오.

  • 버튼 아이콘 표시: 예
  • 아이콘: 작은 오른쪽 화살표
  • 버튼에 대한 호버에 아이콘만 표시: 예

다음으로 버튼 패딩을 추가합니다. 이것은 모듈의 패딩이 아님을 기억하십시오. We’는 잠시 후에 추가할 것입니다.

  • 버튼 패딩: 15px(상단, 하단), 30px(좌우)

간격 섹션에 값을 조정합니다.

  • 여백: 0em(모든면)
  • 패딩: 15px(모든 면)

행 설정

다음으로 Row 설정을 약간 변경합니다.

  • 사용자 정의 거터 너비 사용: 예
  • 거터 폭: 1
  • 너비: 94%

마지막으로 간격으로 내려가 이 값을 변경합니다.

  • 패딩: 상단 20px, 하단 10px

우 알림 모듈에 사용자 정의 스타일

그런 다음 처음부터 Woo 알림 모듈에 대한 또 다른 디자인을 만들어 보겠습니다. 이를 위해 원본을 지우고 우리 것으로 교체합니다. 회색 추가 기호를 클릭하고 검색한 다음 추가하여 Woo Breadcrumbs 모듈 아래의 맨 위 행에 Woo 알림을 추가합니다. 이것을 만들기 위해 레이아웃에서 영감을 얻습니다. 원래 행을 재사용하므로 해당 매개변수는 이전 예의 매개변수와 동일합니다.

Woo Notice 설정에서 그라디언트 배경을 추가하고 다음과 같이 사용자 지정합니다.

  • 첫 번째 그라디언트: #ffffff
  • 두 번째 그라디언트: #f8ded5
  • 기울기 방향: 90deg
  • 시작 위치: 50%
  • 끝 위치: 50%

디자인 탭에서 아래와 같이 텍스트 설정을 변경합니다.

  • 제목 글꼴: Didact Gothic
  • 색상: #000000
  • 텍스트 크기: 데스크톱의 경우 20px, 전화의 경우 15px
  • 줄 높이: 2em

버튼 스타일을 변경합니다. 텍스트 크기와 색상을 조정합니다.

  • 버튼에 사용자 정의 스타일 사용: 예
  • 텍스트 크기: 12px(전화의 경우 10px)
  • 텍스트 색상: #000000
  • 배경색: #f7ee8

호버 옵션으로 이동하여 아래와 같이 설정을 변경합니다.

  • 호버 배경색: #d8dad5

테두리 설정으로 이동하여 다음 변경을 수행합니다.

  • 테두리 너비: 1px
  • 테두리 반경: 30px
  • 문자 간격: 3px
  • 글꼴 두께: 굵게
  • 글꼴 스타일: TT
  • 버튼 아이콘 표시: 예
  • 아이콘: 작은 오른쪽 화살표
  • 버튼에 대한 호버에 아이콘만 표시: 예

다음으로 we’ll은 버튼에 패딩을 추가해야 합니다.

  • 버튼 패딩: 15px(위, 아래), 30px(왼쪽, 오른쪽)

마지막으로 테두리까지 아래로 스크롤합니다. 그리고 모서리를 둥글게 만듭니다.

  • 둥근 모서리: 40px(모든 면)

최종 결과

다음은 디자인의 최종 출력입니다.

마무리 생각

이것으로 WooCommerce 알림 모듈의 스타일을 지정하고 Divi 제품 페이지 템플릿에 통합하는 방법에 대한 검토가 끝났습니다. 이 모듈은 사용자가 볼 것으로 예상되는 풍부한 정보를 사용자에게 제공합니다. 이것은 그들이 원하는 응답을 제공합니다. 제품이 장바구니에 담겼다는 알림을 즉시 받고 간편하게 볼 수 있습니다. 이 모듈은 사용이 간편하며 WooCommerce Divi 제품 페이지 템플릿의 상단 가장자리에 있습니다.