프로그래밍 방식으로 WooCommerce 쇼핑 페이지를 편집하는 방법(CSS 및 PHP)

게시 됨: 2020-08-27

상점 페이지를 사용자 정의하는 방법을 찾고 계십니까? 이 튜토리얼에서는 PHP와 CSS를 모두 사용하여 프로그래밍 방식으로 WooCommerce 쇼핑 페이지 를 편집하는 방법을 보여줍니다.

모든 온라인 상점에서 전환율을 높이려면 상점 페이지를 편집하고 최적화하는 것이 중요합니다. 쇼핑 페이지는 제품을 표시하는 곳이며 비즈니스를 성사시키거나 망칠 수 있습니다. WooCommerce 스토어를 운영하는 경우 상점 페이지를 사용자 정의하고 최대한 활용하는 것이 좋습니다. 이 가이드에서는 프로그래밍 방식으로 WooCommerce 쇼핑 페이지를 편집하는 방법을 보여줍니다.

WooCommerce에서 상점 페이지를 편집하는 것이 왜 중요한가요?

Shop 페이지는 WooCommerce에서 가장 중요한 페이지 중 하나입니다. 그것은 방문자에게 제품을 표시하는 곳이므로 상점 성능에 큰 영향을 줄 수 있습니다. 좋은 쇼핑 페이지는 사용자 경험을 개선하고 전환율을 높이며 사용자 참여를 유도하는 데 도움이 됩니다. 반면에 잘못된 쇼핑 페이지는 정반대로 비즈니스를 질식시킬 수 있습니다.

그렇기 때문에 판매를 극대화하기 위해 최적화 해야 합니다. 플러그인과 페이지 빌더로 그렇게 할 수 있지만 코딩 기술이 있다면 자신만의 솔루션을 만드는 것이 좋습니다.

프로그래밍 방식으로 WooCommerce 쇼핑 페이지를 편집하는 방법

우리는 이전에 상점 페이지를 사용자 정의하는 다양한 방법을 보았습니다. 그러나 이 튜토리얼에서는 약간의 CSS 및 PHP 코드를 사용하여 프로그래밍 방식으로 WooCommerce 쇼핑 페이지를 편집하는 방법에 중점을 둘 것입니다. 이 가이드에서 우리는 자식 테마에 대해 작업할 것이고 WooCommerce 기본 상점 템플릿도 편집할 것이라는 점에 주목할 가치가 있습니다. WooCommerce 템플릿 파일과 하위 테마의 functions.php 파일에 대한 일부 참조에 중점을 둘 것입니다.

이 튜토리얼에서는 프로그래밍 방식으로 WooCommerce 쇼핑 페이지를 다음과 같이 편집하는 방법을 배웁니다.

  1. 기본 WooCommerce 쇼핑 페이지 템플릿 비활성화
  2. 헤더 및 콘텐츠 사용자 지정
    1. 가장 인기있는 제품
    2. 베스트셀러 제품
    3. 최고 등급
    4. 분류별로 제품 표시
    5. functions.php 에서 WooCommerce 쇼핑 페이지 사용자 지정
  3. 제품 루프의 레이아웃 편집 및 CSS 스타일시트 적용
    1. 행당 기본 열 수 편집
    2. 상점 페이지에 CSS 스타일 적용
  4. WooCommerce 쇼핑 페이지의 루프 파일 편집
    1. 애니메이션 gif의 기본 "세일" 텍스트 교체
    2. 정렬 옵션 및 페이지 매김 제거

시작하기 전에

다음 가이드에는 고급 코딩이 포함되어 있으므로 기술적인 기술이 없으면 이 다른 자습서 를 대신 따르는 것이 좋습니다.

시작하기 전에 하위 테마도 설치하는 것이 좋습니다. 하위 테마를 만드는 방법에 대한 가이드를 확인하거나 플러그인을 사용하여 클릭 몇 번으로 할 수 있습니다. 또한 핵심 파일을 변경하게 되므로 사이트 전체를 백업하는 것이 좋습니다.

그럼 이제 WooCommerce에서 쇼핑 페이지를 코딩으로 커스터마이징하는 방법을 알아보겠습니다.

