WooCommerce에 사용자 정의 코드를 추가하는 방법
게시 됨: 2022-01-01코드 조각 을 설정하고 WooCommerce 파일 을 구성하는 것은 초보자에게 혼란스러울 수 있습니다. 또한 이러한 파일에 실수를 하면 끔찍한 결과를 초래할 수 있으며 사이트가 충돌할 수도 있습니다. 이것이 이 가이드 에서 WooCommerce에 사용자 정의 코드를 추가하는 다양한 방법을 보여주는 이유입니다.
이전에 상점을 수동으로 사용자 정의하는 방법을 살펴보았습니다. 쇼핑 페이지, 내 계정 페이지, 장바구니 페이지 또는 제품 페이지에 관계없이 사용자 정의 코드를 추가하여 수동으로 사용자 정의할 수 있습니다. 또한 코드를 사용하여 WooCommerce의 다양한 요소를 구성하여 쇼핑 경험을 개인화하고 경쟁업체와 차별화할 수 있습니다. 이 모든 작업을 수행하려면 웹사이트에 코드 스니펫을 추가해야 합니다.
이렇게 하는 다양한 방법을 살펴보기 전에 사용자 지정 코드를 추가하는 방법을 배울 때의 몇 가지 주요 이점을 살펴보겠습니다.
WooCommerce에서 코드를 추가하고 사용자 정의하는 이유는 무엇입니까?
WooCommerce의 주요 기능 중 하나는 사용자 정의 기능입니다. 이미 다양하고 유연한 옵션과 다양한 플러그인 및 애드온을 사용할 수 있는 WooCommerce는 가장 사용자 정의 가능한 전자 상거래 플랫폼 중 하나로 눈에 띕니다. 그러나 사용자 지정 코드를 추가하려면 따라야 하는 몇 가지 요구 사항이 있습니다.
결제 진행 텍스트를 변경하거나, 장바구니에 추가 버튼을 제거하거나, 사이트 모양을 변경하려면 사용자 정의 기능을 사용하고 WooCommerce 후크를 사용해야 합니다. 개발자와 코딩 기술에 익숙한 사람은 스니펫을 올바른 방법으로 추가할 수 있는 것이 얼마나 중요한지 알고 있습니다. 이를 통해 상점을 편집할 수 있을 뿐만 아니라 기능을 추가할 수도 있습니다. 좋은 소식은 WooCommerce와 WordPress의 오픈 소스 특성으로 인해 프로세스가 훨씬 더 접근하기 쉽다는 것입니다.
WooCommerce는 사용자가 코드를 사용자 정의하도록 완전히 승인하지만 이 프로세스에는 몇 가지 위험이 있는 핵심 파일 편집이 포함됩니다.
우리는 이전에 코드 조각을 사용하여 다양한 요소와 파일을 구성하는 방법에 대한 많은 가이드를 보았습니다. 이번에는 해당 프로세스의 첫 번째 부분에 초점을 맞추고 WooCommerce에 사용자 정의 코드를 올바른 방법으로 추가하는 다양한 방법을 살펴보겠습니다.
WooCommerce에 사용자 정의 코드를 추가하는 방법
WooCommerce에 코드 스니펫을 추가하는 다양한 방법이 있습니다 .
- 내장된 WordPress 테마 편집기 사용
- 전용 플러그인 사용
- FTP를 사용하여 테마 파일 액세스
- WooCommerce 템플릿 파일을 구성하여
- 새 사용자 정의 플러그인을 생성하여
각 방법을 단계별로 살펴보겠습니다.
참고 : 이 모든 방법에는 몇 가지 위험이 있는 핵심 파일을 편집해야 합니다. 그렇기 때문에 시작하기 전에 사이트를 백업하는 것이 좋습니다.
1) 내장된 WordPress 편집기를 사용하여 사용자 지정 추가
WooCommerce에 사용자 정의 코드를 추가하는 기본 방법은 내장 테마 편집기를 사용하는 것입니다. functions.php 에 액세스하여 PHP 코드를 직접 추가할 수 있습니다. 그러나 코드에 실수가 있거나 코드의 일부를 삭제하면 웹사이트가 심각한 영향을 받을 수 있습니다. 그렇기 때문에 하위 테마를 사용하고 보안 계층을 추가하는 것이 좋습니다.
테마 편집기에서 functions.php 파일을 열려면 대시보드 에서 모양 > 테마 편집기 로 이동합니다. 그런 다음 오른쪽에 있는 테마 파일 사이드바에서 functions.php 를 클릭하십시오.
functions.php 파일에 사용자 정의 코드 추가하기
이제 테마 편집기에서 WooCommerce에 사용자 정의 코드를 추가할 수 있습니다. 이 데모에서는 "장바구니가 현재 비어 있습니다. 추천 제품을 확인하는 것이 좋습니다!"에 대한 기본 "장바구니에 제품 없음" 텍스트를 변경합니다.
remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_action( 'woocommerce_cart_is_empty', 'quadlayers_empty_cart_message', 10 );
함수 quadlayers_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( '카트가 현재 비어 있습니다. 추천 제품을 확인하는 것이 좋습니다!', 'woocommerce' ) ) );
에코 $html . '</p></div>';
}이 스크립트를 테마 편집기 에 붙여넣고 파일을 업데이트 하여 변경 사항을 적용하기만 하면 됩니다.
프런트 엔드를 확인하면 다음과 같은 내용이 표시됩니다.
코드를 추가하는 것도 중요하지만 코드가 어떻게 작동하는지 이해하는 것도 중요합니다.
위의 코드는 기본 Empty Cart Message 를 코드에 추가한 사용자 지정 메시지로 대체하는 특정 작업을 적용하는 사용자 지정 WooCommerce 후크를 추가합니다. 텍스트를 변경하려면 다음 줄의 텍스트 메시지를 바꾸면 됩니다.
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( '카트가 현재 비어 있습니다. 추천 제품을 확인하는 것이 좋습니다!', 'woocommerce' ) ) );
" 장바구니에 제품 없음 " 메시지를 사용자 지정하는 방법에 대해 자세히 알아보고 최대한 활용하려면 이 전체 가이드를 확인하세요.
앞서 언급했듯이 이 방법으로 코드를 추가하는 것은 빠르고 쉽지만 상당한 위험이 따릅니다. 예를 들어 잘못된 코드를 사용하면 웹사이트가 손상되거나 충돌할 수 있습니다. 또한 일부 기능, 플러그인 또는 테마에 영향을 줄 수 있는 사용자 지정 코드와의 호환성 문제가 있을 수 있습니다. 또한 상위 테마의 function.php에 코드를 추가한 다음 테마를 변경하거나 업데이트하면 추가한 사용자 지정 코드가 손실될 수 있습니다.
그렇기 때문에 초보자라면 두 번째 방법을 시도하고 플러그인을 사용하여 WooCommerce에 사용자 정의 코드를 추가하는 것이 좋습니다.
2) 플러그인을 사용하여 코드 추가
플러그인을 사용 하면 스니펫을 추가할 때 초보자에게 더 친숙합니다. 웹사이트에서 활성화할 코드 비트를 쉽게 제어할 수 있으며 추가한 코드는 테마를 변경하더라도 저장됩니다. 또한 언제든지 코드를 활성화하거나 비활성화할 수 있습니다.
데모에서는 Code Snippets 플러그인을 사용할 것입니다. 모든 사이트에 사용자 정의 코드를 추가하는 가장 인기 있는 플러그인 중 하나입니다.
먼저 WP 관리 대시보드 를 열고 플러그인 > 새로 추가 로 이동하여 플러그인을 설치합니다. 오른쪽 상단의 검색 창을 사용하여 Code Snippets 를 검색합니다. 그런 다음 설치 를 클릭하고 마지막으로 플러그인을 활성화 합니다.
활성화하면 코드를 추가하고 WooCommerce 스토어를 사용자 지정할 수 있습니다. 스니펫 > 새로 추가 로 이동하여 새 코드를 추가합니다.
코드 조각의 이름을 지정하고 코드 섹션에 코드를 추가합니다. 데모의 경우 아래 코드를 사용하여 장바구니에 추가 버튼을 숨깁니다.
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
그런 다음 전체 웹사이트에서 코드를 실행할지 또는 백엔드 또는 프런트엔드에서만 실행할지 선택할 수 있습니다. 또는 이 코드를 한 번만 실행할 수 있습니다.
마찬가지로 코드의 우선 순위를 설정하고 스니펫 설명과 태그를 추가할 수도 있습니다.
모든 세부 사항을 설정했으면 변경 사항 저장 또는 변경 사항 저장 및 활성화 를 클릭하여 새 코드를 추가하십시오.
코드를 개별적으로 비활성화하거나 활성화하려면 조각 > 모든 조각 으로 이동하여 조각을 개별적으로 비활성화하거나 활성화할 수 있습니다.
3) FTP 클라이언트를 사용하여 사용자 정의 코드 추가
이러한 옵션을 모두 사용할 수 없고 WooCommerce 스토어에 사용자 정의 코드를 수동으로 추가해야 하는 경우 FTP 클라이언트 를 사용하여 추가해야 할 수 있습니다. 여러 도구가 있지만 이 자습서에서는 FileZilla를 사용합니다.
참고 : FTP 클라이언트를 사용하거나 서버 및 해당 파일을 구성하는 데 익숙하지 않은 경우 이 방법을 권장하지 않습니다. 또한 cPanel 및 FTP 에 대한 액세스가 필요할 수 있습니다. 이러한 파일을 엉망으로 만들면 웹사이트에 심각한 영향을 미칠 수 있으므로 사이트에 사용자 정의 코드를 추가하는 데 수반되는 위험을 줄이려면 위의 방법을 고수하는 것이 좋습니다.
먼저 FileZilla 또는 선호하는 FTP 클라이언트를 열고 웹사이트에 연결합니다. 그런 다음 웹사이트 디렉토리에서 테마 파일을 찾습니다. 일반적으로 서버의 /wp-content/themes 디렉토리에 있습니다. 현재 테마 또는 구성하려는 하위 테마의 폴더를 클릭합니다.
테마 폴더를 열고 그 안에 있는 functions.php 파일을 마우스 오른쪽 버튼으로 클릭한 다음 보기/편집을 누릅니다.
여기에서 파일 편집기를 사용하여 파일 끝에 코드를 붙여넣고 저장할 수 있습니다. 이를 위해 위와 동일한 코드를 사용하여 장바구니에 추가 버튼을 숨깁니다.
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
코드를 추가하는 또 다른 흥미로운 대안은 WooCommerce 템플릿 파일을 사용자 지정하는 것입니다.
4) WooCommerce 템플릿 파일을 사용자 정의하여 코드 추가
템플릿 편집은 WooCommerce 스토어와 모든 페이지의 모든 요소를 구성하는 가장 빠른 방법 중 하나입니다. 여기에는 체크아웃 페이지, 제품 페이지, 쇼핑 페이지 등이 포함됩니다.
좋은 소식은 내장된 WordPress 플러그인 편집기를 사용하여 위와 유사하게 WooCommerce 템플릿 파일을 편집할 수 있다는 것입니다. 액세스하려면 관리 대시보드에서 플러그인 > 플러그인 편집기 로 이동합니다.
그런 다음 오른쪽 상단의 플러그인 선택 드롭다운을 사용하여 WooCommerce를 선택한 다음 선택을 클릭합니다.
그러면 WooCommerce 파일 및 템플릿을 구성하는 데 사용할 수 있는 아래 플러그인 파일 목록이 업데이트됩니다. 데모 의 경우 체크아웃의 감사 페이지를 편집합니다. 따라서 플러그인 파일 목록에서 Checkout > Thankyou.php 를 선택하십시오.
그런 다음 아래로 스크롤하여 다음 줄의 텍스트를 바꿔서 주문 수신 텍스트를 변경합니다.
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( '감사합니다. 주문이 접수되었습니다.', '우커머스' ), 없는 ); // phpcs: WordPress.Security.EscapeOutput.OutputNotEscaped 무시 ?></p>
예를 들어 주문 수신 메시지를 "구매해주셔서 감사합니다. 지침에 관한 메일을 곧 받게 될 것입니다.”, 다음 코드를 붙여넣으십시오.
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( '구매해주셔서 감사합니다. 곧 관련 메일을 받게 될 것입니다. 지침..', '우커머스' ), null ); // phpcs: WordPress.Security.EscapeOutput.OutputNotEscaped 무시 ?></p>
여기에서 우리의 필요에 더 적합한 것으로 후크 텍스트를 업데이트했습니다. 변경 사항에 만족하면 파일 업데이트 를 누르십시오.
템플릿 파일 구성에 대해 자세히 알아보려면 WooCommerce 템플릿 파일을 사용자 지정하는 방법에 대한 가이드를 확인하세요.
5) 새 사용자 정의 플러그인을 생성하여 코드 추가
WooCommerce에 사용자 정의 코드를 추가할 때 완전히 새로운 플러그인 을 만드는 것도 옵션입니다. 이것은 좀 더 고급 사용자 옵션이며 독립 실행형 플러그인에 특정 기능을 첨부하려는 경우에만 이 방법을 사용하는 것이 좋습니다. 이러한 방식으로 특정 기능이 필요하거나 필요하지 않을 때마다 언제든지 플러그인을 활성화/비활성화 하도록 선택할 수 있습니다.
또한 여러 사이트를 관리해야 하는 경우에도 이는 훌륭한 솔루션이 될 수 있습니다. 코드를 수동으로 추가하는 대신 플러그인을 사용하여 사이트에 기능을 첨부할 수 있습니다.
또한 WordPress 자체를 사용하면 새 플러그인을 만들고 사용하는 것이 매우 쉽습니다. 웹사이트 디렉토리 에 새 플러그인 폴더 를 만들고 PHP 파일에 몇 가지 코드를 추가하기만 하면 됩니다. 먼저 FTP 를 사용하여 웹 사이트에 연결해야 합니다. 우리는 가이드를 위해 Filezilla를 사용할 것이지만 프로세스는 다른 FTP 클라이언트와 유사해야 합니다.
그러나 시작하기 전에 웹사이트를 백업하는 것이 좋습니다.
WooCommerce에 사용자 정의 코드를 추가하기 위한 새 플러그인 폴더 생성
FTP로 웹사이트를 연결한 후 사이트의 디렉터를 엽니다. 그런 다음 /wp-content/plugins 폴더로 이동합니다.
이제 plugins 폴더에 새 디렉토리를 만들고 코드에 따라 이름을 지정하고 확장합니다. 데모에서는 이름을 Remove-Add-To-Cart 로 지정하겠습니다.
그런 다음 폴더를 마우스 오른쪽 버튼으로 클릭 하여 새 파일 만들기 를 클릭합니다. 여기에서 폴더와 같은 이름으로 .php 파일을 생성해야 합니다. 따라서 파일 이름 을 Remove-Add-to-Cart.php로 지정하겠습니다.
파일이 생성되면 파일을 마우스 오른쪽 버튼으로 클릭하고 보기/편집 을 클릭하여 엽니다.
다음으로 플러그인 이름, 설명 및 작성자 이름을 추가하는 몇 줄의 코드를 추가합니다.
<?php /** * 플러그인 이름: 제거 장바구니에 추가 * 설명: 장바구니에 추가 제거 플러그인 추가 * 저자: 시잘 슈레스타 * 버전: 1.0 */ /* 여기 아래에 스니펫을 넣으세요. */ /* 위의 스니펫을 여기에 넣습니다. */ ?>
새 플러그인에 사용자 정의 코드 추가
이제 플러그인에 사용자 정의 코드를 추가할 수 있습니다. /*Put your snippets here */ 섹션 사이에 사용자 정의 코드를 추가해야 합니다. 참고로 이 줄은 단순히 주석이므로 코드에 영향을 주지 않으며 원하는 경우 제거할 수 있습니다.
<?php /** * 플러그인 이름: 제거 장바구니에 추가 * 설명: 장바구니에 추가 제거 플러그인 추가 * 저자: 시잘 슈레스타 * 버전: 1.0 */ /* 여기 아래에 스니펫을 넣으세요. */ remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); /* 위의 스니펫을 여기에 넣습니다. */ ?>
그런 다음 파일을 저장 하면 플러그인 페이지 아래의 WP 관리 대시보드 에 플러그인이 나열되어 있어야 합니다.
플러그인을 활성화 하면 사용자 정의 코드가 완벽하게 실행됩니다. 원하는 경우 플러그인 폴더를 압축하여 다른 웹사이트에 설치하는 데 사용할 수도 있습니다. FTP 클라이언트에서 폴더를 다운로드하고 폴더를 압축하기만 하면 됩니다.
그런 다음 이 zip을 사용하여 모든 웹사이트에 플러그인을 설치할 수 있습니다. 도움이 더 필요한 경우 WordPress 플러그인을 수동으로 설치하는 방법도 자세히 나와 있습니다.
사용자 정의 코드를 추가하려면 어떤 방법을 사용해야 합니까?
다양한 방법을 살펴보았지만 스니펫을 추가하는 가장 좋은 방법은 무엇입니까? FTP 클라이언트를 사용하고 파일에 수동으로 액세스하는 것은 매우 빠르고 쉬울 수 있지만 이러한 방식으로 사용자 정의 코드를 추가할 때 상당한 위험이 수반될 수 있습니다. 그렇기 때문에 위험을 최소화하려면 특히 고급 코딩 기술이 없는 경우 전용 사용자 지정 코드 플러그인 을 대신 사용하는 것이 좋습니다.
이 방법은 훨씬 덜 위험하며 다음과 같은 추가 이점이 있습니다.
- 다양한 코드를 추적하고 원할 때마다 활성화/비활성화 가능
- 충돌하는 코드 추가 및 필요한 경우 대안적으로 활성화/비활성화
- 테마/설치 호환성 확인
- 디버그 및 문제 복구 용이
전용 플러그인을 사용하여 WooCommerce에 사용자 정의 코드를 추가하면 가능한 문제를 최소화하면서 후크를 쉽게 구성할 수 있습니다. 그러나 새로 추가한 코드로 인해 문제가 발생하거나 웹사이트가 중단되지 않도록 하려면 다음 팁을 살펴보는 것이 좋습니다.
WooCommerce에 사용자 정의 코드를 추가할 때의 모범 사례
1) 하위 테마 사용
functions.php 파일에 사용자 정의 코드를 추가하려는 경우 자식 테마 를 사용하는 것이 가장 먼저 권장하는 것 중 하나입니다. 편집하거나 추가하는 코드에 관계없이 하위 테마를 사용하면 핵심 테마 파일을 수정하지 않고 언제든지 변경 사항을 되돌릴 수 있습니다.
또한 코드 변경 및 스타일시트 수정 시 고려해야 할 중요한 사항은 WordPress 테마를 업데이트 하는 경우 모든 변경 사항을 잃을 수 있다는 것입니다. 테마 업데이트로 funcitons.php 파일을 덮어쓰고 모든 사용자 정의 코드를 제거하기 때문입니다. 이것이 부모 테마에 코드를 추가하는 것이 권장되지 않는 이유입니다.
하위 테마를 사용하면 상위 테마를 업데이트한 후에도 사용자 정의가 손실되지 않습니다. 또한 테마가 중단되면 언제든지 변경 사항을 되돌리고 처음부터 다시 시작할 수 있습니다.
프로그래밍 방식으로 자식 테마를 만들거나 전용 플러그인을 사용할 수 있습니다. 이 섹션에서는 더 쉬운 프로세스이므로 플러그인을 사용하여 하위 테마를 만드는 방법을 보여줍니다.
플러그인을 사용하여 하위 테마 만들기
플러그인을 사용하여 하위 테마를 만드는 것은 간단하고 초보자에게 친숙한 프로세스입니다. 사용할 수 있는 플러그인이 많이 있습니다. 이 데모에서는 하위 테마 마법사 를 사용합니다.
먼저 WP 관리자 대시보드 를 열고 플러그인 > 새로 추가 로 이동합니다. 그런 다음 오른쪽 상단의 검색 메뉴를 사용하여 하위 테마 마법사 를 검색합니다. 설치 를 클릭한 다음 버튼이 전환되면 활성화 를 누릅니다.
그런 다음 도구 > 하위 테마 마법사를 클릭하여 플러그인 기능에 액세스할 수 있습니다.
새 하위 테마를 만들려면 상위 테마 필드 를 사용하여 하위 테마를 만들 테마를 선택합니다. 데모에서는 Storefront 테마를 사용합니다.
그런 다음 제목, 설명, URL 등과 같은 세부 정보를 추가합니다. 완료되면 Create Child Theme 를 클릭하면 완료됩니다.
이제 사이드바에서 모양 > 테마 로 이동하고 새로 생성된 하위 테마에서 활성화 를 눌러 하위 테마로 전환합니다.
그게 다야! 이제 새로 생성된 하위 테마 아래의 function.php 파일에 사용자 정의 코드를 자유롭게 추가할 수 있습니다.
2) WordPress 백업 플러그인 사용 및 백업 설정
WordPress/WooCommerce 파일을 수정하거나 설치 파일을 변경할 때 해야 할 가장 중요한 일 중 하나는 백업을 설정하는 것입니다. WooCommerce는 매우 유연하지만 호환되지 않거나 오작동하는 코드는 심각한 문제를 일으킬 수 있습니다.
어떤 경우에는 웹 사이트가 충돌하거나 중단되어 WooCommerce 비즈니스에 다운타임이 발생할 수 있습니다. 그렇기 때문에 정기적인 백업을 생성하는 것이 좋습니다. 따라서 사이트에 사용자 정의 코드를 추가하기 전에 문제가 발생할 경우에 대비할 수 있는 백업을 생성하는 것을 잊지 마십시오.
이에 대한 자세한 내용은 WordPress에서 백업을 만드는 방법에 대한 전용 가이드를 확인하세요.
3) 코드가 작동하는 방식과 WooCommerce 후크 및 기능이 사용되는 방식에 대해 학습
WooComerce에 대한 대부분의 사용자 정의 코드는 후크 를 사용하여 특정 작업을 수행하거나 특정 요소를 변경합니다. 따라서 이러한 필터가 작동하는 방식과 사용자 정의 코드를 작성하기 전에 웹사이트에 적용되는 방식을 배우는 것이 좋습니다. 이렇게 하면 불완전하거나 오작동하는 코드를 사용하는 것을 방지할 수 있을 뿐만 아니라 필요에 맞게 더 잘 작동하도록 사용자 지정할 수 있습니다.
예를 들어 로그인하지 않은 경우 구매를 비활성화하는 다음 스니펫을 살펴보겠습니다.
add_action( 'woocommerce_before_single_product', 'quadlayers_add_message');
add_filter( 'woocommerce_is_purchasable', 'quadlayers_block_admin_purchase' );
기능 quadlayers_block_admin_purchase($block) {
if ( is_user_logged_in() ): true를 반환합니다.
else: false를 반환합니다.
엔디프;
}
기능 quadlayers_add_message( ){
if ( !is_user_logged_in() ):echo '<H2>이 제품을 구매하려면 로그인하세요</h2>';
엔디프;
}WooCommerce 후크가 작동하는 방식은 다음과 같습니다.
- 작업 후크는 QuadLayers_add_message 기능을 사용하여 메시지를 인쇄하는 데 사용되는 반면 필터 후크는 quadlayers_block_admin_purchase 기능을 사용하여 장바구니에 추가 버튼을 비활성화하는 데 사용됩니다.
- IF 문은 사용자가 로그인했는지 여부를 확인하기 위해 이 두 함수 모두에서 사용됩니다.
- 조건부 IF 문이 true를 반환하면 woocommerce_is_purchasable 후크가 적용됩니다.
- 또한 메시지의 텍스트 스타일을 변경하고 사용자 정의 색상을 추가하기 위해 몇 가지 추가 CSS를 적용했습니다.
다음을 자식 테마의 function.php 파일에 추가해 보겠습니다.
이것은 프런트 엔드에서 다음과 같은 결과를 제공합니다.
WooCommerce 사용자 정의 코드가 작동하는 방식을 배우고 싶다면 WC 후크 사용 방법에 대한 가이드를 확인하세요.
결론
요약 하면 WooCommerce에 사용자 정의 코드를 추가하는 방법을 배우는 것은 상점 경험을 사용자 정의하는 핵심 부분이 될 수 있습니다. 커스터마이징한 항목이 많을수록 경쟁업체보다 더 돋보일 수 있습니다. 코드 스니펫을 추가하면 플러그인에 너무 의존하지 않아도 되며 유연성이 향상됩니다.
이 가이드에서는 코드 조각을 추가하는 다양한 방법을 살펴보았습니다.
- 내장된 테마 편집기를 사용하여 functions.php 파일 편집
- 맞춤형 코드 조각을 추가하는 전용 WordPress 플러그인 사용
- FTP를 사용하여 function.php 파일에 수동으로 액세스
- 플러그인 편집기를 사용하여 WooCommerce 템플릿 수동 편집
- FTP를 사용하여 사용자 정의 코드로 새 플러그인을 만듭니다.
이 모든 방법을 통해 WooCommerce 웹 사이트를 쉽게 사용자 정의하고 구성할 수 있습니다. 이 모든 방법은 기본 수준의 코딩 기술이 필요하지만 플러그인을 사용하는 것이 가장 초보자에게 친숙한 방법입니다. 내장 편집기에서 functions.php 파일을 편집하는 것은 쉽지만 알고 있어야 할 몇 가지 위험이 있습니다. WooCommerce 템플릿 파일을 직접 사용자 정의하려는 경우에도 동일하게 적용됩니다. 마지막으로 FTP 클라이언트를 사용하는 것은 서버 파일을 구성하는 데 특정 지식이 필요하기 때문에 약간 더 발전된 방법입니다.
WooCommerce 스토어에 스니펫을 추가했습니까? 어떤 방법을 사용하셨나요? 우리가 추가해야 할 다른 방법을 알고 있습니까? 아래 의견 섹션에서 알려주십시오!
마지막으로 추가 코드 스니펫과 상점을 프로그래밍 방식으로 사용자 정의하는 방법을 찾고 계시다면 저희가 준비한 것이 있습니다. 이 가이드가 마음에 들면 WooCommerce 스토어를 최대한 활용하는 데 도움이 되는 다음 기사를 확인하세요.
- 프로그래밍 방식으로 WooCommerce 제품 페이지를 편집하는 방법
- 프로그래밍 방식으로 WooCommerce 내 계정 페이지 편집
- 프로그래밍 방식으로 WooCommerce Shop 페이지를 편집하는 방법