WooCommerce에서 사용자 정의 장바구니에 추가 버튼을 추가하는 방법

WooCommerce에서 사용자 정의 장바구니에 추가 버튼을 추가하는 방법을 배우고 싶으십니까?

WooCommerce 스토어의 버튼을 사용자 정의하면 관심을 끌 수 있고 전환율과 매출을 높일 수 있습니다.

이 기사에서는 WooCommerce에서 사용자 정의 장바구니에 추가 버튼을 추가하는 방법을 단계별로 보여줍니다.

WooCommerce 장바구니에 담기 버튼을 커스터마이징해야 하는 이유는 무엇입니까?

장바구니에 담기 버튼을 편집하면 판매하는 WooCommerce 제품에 맞추는 데 도움이 됩니다. 기본 장바구니 버튼을 고수하면 제품 유형과 완전히 관련이 없을 수 있습니다.

예를 들어 장바구니에 담기 텍스트를 변경하고 여러 제품에 대한 아이콘이나 확인란으로 바꿀 수 있습니다. 또는 버튼 색상을 변경하여 사이트에서 더 눈에 띄도록 할 수 있습니다.

체크아웃 페이지, 카테고리, 장바구니 페이지와 같은 WooCommerce 사이트의 다른 곳에 장바구니 버튼을 표시할 수도 있습니다.

위의 작업을 수행하려면 번거로움을 최소화하면서 장바구니에 추가 버튼을 쉽게 사용자 지정할 수 있는 방법이 필요합니다.

WooCommerce에서 사용자 정의 장바구니에 추가 버튼을 추가하는 방법

운 좋게도 WooCommerce 사용자 정의 장바구니에 추가 버튼을 만드는 2가지 방법을 공유합니다. 첫 번째 방법은 쉽고 강력한 WordPress 플러그인을 사용하고 두 번째 방법은 플러그인 없이 수동으로 장바구니 버튼을 사용자 정의하는 방법을 보여줍니다.

방법 1: SeedProd로 사용자 정의 장바구니에 추가 버튼 추가

첫 번째 방법으로 WordPress용 최고의 웹 사이트 빌더인 SeedProd를 사용합니다.

이 강력한 플러그인에는 코드 없이 웹사이트의 모든 부분을 사용자 지정할 수 있는 드래그 앤 드롭 페이지 빌더가 포함되어 있습니다. 사용자 지정 WordPress 테마를 만들고 전환율이 높은 방문 페이지를 만들고 포인트 앤 클릭으로 레이아웃을 사용자 지정할 수 있습니다.

SeedProd에는 WooCommerce 지원이 포함되어 있으므로 이를 사용하여 개발자 없이 전체 WooCommerce 사이트를 디자인하고 시작할 수 있습니다. SeedProd를 사용하여 WooCommerce 사이트에 사용자 정의 장바구니에 추가 버튼을 추가하려면 아래 단계를 따르십시오.

1단계. SeedProd 설치 및 활성화

먼저 SeedProd 가격 책정 페이지로 이동하여 SeedProd 플랜을 선택합니다. WooCommerce 기능에 액세스하려면 SeedProd Elite 플랜이 필요합니다.

그런 다음 SeedProd 계정에 로그인하고 다운로드 탭을 클릭하고 플러그인 .zip 파일을 다운로드합니다. 같은 페이지에서 라이센스 키를 복사할 수도 있습니다.

이제 WordPress 웹사이트에 플러그인을 업로드할 수 있습니다. 이에 대한 도움이 필요하면 WordPress 플러그인 설치 및 활성화에 대한 이 가이드를 따르십시오.

SeedProd를 설치한 후 SeedProd » 설정 페이지로 이동하여 이전에 저장한 라이선스 키를 붙여넣습니다.

다음 단계로 이동하기 전에 키 확인 버튼을 클릭했는지 확인하십시오.

참고: SeedProd를 사용하면 두 가지 방법으로 WooCommerce에 사용자 정의 장바구니에 추가 버튼을 추가할 수 있습니다.