1. 기본 WooCommerce 쇼핑 페이지 템플릿 비활성화

상점 페이지를 사용자 정의하기 위해 두 가지 가능한 접근 방식이 있습니다.

  1. 상점 페이지 인쇄를 담당하는 WooCommerce 파일을 덮어쓸 수 있습니다.
  2. WC 후크를 사용하여 자식 테마의 functions.php 파일에 사용자 정의 스크립트 추가

WooCommerce HTML 템플릿을 자식 테마의 functions.php 파일처럼 편집할 수 있으며, 업데이트가 있을 때 삭제를 방지하기 위해 핵심 파일을 덮어쓸 수 있습니다. 그러나 WooCommerce가 이러한 파일을 업데이트하기로 결정한 경우 functions.php 파일에서 일이 정확히 작동하지 않으므로 사용자 정의가 더 이상 작동하지 않을 수 있습니다.

그러나 이것은 걱정할 필요가 없습니다. WooCommerce는 이를 알고 있으므로 스크립트를 손상시킬 수 있는 방식으로 템플릿 파일을 거의 업데이트하지 않습니다. functions.php 파일 작업의 문제는 후크를 추가한 후에도 기본 WooCommerce 쇼핑 페이지가 계속 표시된다는 것입니다.

따라서 템플릿을 처음부터 생성하려면 우선 기본 WooCommerce 템플릿 상점 페이지를 비활성화 해야 합니다.

archive-product.php 파일

WooCommerce에서 상점 페이지의 출력을 담당하는 파일은 archive-product.php 이며 WooCommerce 템플릿 폴더( WooCommerce > Templates > archive-product.php )에서 찾을 수 있습니다. 프로그래밍 방식으로 WooCommerce 상점 페이지 편집 - 상점 페이지 템플릿 비활성화

이 파일을 덮어쓰려면 아래와 같이 자식 테마의 WooCommerce 폴더에 복사하여 붙여넣어야 합니다.

이제 archive-product.php 파일을 살펴보고 WooCommerce가 상점 페이지를 표시하는 방법을 볼 수 있습니다. 그렇게 하려면 선호하는 통합 개발 환경(IDE)을 열고 WooCommerce 플러그인의 템플릿 폴더로 이동하여 파일을 엽니다. 다른 WC 템플릿 파일을 사용자 정의할 수 있는 것과 같은 방식으로 편집하고 가지고 놀 수 있습니다.

그렇게 하기 전에 필요한 경우 변경 사항을 취소할 수 있도록 원본 파일의 백업이 있는지 확인하십시오.

archive-product.php 파일에서 몇 가지 do_action() 함수를 볼 수 있습니다. 이 함수는 상점 페이지에 대해 현재 사용 가능한 WooCommerce 후크를 만드는 데 사용됩니다. WooCommerce 쇼핑 페이지를 완전히 비활성화하려면 제품 인쇄를 담당하는 루프를 삭제하기만 하면 됩니다.

 if (wc_get_loop_prop('총')) {
    동안 (have_posts()) {
        the_post();
        do_action('우커머스_샵_루프');
        wc_get_template_part('콘텐츠', '제품');
    }
}

여기에서 더 변경할 수 있지만 단순화하기 위해 루프만 삭제하고 다른 모든 것은 그대로 둡니다. 더 많은 변경을 하기로 결정했다면 do_action() 함수 중 일부를 제거하면 해당 단축 코드가 웹사이트의 모든 페이지에서 더 이상 작동하지 않습니다.

제품 인쇄용 루프를 삭제하면 archive-product.php 파일이 다음과 같이 표시됩니다.

 정의됨('ABSPATH') || 출구;
get_header('상점');
do_action('woocommerce_before_main_content');
if (woocommerce_product_loop()) {
    do_action('woocommerce_before_shop_loop');
    // 여기에서 루프를 삭제했습니다.
    do_action('woocommerce_after_shop_loop');
} 또 다른 {
    do_action('woocommerce_no_products_found');
}
do_action('woocommerce_after_main_content');
do_action('우커머스_사이드바');
get_footer('상점');

