제품 ID별로 WooCommerce 장바구니에 추가 버튼을 만드는 방법
게시 됨: 2021-02-24
WiIt은 제품 ID별로 WooCommerce 장바구니에 추가 버튼을 만들고 양식, 위젯, 게시물 또는 페이지 및 템플릿에서도 버튼을 사용할 수 있습니다. 이상적으로 WooCommerce 장바구니에 추가 버튼은 다양한 사용자 지정 옵션에 맞게 사용자 지정할 수 있습니다.
WooCommerce 제품 ID별 장바구니에 추가 버튼
이전 포스트에서 WooCommerce 장바구니에 담기 버튼을 링크로 변경하는 방법과 WooCommerce 장바구니에 담기 버튼을 자세히 보기 위해 변경하는 방법에 대해 설명했습니다.
다음은 WooCommerce 장바구니에 추가 버튼을 사용자 지정하는 방법에 대해 자세히 알아보는 데 도움이 될 수 있는 다른 이전 자습서입니다.
- 링크 WooCommerce로 장바구니에 추가 버튼을 교체하는 방법
- 자세히 보기를 숨기고 장바구니 버튼에 추가하는 방법 WooCommerce
- WooCommerce Shop 페이지에서 장바구니에 추가 버튼 텍스트를 변경하는 방법
- 예를 들어 장바구니에 추가 텍스트 WooCommerce 가이드를 변경하는 방법
- WooCommerce에서 프로그래밍 방식으로 제품을 장바구니에 추가하는 방법
- WooCommerce '장바구니에 추가됨' 알림 변경 방법
- 로그아웃한 사용자를 위해 가격을 숨기고 장바구니에 추가하는 방법 WooCommerce
위의 튜토리얼 목록에서 볼 수 있듯이 WooCommerce 장바구니에 추가 버튼을 사용자 정의하여 다양한 콘텐츠 레이아웃 또는 디자인을 달성하는 데 도움이 되는 여러 가지 방법이 있습니다.
예를 들어 WooCommerce 가격표를 생성하려는 경우 가격표의 클릭 유도문안 버튼에 추가할 수 있는 장바구니에 추가 버튼을 생성해야 할 수 있습니다.
간단한 제품 만들기 WooCommerce 제품 ID별로 장바구니에 추가 버튼
제품 ID로 WooCommerce 장바구니에 추가 버튼을 생성하려면 장바구니에 추가 버튼을 생성하려는 특정 제품의 제품 ID를 알아야 합니다. 제품 ID는 이 튜토리얼 - WooCommerce 제품 ID를 얻는 방법 에 설명된 대로 모든 제품 개요 페이지에서 쉽게 찾을 수 있습니다.
장바구니에 추가 링크
이제 버튼을 표시하려는 위치의 버튼 코드에 추가하지 않을 장바구니 추가 URL을 생성할 수 있습니다. 이 경우 아래 코드와 같이 간단한 제품 장바구니에 추가 링크를 만들 수 있습니다.
https://example.com/?add-to-cart=840
사이트의 URL은 URL의 example.com 부분을 대체해야 하며 특정 제품 ID는 위의 예에서 사용된 제품 ID 840을 대체해야 합니다.
아래 코드와 같이 HTML 버튼 코드에 이것을 추가할 수 있습니다.
수량 WooCommerce로 간단한 제품 만들기 제품 ID별로 장바구니에 추가 버튼
장바구니에 추가 URL에 수량을 추가할 수도 있으며 URL에 논리를 추가하는 데 사용되는 다양한 URL 매개변수를 사용하여 추가할 수 있습니다.
이 경우 위의 단계에서 생성한 코드를 확장하고 다음과 같이 수량 2의 제품 ID로 간단한 제품 WooCommerce 장바구니에 추가 버튼을 생성할 수 있습니다.
https://example.com/?add-to-cart=840&quantity=2
보시다시피 앰퍼샌드 기호와 단어 수량을 추가하고 동일한 제품의 버튼을 클릭할 때 장바구니에 추가하려는 항목 수를 2와 동일시했습니다.
이 URL을 HTML 코드에 추가하고 WooCommerce를 생성하려면 아래 코드를 사용해야 하는 수량과 함께 제품 ID별로 장바구니에 추가 버튼을 추가하십시오.
장바구니로 리디렉션을 사용하여 제품 ID별로 WooCommerce 장바구니에 추가 버튼 만들기
WooCommerce 스토어 고객이 사이트를 더 쉽게 탐색할 수 있도록 리디렉션을 만드는 것이 매우 중요합니다. 과거에는 WooCommerce 리디렉션을 만드는 여러 가지 방법을 강조했습니다.
특히, 이 블로그 게시물에서 공유했습니다. WooCommerce는 체크아웃 후 리디렉션을 생성하고 WooCommerce는 로그아웃 후 리디렉션을 생성하고 체크아웃 후 리디렉션을 구현하는 데 도움이 되도록 WooCommerce 플러그인 체크아웃 후 리디렉션을 생성했습니다.
WooCommerce 장바구니에 추가 후 장바구니로 이동
제품 ID별로 WooCommerce 장바구니에 추가 버튼을 사용하여 장바구니로 리디렉션을 만들 수도 있습니다. 위 단계에서 공유한 코드를 다음과 같이 변경하여 이를 수행할 수 있습니다.
https://example.com/cart/?add-to-cart=840
보시다시피 사용자가 제품을 장바구니에 추가한 후 장바구니로 리디렉션되도록 URL 에 장바구니 를 추가했습니다. HTML 버튼 코드가 포함된 전체 코드는 다음과 같습니다.
WooCommerce 장바구니에 추가 후 결제로 리디렉션
제품 ID별로 WooCommerce 장바구니에 추가 버튼을 사용하여 결제로 리디렉션할 수도 있습니다. 위의 URL에 체크아웃 을 다음과 같이 추가하여 단계에서 공유한 코드를 변경하여 이를 수행할 수 있습니다.
https://example.com/checkout/?add-to-cart=840
보시다시피 사용자가 제품을 장바구니에 추가한 후 결제로 리디렉션되도록 URL 에 결제 를 추가했습니다. HTML 버튼 코드가 포함된 전체 코드는 다음과 같습니다.
결론
이 튜토리얼에서는 제품 ID별로 WooCommerce 장바구니에 추가 버튼을 생성할 수 있는 다양한 방법을 강조했습니다. 또한 장바구니에 추가 버튼에 리디렉션을 추가하는 방법과 제품 수량을 추가하는 방법을 살펴보았습니다. 장바구니 버튼.
이제 제품 ID별로 WooCommerce 장바구니에 추가 버튼을 만들고 가격표, 양식 및 템플릿 내에서 사용할 수 있기를 바랍니다. 위의 코드에 추가한 버튼 클래스를 사용하여 장바구니에 추가 버튼을 추가로 사용자 지정할 수도 있습니다. 여전히 사이트를 사용자 정의하고 있다면 Ultimate WooCommerce Hide Guide에서 공유한 아이디어를 활용할 수 있습니다.
Storefront 테마 가 설치되어 있고 추가로 사용자 정의하려는 WooCommerce 사용자를 위해 기본 WooCommerce 테마인 Storefront 를 사용하여 사이트의 사용자 정의 모양을 만드는 방법을 안내하는 80개 이상의 WooCommerce Storefront 테마 사용자 정의 팁 모음을 공유했습니다. .
유사한 기사
- WooCommerce 조건부 결제 필드를 만드는 방법
- WooCommerce 로그인 로그아웃 단축 코드를 만드는 방법
- 버튼 색상 스토어프론트 테마를 변경하는 방법
- WooCommerce 제품 제목을 얻는 방법
- 로그아웃한 사용자를 위해 가격을 숨기고 장바구니에 추가하는 방법 WooCommerce
- 장바구니 업데이트 버튼을 숨기는 방법 WooCommerce 장바구니 페이지
- 링크 WooCommerce로 장바구니에 추가 버튼을 교체하는 방법
- WooCommerce에서 0인 경우 가격을 숨기는 방법
- WooCommerce Storefront 자식 테마를 만드는 방법 [전체 가이드]
- WooCommerce Marketing Hub 관리자 옵션을 숨기는 방법
- WooCommerce의 결제 페이지 또는 주문 페이지에서 제품 ID를 얻는 방법
- WooCommerce에서 결제 후 주문 세부 정보를 얻는 방법
- WooCommerce에 로그인한 후 장바구니로 리디렉션하는 방법
- WooCommerce 내 계정 페이지 리디렉션을 추가하는 방법
- WooCommerce 로그인 리디렉션 후크 예제와 함께 설명
- WooCommerce에서 체크아웃을 일시적으로 비활성화하는 방법
- WooCommerce Storefront 블로그를 설정하는 방법