• 방문 페이지 사용
• 맞춤형 WooCommerce 테마 만들기

이 튜토리얼에서는 모든 WooCommerce 상점 페이지를 자동으로 생성하기 때문에 사용자 정의 WooCommerce 테마를 생성합니다.

2단계. 웹사이트 키트 선택

다음 단계를 위해 SeedProd » 테마 빌더 페이지로 이동하십시오. 여기에서 WooCommerce 테마의 다른 부분을 만들고 각 템플릿의 디자인을 사용자 지정할 수 있습니다.

처음부터 각 부품을 구축하거나 미리 만들어진 웹 사이트 키트를 사용하여 이를 수행할 수 있습니다. 더 쉽고 빠르기 때문에 두 번째 옵션을 사용하겠습니다.

웹사이트 키트를 선택하려면 테마 버튼을 클릭하십시오.

다음 화면에 사용 가능한 웹사이트 키트가 표시됩니다. WooCommerce 호환 키트는 제목 옆에 "WooCommerce"가 표시됩니다.

그런 다음 원하는 디자인 위에 마우스를 놓고 확인 표시 아이콘을 클릭하여 테마 빌더로 가져올 수 있습니다.

이 가이드에서는 Pottery Shop WooCommerce 웹 사이트 키트를 사용하고 있습니다.

웹사이트 키트를 가져온 후 다음과 같은 목록에서 테마의 개별 부분을 볼 수 있습니다.

SeedProd는 정보, 장바구니, 결제 및 연락처 페이지와 같은 콘텐츠 페이지를 자동으로 생성합니다. WordPress 대시보드에서 페이지 » 모든 페이지 로 이동하여 이러한 페이지를 보고 SeedProd의 끌어서 놓기 페이지 빌더로 사용자 정의할 수 있습니다.

WooCommerce 장바구니에 담기 버튼을 사용자 지정하여 사용자 지정 프로세스를 시작하겠습니다.

3단계. 장바구니에 추가 버튼 사용자 지정

아래에서는 Shop, 제품, 제품 아카이브 및 블로그 페이지의 WooCommerce에서 사용자 정의 장바구니에 추가 버튼을 추가하는 방법을 보여줍니다.

사용자 정의 쇼핑 페이지 장바구니에 추가 버튼 추가

먼저 WooCommerce 쇼핑 페이지를 편집하는 것으로 시작합니다. 그렇게 하려면 쇼핑 페이지 템플릿 부분을 찾아 디자인 편집 링크를 클릭합니다.

WooCommerce Shop 페이지가 SeedProd의 드래그 앤 드롭 페이지 빌더에서 열리며, 여기에서 코드 없이 디자인을 사용자 지정할 수 있습니다.

실시간 미리보기를 클릭하여 페이지 요소를 편집하고 해당 설정을 사용자 정의할 수 있습니다. 마찬가지로 왼쪽 패널에서 블록을 끌어 페이지에 놓아 더 많은 콘텐츠를 추가할 수 있습니다.

기본적으로 쇼핑 페이지 템플릿은 제품 그리드 블록을 사용합니다. 클릭하면 제품 목록이 표시되는 방식을 제어하는 ​​설정이 표시됩니다.

예를 들어 열 수를 변경하고 제품 ID, 쿼리 또는 유형별로 제품을 필터링하고 표시되는 순서를 변경할 수 있습니다.

고급 탭을 클릭하여 글꼴 스타일, 색상, 테두리 등을 포함한 더 많은 사용자 지정 옵션을 볼 수도 있습니다.

버튼 섹션에서 몇 번의 클릭으로 WooCommerce 장바구니에 추가 버튼을 사용자 지정할 수 있습니다. 예를 들어 버튼 스타일 드롭다운에서 다음을 선택할 수 있습니다.

• 평평한
• 2D
• 포도 수확
• 귀신
• 링크

또한 버튼 색상, 타이포그래피, 크기 및 테두리 반경을 변경할 수 있습니다.