그게 다야! 기본 상점 페이지 템플릿을 비활성화하고 프로그래밍 방식으로 WooCommerce 상점 페이지를 편집했습니다 ! 이제 상점 페이지가 비어 있으므로 나만의 디자인을 시작할 수 있습니다.

2. 프로그래밍 방식으로 WooCommerce 쇼핑 페이지의 헤더 및 콘텐츠 사용자 지정

콘텐츠와 헤더는 이미지, 표 또는 링크를 포함할 수 있는 HTML 마크업일 수 있습니다. 또는 외부 JavaScript 파일을 실행하기 위한 빈 컨테이너와 같은 것입니다. 이를 위해서는 WooCommerce 단축 코드를 사용하여 상점 페이지에 제품을 표시할 것이기 때문에 기본 지식이 필요합니다. WC 단축 코드에 익숙하지 않다면 이 가이드를 살펴보세요.

이제 WC 쇼핑 페이지를 편집하여 가장 인기 있는, 베스트 셀러, 최고 평점 및 분류별로 제품을 표시해 보겠습니다. 또한 루프 외부에 제목과 콘텐츠를 추가하는 방법을 보여줍니다.

2.1 가장 인기있는 제품 표시

가장 인기 있는 제품을 표시하려면 하위 테마의 archive-product.php 파일을 편집해야 합니다. 먼저 다음 단축 코드를 사용하십시오.

 [ products orderby="popularity" ]

루프를 삭제하기 전의 위치입니다. # 가장 인기 있는 제품 표시: 2개의 열에 2개의 제품

 do_action('woocommerce_before_shop_loop');
echo '<h1>가장 인기있는 !!</h1>';
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

단축 코드에서 나중에 스타일을 적용할 때 사용할 수 m-popular 라는 클래스를 추가합니다. 위의 예에서는 단일 2열 행 (columns=”2″ limit=”2″) 에 2개의 제품을 표시하도록 설정했습니다. 게시물이나 페이지에서 사용하는 것과 같은 방식으로 여기에서 단축 코드를 사용할 수 없습니다.

단축 코드가 작동하려면 do_shortcode() 함수를 사용해야 합니다. 모든 것이 잘 되었다면 이제 상점 페이지에 다음이 표시되어야 합니다. 사용자 정의 상점 페이지

2.2 베스트 셀러 제품

프로그래밍 방식으로 WooCommerce 상점을 사용자 정의하는 또 다른 방법은 베스트 셀러별로 제품을 정렬하는 것입니다. 이를 위해 단축 코드를 반영하는 것 외에도 간단한 HTML 마크업( <h1> )을 사용하여 일부 콘텐츠를 추가합니다. 여기에 적절한 HTML 형식과 일치하는 다른 유형의 콘텐츠를 추가할 수 있습니다.

베스트 셀러 상품을 이번에는 2행 3열의 레이아웃으로 표시해 보겠습니다. 그렇게 하려면 이전 단계 2.1에서 삽입한 echo do_shortcode() 행 바로 뒤에 이것을 붙여넣습니다.

 echo '<h1>베스트셀러</h1>';
do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

그리고 당신이 얻는 것은 이것입니다: 사용자 정의 상점 페이지 가장 인기 있는 제품 대신 베스트 셀러만 추가하려면 2.1의 echo 라인을 2.2의 에코 라인으로 교체하면 됩니다.

2.3 최고 등급 제품

이제 숏코드로 좀 더 놀아보고 최고 평점 제품을 표시해 보겠습니다. 이번에는 클래스보다 더 많은 속성이 없는 단축 코드를 사용합니다.

 echo '<h1>최고 평점</h1>';
do_shortcode('[ top_rated_products class="t-rated" ]');

이 후에 어떻게 되는지 봅시다. 사용자 정의 상점 페이지 보시다시피 WooCommerce 기본 레이아웃에는 4개의 열이 있습니다. 지금은 그대로 두고 나중에 다시 다루도록 하겠습니다.

2.4 쇼핑 페이지에 분류별 제품 표시

베스트셀러 또는 최고 평점 제품을 표시하는 것 외에도 분류별로 표시할 수도 있습니다. 예를 들어 다음 코드는 이전에 사용한 것과 동일한 속성을 사용하지만 열 수를 5로 변경하여 포스터 및 의류 카테고리에 대한 제품을 인쇄합니다.

 echo '<h1>의류 분류:</h1>';
