Divi 제품 페이지 템플릿에 Woo 알림 모듈을 추가하는 방법

확인 및 피드백은 모든 전자 상거래 페이지에서 중요한 요소입니다. 사용자는 제품을 구매하기 위해 버튼을 클릭한 후 어떤 일이 일어났는지 알고 싶어합니다. 그들은 또한 장바구니에 담긴 상품을 쉽게 볼 수 있는 방법을 원합니다. Divi Woo 알림 모듈은 WooCommerce 제품 페이지에 다음과 같은 정확한 기능을 제공합니다. 이 기사에서는 Divi 제품 페이지에 Woo Notice 모듈을 추가하고 스타일을 지정하는 방법을 알아봅니다. 또한 하나가 필요한 이유와 추가하기 가장 좋은 위치에 대해서도 설명합니다.

시작하자.

시사

먼저 무엇을 만들 것인지 살펴보겠습니다.

데스크탑의 Woo 알림 모듈

모바일의 Woo 알림 모듈

WooCommerce 제품 페이지 템플릿 다운로드

먼저 Divi Theme Builder용 WooCommerce 제품 페이지 템플릿을 가져와 보겠습니다. 처음부터 만들거나 우아한 테마 블로그에서 다운로드할 수 있습니다. 블로그에서 "제품 페이지 템플릿"을 검색하고 압축 파일을 다운로드합니다. 저는 Divi의 옷가게 레이아웃 팩용 무료 제품 페이지 템플릿을 사용하고 있습니다.

다음으로 파일의 압축을 풉니다. Divi 테마 빌더로 가져오려면 WordPress 대시보드에서 Divi > 테마 빌더 로 이동하고 이식성 을 선택하고 가져오기 탭을 클릭하고 JSON 파일 로 이동하여 선택하고 Divi 테마 빌더 템플릿 가져오기 를 클릭합니다. 설정을 저장 합니다. 파일은 모든 제품 페이지에 자동으로 할당됩니다.

1. 디비
2. 테마 빌더
3. 휴대성
4. 수입
5. 파일 선택
6. Divi 테마 빌더 템플릿 가져오기
7. 구하다

Woo Notice 모듈이 하는 일

Woo Notice 모듈은 두 가지 중요한 작업을 수행합니다.

1 – 사용자가 장바구니에 항목을 성공적으로 넣었다는 피드백을 제공합니다.

2 – 장바구니에 있는 항목을 볼 수 있는 장바구니에 대한 링크를 제공합니다.

Woo 알림 모듈에는 Woo 제품 페이지, 장바구니 페이지 및 결제 페이지에 대한 옵션이 있습니다. 두 번째 옵션은 장바구니 상태 및 쿠폰 정보를 표시합니다. 세 번째는 쿠폰 필드와 함께 로그인 필드를 보여줍니다. 첫 번째 옵션인 제품 페이지 를 사용하겠습니다.

현재 제품, 최신 제품 또는 목록에서 선택한 모든 제품에 대해 표시하도록 할 수 있습니다.

다른 Woo 모듈과 달리 Woo 알림 모듈은 특정 조건에서만 페이지에 표시됩니다. 사용자가 장바구니에 제품을 추가한 경우에만 표시됩니다. 이 예는 제품이 장바구니에 추가되지 않은 경우의 제품 페이지를 보여줍니다.

제품이 장바구니에 추가되면 모듈이 나타납니다.

Woo 알림 모듈 추가

Divi Builder의 모든 Woo 모듈과 마찬가지로 Woo 알림 모듈은 WooCommerce가 설치된 경우에만 옵션입니다. 모듈을 추가하려면 회색 더하기 아이콘 을 클릭하고 Woo Notice 를 검색한 후 모듈을 선택합니다. 많은 Divi 제품 페이지 템플릿에는 Woo Notice 모듈이 포함되어 있습니다.

Woo 알림 모듈을 배치할 위치

Woo Notice 모듈의 가장 좋은 위치 는 페이지 상단 , 이동 경로 아래입니다. 이것은 사용자에게 눈에 띄고 이러한 유형의 정보를 볼 것으로 기대하는 위치입니다.

이 와이어프레임 보기에서 모듈이 제품 정보 위에 배치된 것을 볼 수 있습니다.

Woo 알림 모듈 스타일 지정 방법

내가 사용하는 템플릿에는 이미 스타일이 지정된 모듈이 있습니다. 자신만의 스타일을 추가하려는 경우 이 스타일을 살펴보고 레이아웃 팩의 디자인 대기열과 옷가게 레이아웃 팩의 머리글 및 바닥글 템플릿을 사용하여 다른 방식으로 스타일을 지정합니다. 마우스오버 시 색상을 변경하는 버튼이 포함되어 있습니다.

먼저 배경을 흰색으로 만듭니다.

• 배경: #ffffff

디자인 탭

디자인 탭을 선택하고 제목 글꼴로 Didact Gothic 을 선택합니다. 글꼴을 검정색으로 만들고 Line Height를 2em으로 설정합니다.

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

버튼 스타일

버튼까지 아래로 스크롤하고 사용자 정의 스타일 을 활성화합니다. 텍스트 크기를 12px로 설정합니다. 바탕 화면 옵션의 경우 텍스트 색상을 흰색으로, 배경을 검정색으로 설정합니다.

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