사용자 정의 옵션을 실험하여 비즈니스 요구에 맞는 모양을 찾으십시오. 그런 다음 오른쪽 상단 모서리에 있는 저장 버튼을 눌러 변경 사항을 저장하고 X 아이콘을 클릭하여 테마 빌더로 돌아갑니다.

제품 페이지 장바구니에 담기 버튼 변경하기

이제 단일 제품 페이지에서 장바구니에 추가 버튼을 사용자 지정하는 방법을 살펴보겠습니다. 제품 페이지 템플릿을 찾아 디자인 편집 링크를 클릭하여 열어야 합니다.

이번에는 SeedProd의 비주얼 편집기에서 단일 제품 세부 정보를 볼 수 있습니다.

기본적으로 다음이 표시됩니다.

• 제품 이미지
• 상품명
• 제품 가격
• 간단한 설명
• 장바구니에 담기 버튼
• 제품 데이터 탭

각 요소를 클릭하여 설정을 표시하여 사용자 정의할 수 있습니다. 예를 들어 장바구니에 추가 버튼을 클릭하면 버튼 텍스트를 더 매력적인 것으로 변경할 수 있습니다.

버튼 정렬을 변경하고 Font Awesome 아이콘 라이브러리에서 아이콘을 추가할 수도 있습니다.

고급 탭을 사용하면 이전과 같이 버튼 색상, 타이포그래피, 그림자 및 간격을 변경할 수 있습니다.

제품 아카이브 장바구니 버튼 편집

제품 아카이브에서 장바구니에 추가 버튼을 변경하는 것은 쇼핑 페이지와 유사한 프로세스를 따릅니다. 제품 아카이브 템플릿 부분을 찾고 디자인 편집 링크를 클릭하여 비주얼 편집기에서 열기만 하면 됩니다.

SeedProd가 이 페이지에서 사용하는 블록은 Archive Products 블록입니다. 사용자가 제품 카테고리 제목을 클릭하거나 상점의 검색 창을 사용하면 이 페이지가 표시됩니다.

이 블록은 라이브 비주얼 편집기에서 미리보기를 표시하지 않습니다. 그러나 설정을 열어 블록이 프런트 엔드에 표시하는 내용을 사용자 지정할 수 있습니다.

예를 들어 열 수를 변경하고 개수별로 항목을 표시하고 필터로 정렬할 수 있습니다. 또한 다음과 같이 쿼리별로 필터링을 활성화할 수 있습니다.

• 속성별 쿼리
• 태그로 선택
• 카테고리별 선택
• 제품 SKU별 선택
• 그룹별 선택
• 가시성으로 선택

그런 다음 고급 탭에서 색상, 글꼴, 간격, 크기 등을 변경하여 장바구니에 추가 버튼을 사용자 지정할 수 있습니다.

블로그 페이지에 사용자 정의 장바구니에 추가 버튼 추가

블로그 페이지는 장바구니에 추가 버튼을 표시할 수 있는 또 다른 장소입니다. 이렇게 하면 블로그 게시물 이후에 제품을 추천하여 판매를 늘릴 수 있습니다.

SeedProd로 그렇게 하려면 블로그 페이지 템플릿을 찾아 디자인 편집 링크를 클릭하십시오.

기본적으로 블로그 페이지에는 최신 블로그 게시물 목록이 표시되지만 원하는 다른 콘텐츠를 포함하도록 사용자 지정할 수 있습니다.

이 페이지에 새 제품을 보여주는 섹션을 추가해 보겠습니다. 먼저 열 블록을 페이지로 끌어다 놓고 열 레이아웃을 선택합니다.

다음으로 이미지 블록을 선택하고 제품 이미지를 추가합니다.

두 번째 열에서는 제품 제목 및 설명에 제목 및 단락 블록을 사용할 수 있습니다. 그런 다음 사용자가 장바구니에 제품을 추가할 수 있도록 장바구니에 추가 버튼 위로 끕니다.

이제 블록을 클릭하여 설정을 열고 사용자 정의 장바구니에 추가 버튼 텍스트를 추가합니다.