do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>포스터 분류:</h1>'; echo '<h2>최고의 포스터를 벽에 붙이세요</h2>'; do_shortcode('[ products category="Posters" limit="4" class="t-posters" ]');

그리고 이것은 이제 archive-product.php 의 모습입니다:

 <header class="우커머스-제품-헤더">
       <h1 class="woocommerce-products-header__title 페이지 제목"></h1>	
</헤더>
<?php
if ( woocommerce_product_loop() ) {
	do_action( 'woocommerce_before_shop_loop' );		
	
	echo '<h1>가장 인기있는 !!</h1>';
        do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); echo '<h1>베스트셀러</h1>'; do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]'); echo '<h1>최고 평점</h1>'; do_shortcode('[ top_rated_products class="t-rated" ]'); echo '<h1>의류 분류:</h1>'; do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>포스터 분류:</h1>; echo '<h2>최고의 포스터를 벽에 붙이세요</h2>'; do_shortcode('[ products category="Posters" columns="2" limit="4" class="t-posters" ]'); do_action( 'woocommerce_after_shop_loop' ); } else { do_action( 'woocommerce_no_products_found' ); } do_action( 'woocommerce_after_main_content' ); do_action( '우커머스_사이드바' ); get_footer( '상점' );

이 시점에서 모든 WooCommerce 단축 코드와 해당 속성을 사용하여 모든 디자인 요구 사항을 충족할 수 있는 맞춤형 쇼핑 페이지를 구축하는 방법을 이해할 수 있어야 합니다.

2.5 functions.php에서 WC 쇼핑 페이지 사용자 지정

프로그래밍 방식으로 WooCommerce 쇼핑 페이지를 사용자 지정하려면 functions.php 파일을 편집할 수도 있습니다. 제품 루프 외부에 있는 콘텐츠의 경우 archive-product.php 파일에 있는 일부 후크를 사용하여 하위 테마의 functions.php 파일에서 실행할 수 있습니다. 이렇게 하면 WC가 템플릿 파일을 업데이트하기로 결정한 경우에도 스크립트가 계속 작동하는지 확인할 수 있습니다.

이 예에서는 제목, 부제목, 설명 및 배너가 있는 사용자 지정 헤더를 추가해 보겠습니다. 이 스크립트를 자식 테마의 functions.php 파일에 붙여넣습니다.

 add_action('woocommerce_before_shop_loop','shop_main_heading');
함수 shop_main_heading(){
	$ 콘텐츠 = '';
	$content.='<h1>나의 멋진 쇼핑 페이지에 오신 것을 환영합니다!</h1>'; 
	$content.='<h2>사랑으로 지었습니다</h2>';
	$content.='<p>저의 웹사이트 쇼핑 페이지를 방문해 주셔서 감사합니다. 가장 마음에 드는 제품을 검색하고 모두 구매하세요.</p>';
	$content.='<img src="https://www.carpetright.co.uk/globalassets/static-pages/useful-links/samples/sample-banner.jpg"/>';
	에코 $내용;
}

쇼핑 페이지는 다음과 같이 표시됩니다. 사용자 정의 상점 페이지 같은 방식으로 woocommerce_after_shop_loop 후크를 사용하여 상점 페이지 끝에 일부 콘텐츠를 표시할 수 있습니다.

삼. 행당 제품 수 편집 및 WC 쇼핑 페이지에 CSS 스타일시트 적용

이제 WooCommerce 단축 코드를 사용하여 제품을 표시하고, 추천, 분류, 베스트셀러 및 기타 원하는 방식으로 정렬할 수 있습니다. 또한 쇼핑 페이지의 원하는 위치에 모든 종류의 콘텐츠를 삽입할 수 있어야 합니다. 하지만 한 단계 더 나아가 쇼핑 페이지를 한 단계 더 발전시킬 수 있다면 어떨까요? 템플릿 레이아웃을 편집하고 일부 CSS 스타일을 추가하여 프로그래밍 방식으로 WooCommerce 쇼핑 페이지를 더욱 맞춤화할 수 있습니다.

3.1 행당 기본 열 수 편집