호버 옵션 을 선택하고 텍스트 색상을 검정색으로, 배경색을 #f8ded5로 설정합니다.

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

테두리 너비 와 반경 을 0px로, 글자 간격 을 3px로, 글꼴 두께 를 굵게, 글꼴 스타일 을 TT로 설정합니다.

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

버튼 아이콘 을 표시하려면 선택하고, 오른쪽 화살표를 선택하고, 호버링할 때만 화살표를 표시하도록 선택합니다.

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

다음으로, 텍스트 주위에 공간을 주기 위해 버튼 패딩 을 추가해야 합니다. 위쪽과 아래쪽에 15px, 왼쪽과 오른쪽에 30px를 추가합니다. 이것은 모듈의 패딩이 아닙니다. 잠시 후 추가하겠습니다.

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

간격 까지 아래로 스크롤합니다. 모든 면에 0em 여백을 추가하고 모든 면에 15px 패딩을 추가합니다. 이것이 기본 설정입니다. 설정을 닫습니다.

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

행 설정

다음으로 Row 설정 을 약간 조정해야 합니다. 설정을 열고 디자인 탭을 선택합니다. 사용자 여백 너비 사용을 선택합니다. 거터 너비를 1로, 너비를 94%로 설정합니다.

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

마지막으로 Spacing 까지 아래로 스크롤하여 상단에 20px 패딩 을 추가하고 하단에 10px 패딩을 추가합니다. 설정을 닫고 작업을 저장합니다.

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

Woo 알림 모듈의 또 다른 사용자 정의 스타일

다음으로 Woo Notice 모듈을 처음부터 추가하고 스타일을 지정해 보겠습니다. 이를 위해 원본을 삭제하고 우리 고유의 것을 추가합니다. 회색 더하기 아이콘 을 클릭하고 Woo Notice 를 검색하여 Woo Breadcrumbs 모듈 아래의 맨 위 행에 추가합니다. 이것을 디자인하기 위해 우리는 레이아웃의 아이디어를 사용할 것입니다. 원본과 동일한 행을 사용하므로 해당 설정은 이전 예와 동일합니다.

Woo Notice 설정에서 배경 설정까지 아래로 스크롤하고 그라디언트 를 선택합니다. 첫 번째 색상을 흰색으로 설정하고 두 번째 색상을 #f8ded5로 설정합니다. 그라디언트 방향은 90도로 설정하고 시작 및 종료 위치는 50%로 설정해야 합니다. 이렇게 하면 제품 섹션의 미러인 색상 디자인이 제공됩니다.

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

디자인 탭

그런 다음 디자인 탭을 선택하고 제목 글꼴로 Didact Gothic 을 선택합니다. 글꼴은 검정색, 바탕 화면 크기는 20px, 전화 크기는 15px, Line Height는 2em으로 설정합니다.

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

버튼 스타일

버튼까지 아래로 스크롤하고 사용자 정의 스타일 사용 을 선택하십시오. 데스크톱의 경우 텍스트 크기를 12px로 설정하고 전화기의 텍스트 크기를 10px로 설정합니다. 바탕 화면 옵션의 경우 텍스트 색상을 검정색으로, 배경을 #f7eee8로 설정합니다.

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

배경색 으로 호버 옵션 을 선택하고 #d8dad5로 설정합니다.

• 호버 배경색: #d8dad5

국경

테두리 너비 를 1px, 반경 을 30px, 글자 간격 을 3px, 글꼴 두께 를 굵게, 글꼴 스타일 을 TT로 설정합니다. 버튼 아이콘 설정을 기본값으로 둡니다. 그러면 마우스 오버 시 아이콘이 표시되고 기본 오른쪽 화살표가 포함됩니다.

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

다음으로, 버튼 텍스트 주변의 버튼 크기를 늘리기 위해 버튼 패딩 을 추가해야 합니다. 위쪽과 아래쪽에 15px, 왼쪽과 오른쪽에 30px를 추가합니다.

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

마지막으로 Border 까지 아래로 스크롤합니다. 모든면에 40px를 추가하십시오. 이것은 레이아웃 디자인과 일치하는 둥근 모듈을 제공합니다. 설정을 닫고 작업을 저장합니다.

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

결과

다음은 데스크탑과 모바일에서 Woo Notice 모듈이 어떻게 보이는지 보여줍니다.

데스크탑의 Woo 알림 모듈

모바일의 Woo 알림 모듈

마무리 생각

Divi 제품 페이지 템플릿에 Woo 알림 모듈의 스타일을 지정하고 추가하는 방법을 살펴보았습니다. 이 모듈은 사용자에 대한 많은 정보를 추가하며 사용자는 이 정보를 볼 것으로 예상합니다. 이것은 그들이 기대하는 피드백을 제공합니다. 그들은 제품이 장바구니에 추가되었음을 즉시 알 수 있으며 장바구니를 쉽게 볼 수 있습니다. 이 모듈은 사용하기 쉽고 모든 WooCommerce Divi 제품 페이지 템플릿 상단에 포함되어야 합니다.

우리는 당신의 의견을 듣고 싶습니다. Divi 제품 페이지 템플릿에서 Woo Notice 모듈을 사용합니까? 의견에 알려주십시오.