특정 제품에 대한 제품 ID도 필요합니다. WordPress 대시보드에서 제품 » 모든 제품 으로 이동하고 ID 값을 복사하여 찾을 수 있습니다.

그런 다음 ID를 장바구니에 추가 버튼의 제품 ID 필드에 붙여넣을 수 있습니다. 이렇게 하면 장바구니에 추가 URL을 클릭한 후 특정 제품이 장바구니에 추가됩니다.

변경 사항을 저장하려면 저장 버튼을 클릭하는 것을 잊지 마십시오.

4단계. 변경 사항 저장 및 게시

WooCommerce 페이지가 마음에 들면 상점을 라이브로 만들 준비가 된 것입니다. 그렇게 하려면 테마 빌더로 돌아가서 오른쪽 상단 모서리에서 SeedProd 테마 활성화 토글을 '켜기' 위치로 돌립니다.

맞춤설정한 일부 페이지를 살펴보겠습니다.

쇼핑 페이지

제품 페이지

아카이브 페이지

블로그 페이지

방법 2: 코드로 사용자 정의 장바구니에 추가 버튼 추가

다음으로 보여드릴 방법은 WordPress 웹사이트에서 코드를 변경하는 것입니다. 웹사이트가 손상될 수 있으므로 초보자인 경우 일반적으로 이 작업을 수행하지 않는 것이 좋습니다.

즉, 일부 사람들은 기존 웹사이트 디자인을 완전히 덮어쓰고 싶지 않다는 것을 이해합니다.

시작하기 전에 WordPress 테마를 업데이트할 때 변경 사항이 손실되지 않도록 자식 테마를 만드는 것이 좋습니다. 문제가 발생하는 경우 안전하게 복원하려면 WordPress 사이트도 백업해야 합니다.

이 방법에 대한 코드 조각을 처리할 것이기 때문에 WPCode와 같은 코드 조각 플러그인을 설치하는 것이 좋습니다. 즉, 테마 파일을 직접 편집할 필요가 없습니다.

모든 것이 준비되면 WooCommerce에서 사용자 정의 장바구니에 추가 버튼을 수동으로 추가할 수 있습니다.

제품 페이지에서 장바구니에 담기 버튼 텍스트 변경

먼저 WooCommerce에서 장바구니에 담기 버튼 텍스트를 변경하는 방법을 살펴보겠습니다. 예를 들어 버튼 텍스트를 "이 항목 구매"로 변경할 수 있습니다.

그렇게 하려면 WPCode에서 사용자 지정 코드 조각을 만들고 다음 PHP 코드를 붙여넣습니다.

add_filter('woocommerce_product_single_add_to_cart_text','SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce(){
return __('Buy this item', 'woocommerce');
}

변경 사항을 저장한 다음 단일 제품을 볼 때 새 장바구니에 추가 버튼 텍스트가 표시됩니다.

장바구니에 담기 버튼의 색상 변경

장바구니에 담기 버튼의 색상을 변경하려면 사용자 정의 CSS를 추가해야 합니다. WordPress 대시보드에서 모양 » 사용자 정의 » 추가 CSS 로 이동하여 이 작업을 수행할 수 있습니다.

이제 다음 CSS 코드를 붙여넣습니다.

.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

다음 CSS 코드 스니펫을 붙여넣어 제품 아카이브 페이지에 대해서도 동일한 작업을 수행할 수 있습니다.

.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

당신은 그것을 가지고 있습니다!

이 기사가 WooCommerce에서 사용자 정의 장바구니에 추가 버튼을 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다.

이 게시물도 좋아할 수 있습니다. 맞춤 탐색을 위해 WordPress에서 메뉴를 편집하는 방법.

WooCommerce 장바구니에 추가 버튼을 사용자 지정할 준비가 되셨습니까?

읽어 주셔서 감사합니다. YouTube, Twitter 및 Facebook에서 팔로우하여 비즈니스 성장에 도움이 되는 더 많은 콘텐츠를 확인하세요.