WC 단축 코드의 열 속성을 지정하면 각 행에 표시할 제품 수를 설정할 수 있습니다. 또한 limit 속성을 사용하여 단축 코드에 대한 총 제품 수를 설정할 수 있습니다.

 [ product orderby=”popularity” columns=”3” limit=”3” ]

단, columns 속성을 정의하지 않으면 자식 테마의 functions.php 파일에서 이 스크립트를 사용하여 각 행에 인쇄할 제품 수를 설정할 수 있습니다.

 add_filter('loop_shop_columns', 'loop_columns', 999);
if (!function_exists('loop_columns')) {
    함수 loop_columns() {
        return 4 ;//행당 4개 제품
    }
}

WooCommerce 단축 코드에 열 속성이 없는 경우에만 행당 표시되는 기본 제품 수를 변경합니다.

3.2 상점 페이지에 일부 CSS 스타일 적용

WooCommerce 쇼핑 페이지에 일부 CSS를 적용하려면 다음과 같이 템플릿 파일에 스크립트를 추가하기만 하면 됩니다.

 <스타일>
* {
    배경색:#a2bcff;
}
</스타일>

CSS의 작은 부분에는 괜찮지만 권장되는 방법은 아닙니다. CSS 스타일을 WordPress 방식으로 적용하려면 wp_enqueue_scripts 후크를 사용하여 다른 파일에서 스크립트를 로드해야 합니다.

이 예에서는 이 파일의 이름을 shop_style.css 로 지정하고 기본 style.css 파일과 동일한 계층 수준의 하위 테마 기본 폴더에 저장합니다. 이 파일을 만든 후 functions.php 파일에 다음 스크립트를 붙여넣습니다.

 add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css' );
함수 quadlayers_enqueue_css(){    
    if( is_shop() ) :
    wp_enqueue_style( '체크아웃 스타일',
        get_stylesheet_directory_uri() . '/shop_style.css'
    );
    엔디프;
}

보시다시피 if(is_shop()): conditional은 shop_style.css 파일을 대기열에 추가하려면 true여야 합니다. 이 파일 에는 쇼핑 페이지에만 적용하려는 모든 스타일 스크립트가 있습니다. 이것은 전체 웹사이트 프론트엔드에 스크립트를 적용할 자식 테마의 style.css 파일과 다릅니다. 이 가이드에서는 다음 shop_style.css 파일을 사용하지만 CSS 스크립트를 사용하거나 이 파일을 자유롭게 변경할 수 있습니다.

 div.storefront-sorting:nth-child(2){
	텍스트 정렬:가운데;
} 
#main div.storefront-sorting h1{
	글꼴 스타일:일반;
}
#메인 h1,#메인 h2{
	글꼴 두께:굵게;
	글꼴 스타일: 비스듬한;
	텍스트 정렬:가운데;
}
#main > .m-popular,#main > .b-seller,#main > .t-rated,#main > .t-clothing,#main > .t-posters{	
	테두리: 솔리드 #b8b8b8 1px;
	테두리 반경: 25px;
	여백-하단: 25px;
	패딩 상단: 35px;	
	패딩 왼쪽: 20px;
	패딩 오른쪽: 20px;	
} 
#main > .m-인기{
	배경색:#dbad97;	
}
#main > .b-판매자 {
	배경색:#b4e6a3;
}
#main > .t-등급 {
	배경색:#f0f695;	
}
#main > .t-의류 {
	배경색:#95b4f6;	
}
#main > .t-포스터 {
	배경색:#c88fe5;	
}

CSS 파일에서 사용자 정의 클래스를 포함하는 일부 선택기를 찾을 수 있습니다. 단축 코드를 생성하기 전에 생성했습니다. 예를 들어 다음과 같이 단축 코드에 "b-seller" 클래스를 추가했습니다.

 do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

따라서 WooCommerce 쇼핑 페이지에 CSS 스타일을 추가하면 다음과 같이 표시됩니다(전체 크기로 보려면 이미지를 클릭하십시오). 이미지를 클릭하면 전체 크기로 볼 수 있습니다

이미지를 클릭하면 전체 크기로 볼 수 있습니다.

또한 StoreFront 테마가 활성화되어 있으며, 아시다시피 CSS 선택기는 테마가 같더라도 웹사이트마다 다를 수 있습니다. 따라서 이 파일이 작동하도록 하려면 특정 사이트의 선택기를 편집해야 할 수도 있습니다.

BONUS : 페이지당 상품 수 변경 방법

이제 상점 페이지에서 페이지당 표시하는 제품 수를 변경하려고 한다고 가정해 보겠습니다. 예를 들어 페이지당 10개의 제품을 표시하려면 functions.php 파일에 다음 코드를 추가하기만 하면 됩니다.

 add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

함수 new_loop_shop_per_page( $cols ) {
  $cols = 10;
  $cols를 반환합니다.
}

여기서 $cols 는 옵션 -> 읽기 에서 값을 가져오고 각 페이지에 표시할 제품 수를 반환하는 페이지당 제품 수를 포함합니다.

4. WooCommerce 쇼핑 페이지의 루프 파일 편집

지금까지 우리는 프로그래밍 방식으로 WooCommerce 쇼핑 페이지를 사용자 정의하기 위해 archive-product.php 템플릿 파일을 편집하는 방법을 보았습니다. 이 파일은 페이지의 모든 제품을 표시하기 위해 WC 루프가 실행되는 위치입니다. 이제 플러그인 편집기나 IDE에서 WooCommerce 플러그인 폴더를 열고 루프 폴더를 엽니다. archive-product.php 파일과 같은 수준에서 찾을 수 있습니다.

루프 폴더에서 편집하여 쇼핑 페이지를 더욱 맞춤화할 수 있는 일부 파일을 찾을 수 있습니다. 이 파일을 덮어쓰려면 자식 테마에 복제된 폴더와 파일을 만들어야 합니다. 이전에 만든 WooCommerce 폴더 아래에 loop 라는 새 폴더를 만듭니다.

그런 다음 플러그인 템플릿에서 원본 sale-flash.php 파일을 복사하여 하위 테마의 이 루프 폴더에 붙여넣습니다. sale-flash.php 중인 모든 제품에 애니메이션 gif를 추가합니다. 파일을 보면 제품이 세일 중일 때 "SALE" 메시지를 표시하는 스크립트임을 알 수 있습니다.

4.1 애니메이션 GIF의 기본 "sale" 텍스트 교체

이 섹션에서는 기본 판매 메시지를 비활성화하고 애니메이션 GIF로 바꾸는 방법을 보여줍니다. 다음과 같이 보이도록 자식 테마의 flash-sale.php 파일을 편집해야 합니다.

 정의됨('ABSPATH') || 출구;
글로벌 $post, $product;
if ( $product->is_on_sale() ) { 
   $an_gif = '<img src="https://i1.wp.com/tamingchaos.net/wp-content/uploads/2020/04/Sale-Gif.gif" 너비="100px" 높이="60px"/ >';
   에코 $an_gif;
}

거기에서 gif 파일을 원하는 다른 gif로 바꿀 수 있습니다.

4.2 정렬 옵션 및 페이지 매김 제거

이제 WooCommerce 쇼핑 페이지에서 "정렬 기준" 선택기와 페이지 매김 기능을 비활성화하는 방법을 살펴보겠습니다. sale-flash.php 파일로 수행한 작업과 유사하게 동일한 이름의 빈 파일을 저장하기만 하면 됩니다.

루프 폴더에 두 파일을 모두 만들고 orderby.php 및 pagination.php 라고 합니다. 두 파일을 완전히 비활성화하려면 다음 스크립트만 각 파일에 넣어야 합니다.

 정의됨('ABSPATH') || 출구;

이렇게 하면 쇼핑 페이지에 더 깔끔한 머리글과 바닥글이 표시됩니다. 게다가 많은 수의 제품을 표시하기 때문에 페이지 매김은 그다지 유용하지 않을 수 있습니다. 프로그래밍 방식으로 WooCommerce 쇼핑 페이지 편집 - 정렬 및 페이지 매김 sale-flash.php 파일에서 기본 WooCommerce 동작을 삭제하고 애니메이션 GIF를 표시하는 자체 동작을 추가했습니다. 이것은 매우 기본적인 작업이지만 이 기술은 고급 개발자에게 광범위한 가능성을 제공합니다.

최종 참고 사항

  • WooCommerce가 템플릿 업데이트를 릴리스하기로 결정한 경우 하위 테마의 WC 템플릿 파일은 덮어쓰기를 방지하지 않습니다. 그러나 이것은 거의 발생하지 않습니다.
  • 이들은 샘플 스크립트이며 프로덕션에 사용해서는 안 되며 교육 목적으로만 사용됩니다.

보너스: WooCommerce Shop 페이지에 카테고리 표시

마지막으로 약간의 코드를 사용하여 WooCommerce Shop 페이지에 카테고리를 추가하는 방법을 살펴보겠습니다. 이 방법은 코딩 기술이 있는 사용자에게 권장됩니다. PHP 외에도 코드 스타일을 지정하려면 약간의 CSS도 알고 있는 것이 좋습니다.

참고 : 시작하기 전에 사이트를 백업하고 아직 없는 경우 하위 테마를 만드십시오.

쇼핑 페이지에 카테고리 추가

대시보드에서 모양 > 테마 편집기 로 이동하여 하위 테마 functions.php 파일을 엽니다. 오른쪽 테마 파일 사이드바에서 functions.php 파일을 클릭하고 다음 스크립트를 붙여넣어 사용자 정의 기능을 추가하십시오.

아래 기능은 쇼핑 페이지의 다른 요소를 로드하기 전에 제품 카테고리를 추가합니다. 즉, 쇼핑객은 제품 카탈로그보다 먼저 모든 제품 카테고리를 볼 수 있습니다.

 함수 product_subcategories( $args = array() ) {
$parentid = get_queied_object_id();

$args = 배열(
'부모' => $parentid
);

$terms = get_terms( 'product_cat', $args );

if ( $terms ) {
echo '<ul class="제품 고양이">';

foreach ( $terms as $term ) {
echo '<li class="카테고리">'; 
woocommerce_subcategory_thumbnail( $term );
에코 '<h2>';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
echo $term->이름;
에코 '</a>';
에코 '</h2>';
에코 '</li>';
}

에코 '</ul>';
}

}

add_action( 'woocommerce_before_shop_loop', 'product_subcategories', 50 );

이 기능은 카테고리를 WooCommerce Shop 페이지에 추가합니다. 그러나 원하는 대로 정확하게 표시되지 않을 수 있으므로 약간의 CSS로 새 카테고리 섹션의 스타일을 지정해야 합니다. 이에 대한 자세한 내용은 상점 페이지에서 카테고리를 표시하고 스타일을 지정하는 방법에 대한 게시물을 확인하세요.

결론

대체로 상점 페이지는 매우 중요하며 상점을 만들거나 깨뜨릴 수 있습니다. 그렇기 때문에 코딩 기술이 있는 경우 WooCommerce 쇼핑 페이지를 프로그래밍 방식으로 편집 하고 최적화하여 전환율을 높이는 것이 좋습니다.

이 가이드에서는 상점의 다양한 측면을 추가, 제거 및 사용자 정의하는 방법을 보여주었습니다. 그러나 이것은 영감을 찾고 매장을 한 단계 더 발전시키는 데 도움이 될 수 있는 몇 가지 예와 아이디어에 불과합니다. 이제 마음껏 놀고 사용자 정의를 개발할 차례입니다.

WooCommerce 스토어를 사용자 정의하기 위한 더 많은 가이드를 보려면 다음을 확인하는 것이 좋습니다.

  • WooCommerce AJAX 장바구니 담기
  • 결제 페이지에 사용자 정의 필드를 추가하는 방법은 무엇입니까?
  • 프로그래밍 방식으로 WooCommerce 장바구니에 추가 기능

마지막으로 Facebook Shop을 WooCommerce와 연결하려면 이 전체 가이드를 살펴봐야 합니다. 온라인 상점을 사용자 정의 했습니까? 당신은 무엇을 변경 했습니까? 질문이 있으시면 아래에 댓글을 남겨주세요. 최선을 다해 도와드리겠습니다! Github에서 전체 코드를 확인할 수도 있습니다.