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

게시 됨: 2021-01-09

전자 상거래 상점에서 제품 페이지를 사용자 정의하는 방법을 찾고 계십니까? 이 가이드에서는 프로그래밍 방식으로 WooCommerce 제품 페이지 를 편집하는 방법을 보여줍니다.

제품 페이지 사용자 정의

상점에서 무엇이든 사용자 정의할 수 있지만 WooCommerce에서 대부분의 사용자 정의가 발생하는 두 개의 기본 페이지는 상점 페이지와 제품 페이지입니다. 판매를 늘리고 구매 프로세스의 시작을 최적화하려면 두 가지 모두에 대해 작업해야 합니다. 쇼핑 페이지를 사용자 지정하는 방법을 이미 살펴보았으므로 오늘은 코드를 사용하여 프로그래밍 방식으로 제품 페이지를 편집하는 방법을 보여 드리겠습니다.

최고의 고객 경험을 제공하는 데 중점을 둔 깔끔한 디자인은 전체 구매 프로세스를 개선하고 전환율을 높이는 데 도움이 됩니다. 제품 페이지를 사용자 정의하는 두 가지 주요 방법이 있습니다.

  • 플러그인 사용
  • 프로그래밍 방식으로

일부 플러그인이 도움이 될 수 있지만 원하는 모든 기능을 갖춘 플러그인을 찾는 것은 긴 과정이 될 수 있습니다. 따라서 기본적인 개발자 기술이 있다면 프로그래밍 방식으로 WooCommerce 제품 페이지를 편집하는 것이 좋습니다. 타사 도구 설치를 피할 수 있을 뿐만 아니라 원하는 모든 것을 사용자 정의할 수 있는 훨씬 더 많은 유연성을 갖게 됩니다.

플러그인 및 페이지 빌더로 제품 페이지를 사용자 정의하려면 이 가이드를 확인하십시오.

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

이 섹션에서는 단일 제품의 WooCommerce 제품 페이지를 편집하는 방법을 배웁니다. 다음 주제를 다룰 것입니다.

  1. 후크 사용
    1. 요소 제거
    2. 요소 재정렬
    3. 새 요소 추가
    4. 조건부 논리 적용
      1. 로그인한 사용자 및 사용자 역할
      2. 제품 ID 및 분류
    5. 제품 탭 편집
    6. 가변 제품 지원
  2. WooCommerce 템플릿 파일 재정의
    1. 메타 정보 편집
    2. 특정 제품 카테고리에 대한 맞춤 템플릿으로 전환
      1. single-product.php 파일 편집
      2. 새로운 content-single-product.php 파일 생성
      3. 새 content-single-product.php 파일을 편집하여 사용자 지정 템플릿 만들기
  3. CSS 스크립트로 제품 페이지 사용자 정의

WooCommerce 제품 페이지 레이아웃

튜토리얼을 시작하기 전에 단일 제품에 대한 WooCommerce의 기본 제품 페이지를 살펴보고 각 요소를 식별해 보겠습니다. 템플릿의 다른 섹션과 정보가 구성되는 방식에 주의하십시오. 가이드의 뒷부분에서 참조할 것이기 때문입니다. WooCommerce 단일 제품 페이지 제품 페이지의 출력을 담당하는 두 개의 기본 WooCommerce 파일이 있습니다.

  1. single-product.php : 현재 레이아웃에 필요한 템플릿을 빌드합니다.
  2. content-single-product.php : 이 파일은 템플릿의 내용을 인쇄합니다.

두 파일 모두 자식 테마를 사용하여 덮어쓸 수 있습니다. 이것은 WooCommerce 템플릿 파일을 덮어쓰는 일반적인 방법입니다. 그러나 WordPress가 사이트를 사용자 지정할 때 권장하는 모범 사례 중 하나이기 때문에 가능한 경우 템플릿 파일을 덮어쓰는 대신 WooCommerce 후크를 사용하려고 시도해야 합니다.

반면에 기능이나 개체가 포함된 복잡한 작업의 경우 템플릿 파일을 편집해야 할 수 있습니다. 두 기술을 결합하면 원하는 거의 모든 사용자 정의를 달성할 수 있습니다. 따라서 이 튜토리얼에서는 두 가지 방법을 모두 사용하여 WooCommerce 제품 페이지를 편집하는 방법을 보여줍니다.

시작하기 전에 스크립트를 테스트할 하위 테마를 생성하거나 플러그인을 사용하여 생성하는지 확인하세요. 이러한 각 기술이 매장을 최대한 활용하는 방법을 배울 수 있도록 몇 가지 실용적인 예를 살펴보겠습니다.

1) 후크를 사용하여 WooCommerce 제품 페이지 편집

참고 : WooCommerce 후크와 사용 방법에 익숙하지 않은 경우 이 가이드를 확인하세요.

1.1) 단일 제품 페이지에서 요소 제거

단일 제품 페이지에서 요소를 제거하는 데 사용할 수 있는 몇 가지 WooCommerce 후크가 있습니다. 각각은 특정 요소 그룹과 함께 작동하므로 올바른 후크, 올바른 WooCommerce 콜백 기능 및 올바른 우선 순위 값을 사용해야 합니다.

예를 들어, 모든 제품 페이지의 제목을 제거하려면 하위 테마의 functions.php 파일에서 다음 스크립트를 사용합니다.

 remove_action(/* hook -> */'woocommerce_single_product_summary', /* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );

여기 또는 WooCommerce 플러그인의 content-single-product.php 파일에 있는 주석에서 모든 후크 및 관련 매개변수를 찾을 수 있습니다. 이제 다른 요소를 제거하고 제품 페이지를 사용자 정의하는 다른 샘플 스크립트를 살펴보겠습니다.

 // 제목 제거
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// 평점 별 제거
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// 제품 메타 제거 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// 설명 제거
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
// 이미지 제거
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
// 관련 제품 제거
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
// 추가 정보 탭 제거
remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

1.2) 요소 재정렬

제품 페이지의 요소를 재정렬하는 것은 매우 간단합니다. 먼저, 이전과 같은 방식으로 후크를 제거해야 하고, 다른 우선순위/주문 번호로 다시 추가해야 합니다. 예를 들어 다음 스크립트는 제품 설명을 제목 바로 아래로 이동합니다.

 // 설명 순서 변경
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );

보시다시피 작업을 제거한 다음 다른 우선 순위(20 대신 6)로 다시 추가합니다. 왜 우리는 6의 우선순위/순서를 선택했습니까? 제목 요소의 우선순위 값이 5라는 것을 알고 있으므로 제목(6) 바로 뒤에 콜백 요소를 표시하기 위해 사용자 정의 후크에 할당해야 하는 우선순위 값을 알 수 있습니다.

1.1에서 제공한 정보를 사용하여 모든 후크 및 콜백에 대해 동일한 작업을 수행하고 원하는 순서대로 배치할 수 있습니다.

1.3) 새로운 요소 추가

새 콘텐츠를 추가하여 WooCommerce 제품 페이지를 사용자 지정해야 하는 경우 템플릿 파일 재정의를 고려해야 할 수 있습니다. 그러나 다음 후크를 사용하여 새 콘텐츠를 추가할 수도 있습니다.

 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="?added-content">축하합니다. 방금 링크를 추가했습니다!</a></h4>');
}
);

woocommerce_before_single_product_summary 후크 제품 페이지 사용자 정의 또는 고유한 함수를 만들 수 있습니다.

 add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function');
기능 QuadLayers_callback_function(){
    printf('
    <h1> 안녕하세요!</h1>
    <div><h5>맞춤 제품 페이지에 오신 것을 환영합니다</h5>
    <h4><a href="?link-to-somewere">somewere에 연결!</a></h4>
    <img src="https://img.freepik.com/free-vector/bird-silhouette-logo-vector-illustration_141216-100.jpg" />
    </div>');
}

woocommerce_after_single_product_summary 제품 페이지 사용자 정의

1.4) 단일 제품 페이지의 조건부 논리

이전에 체크아웃 페이지에서 조건부 필드를 추가하는 방법을 살펴보았지만 제품 페이지에도 추가할 수 있습니다. WordPress 기본 기능을 사용하여 원하는 요구 사항을 충족하는 조건부 논리를 만들 수 있습니다. 몇 가지 예를 살펴보겠습니다.

1.4.1) 로그인한 사용자 및 사용자 역할

user_is_logged_in() 은 웹사이트 방문자를 확인하는 데 사용되는 기본 WordPress 함수입니다. 또한 wp_get_current_user() 함수를 사용하여 로그인한 사용자와 관련된 모든 정보를 검색할 수 있습니다. 다음 스크립트에서는 사용자가 로그인했는지 여부와 역할에 따라 일부 콘텐츠를 추가할 뿐이지만 더 복잡한 기능을 위해 사용자 정의 기능을 추가할 수 있습니다.

 add_action('woocommerce_before_single_product','QuadLayers_get_user');
함수 QuadLayers_get_user() {
    if( is_user_logged_in() ) {
    $user = wp_get_current_user(); 
    printf('<h1>안녕하세요 ' .$user->user_nicename.'!</h1>');
    $roles = ( 배열 ) $user->roles;
        if($roles[0]=='관리자'){
            echo "<h4><b>당신은 $roles[0]</h4></b>입니다";
        }     
    } 
    또 다른 {
    반환 배열();
    }     
}
1.4.2) 제품 ID 및 분류

마찬가지로 제품 ID 및/또는 제품 카테고리를 검색할 수 있습니다. 차이점은 글로벌 WP $post 개체를 사용하여 ID를 가져 get_the_terms() 함수를 사용하여 제품 범주를 가져올 것이라는 점입니다.

 add_action('woocommerce_before_single_product','QuadLayers_get_product_taxonomies');
함수 QuadLayers_get_product_taxonomies(){ 
    글로벌 $post; 
    $term_obj_list = get_the_terms( $post->ID, 'product_cat' );
    $terms_string = 조인(', ', wp_list_pluck($term_obj_list, '이름'));
    if($terms_string=='포스터'){
        에코 "
<h1>이것은 최고의 $terms_string</h1> 중 하나입니다."; echo "<h2>제품 ID: $post->ID"; } }

위의 스크립트는 단일 범주를 반환합니다. 여러 범주 또는 태그를 검색해야 하는 경우 더 복잡한 기능을 만들어야 합니다. 아래와 같이 조건을 적용하기 전에 분류를 반복해야 합니다.

 add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomies');
함수 QuadLayers_get_multiple_taxonomies(){
    글로벌 $post;
    $args = array( '분류' => '제품 태그',);
    $terms = wp_get_post_terms($post->ID,'product_tag', $args);
    $count = count($terms);
 if ($count > 0) {
        echo '<div class="custom-content"><h4>태그 목록:</h4><ul>';
        foreach($terms as $term) {echo '<li>'.$term->name.'</li>';}
        에코 "</ul></div>";
    }
}

1.5) 제품 탭 편집

woocommerce_product_tabs 필터 후크를 사용하면 추가 정보 섹션에서 새 탭을 제거, 추가, 재정렬 또는 추가할 수 있습니다. 다음 스크립트는 설명 탭과 해당 내용을 제거하고 리뷰 탭의 이름을 바꾸고 추가 정보의 우선 순위를 처음으로 변경합니다.

 add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
기능 woo_remove_product_tabs( $tabs ) {
    설정 해제( $tabs['설명'] ); // 설명 탭 제거
    $tabs['리뷰']['제목'] = __( '평점' ); // 리뷰 탭의 이름을 바꿉니다.
    $tabs['추가_정보']['우선순위'] = 5; // 처음에 추가 정보
    $ 탭을 반환합니다.
}

프로그래밍 방식으로 WooCommerce 제품 페이지 편집 - 제품 탭 사용자 정의 탭의 내용을 편집하려면 다음과 같은 콜백 함수를 사용해야 합니다.

 add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );

기능 woo_custom_description_tab( $tabs ) {
	$tabs['description']['콜백'] = 'woo_custom_description_tab_content'; // 사용자 정의 설명 콜백
	$ 탭을 반환합니다.
}
기능 woo_custom_description_tab_content() {
	에코 '
<h2>사용자 정의 설명</h2>
'; echo '여기에 사용자 정의 설명이 있습니다'; }

마찬가지로 다음과 같이 새 탭을 만들 수 있습니다.

 add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
기능 woo_new_product_tab( $tabs ) {	
	// 새 탭을 추가합니다.	
	$tabs['test_tab'] = 배열(
		'제목' => __( '신상품 탭', '우커머스' ),
		'우선순위' => 50,
		'콜백' => 'woo_new_product_tab_content'
	);
	$ 탭을 반환합니다.
}
기능 woo_new_product_tab_content() {
	echo '<h2>새 제품 탭</h2><p>여기에 새 제품 탭 내용이 있습니다</p>.'; 
}

이 예에서는 "새 제품 탭"이라는 새 탭을 만들었습니다. 정면에서 보면 이런 모습입니다.

1.6) 가변 제품 지원

상품 변형은 WooCommerce 기본 기능이며 사용자 정의 없이 가변 상품을 만들고 사용할 수 있습니다. 그러나 제품 변형과 호환되는 맞춤형 솔루션을 만들려면 WooCommerce 지침을 따라야 합니다.

모든 맞춤형 솔루션은 단일 페이지가 아니라 전체 웹사이트와 통합되어야 한다는 점에 유의하는 것이 중요합니다. 따라서 이를 염두에 두고 가변 제품과 관련된 사용 가능한 일부 후크를 계속 사용할 수 있습니다. 이러한 후크는 가변 제품 페이지에 있을 때만 트리거됩니다.

  • woocommerce_before_variations_form
  • woocommerce_before_single_variation
  • woocommerce_single_variation
  • woocommerce_after_single_variation

2) WooCommerce 템플릿 파일을 재정의하는 제품 페이지 사용자 지정

프로그래밍 방식으로 WooCommerce 제품 페이지를 편집하는 두 번째 대안은 템플릿 파일을 재정의하는 것입니다. 이 방법은 이전 방법보다 약간 더 위험하므로 시작하기 전에 사이트의 전체 백업을 만드는 것이 좋습니다. 방법을 잘 모르겠다면 WordPress 사이트를 백업하는 방법에 대한 이 가이드를 확인하세요.

WooCommerce 템플릿 파일을 재정의하는 것은 하위 테마의 다른 파일을 재정의하는 것과 유사하므로 테마를 업데이트할 때 사용자 정의 내용이 손실되지 않도록 하려면 하위 테마를 만들거나 이러한 플러그인이 없는 경우 이 플러그인을 사용하는 것이 좋습니다.

2.1) 메타 정보 편집

메타 정보를 편집하려면 해당 데이터를 인쇄하는 템플릿 파일을 재정의해야 합니다. WooCommerce 플러그인에 있는 meta.php 파일은 다음 경로를 따릅니다. woocommerce/templates/single-product/meta.php

이제 하위 테마 파일 디렉토리를 편집하고 WooCommerce 폴더를 만듭니다. 그런 다음 그 안에 단일 제품 이라는 다른 폴더를 만들고 여기에 meta.php 파일을 붙여넣습니다. Child_theme/woocommerce/single-product/meta.php

그런 다음 meta.php 파일을 편집하고 프런트엔드에서 변경 사항을 볼 수 있어야 합니다. 다음 meta.php 샘플 파일은 다음을 수행합니다.

  • SKU 레이블을 ID로 변경
  • 태그를 Published로 변경합니다.
  • 카테고리 라벨 제거
 글로벌 $product;
?>
<div class="product_meta">

	<?php do_action( 'woocommerce_product_meta_start' ); ?>

	<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( '변수' ) ) ) : ?>

		<span class="sku_wrapper"><?php esc_html_e( 'ID:', '우커머스' ); ?> 
			<span class="sku"><?php 에코 ( $sku = $product->get_sku() ) ? $sku : esc_html__( '해당 사항 없음', '우커머스' ); ?>
			</span>
		</span>
	<?php endif; ?>
	<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), '우커머스 ' ) . ' ', '</span>' ); ?>
	<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( '게시된 위치:', '게시된 위치:', count( $product->get_tag_ids) () ), '우커머스' ) . ' ', '</span>' ); ?>
	<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

2.2) 특정 제품 범주에 대한 사용자 지정 템플릿으로 전환

이제 좀 더 복잡한 작업을 시도해 보겠습니다. 현재 제품이 특정 카테고리에 속하는 경우에만 단일 제품 템플릿을 재정의합니다.

2.2.1) single-product.php 파일 편집

먼저 single-product.php 파일을 복사하여 WooCommerce 디렉토리의 하위 테마 폴더에 붙여넣습니다.

Child_theme/woocommerce/single-product.php

그런 다음 파일을 열고 37행을 확인하십시오. wc_get_template_part('content','single-product');

이것이 content-single-product.php 파일이 작동하는 방식이며 현재 제품의 모든 요소를 ​​인쇄하여 루프를 완료하고 레이아웃을 빌드합니다.

제품이 지정된 범주에 속하는 경우에만 이 파일을 재정의하고 싶으므로 37행을 삭제합니다. wc_get_template_part( 'content', 'single-product' ); 다음 스크립트로 교체하십시오.

 $terms = wp_get_post_terms( $post->ID, 'product_cat' );
				$categories = wp_list_pluck( $terms, 'slug' );
			
				if ( in_array( '포스터', $categories ) ) {
					wc_get_template_part( '콘텐츠', '단일 제품 포스터' );
				} 또 다른 {
					wc_get_template_part( '콘텐츠', '단일 제품' );
				}

우리는 WooCommerce에서 제공하는 샘플 제품을 사용하고 있으므로 이 예제에서 사용하는 " 포스터 "라는 범주가 있습니다. " 포스터 "를 웹사이트의 기존 제품 카테고리로 교체하기만 하면 됩니다.

기본 WordPress 대시보드 > 제품 > 카테고리 에서 모든 제품 카테고리의 슬러그를 찾을 수 있음을 기억하십시오.

2.2.2) 새로운 content-single-product.php 파일 생성

이제 기본 content-single-product.php 파일을 재정의할 새 파일을 만들어야 합니다. 이 파일의 이름에는 카테고리 슬러그가 있습니다.

content-single-product-posters.php 파일이 어떻게 호출되는지 위의 예를 살펴보십시오. 이는 파일 이름이 이전 단계의 코드와 일치해야 하므로 파일 이름이 content-single-product-/*YOURCATEGORYSLUG*/.php 여야 하기 때문에 중요합니다.

이렇게 하면 wc_get_template_part( 'content', 'single-product-YOURCATEGORY' ) 가 content-single-product-YOURCATEGORY.php 파일을 트리거하고 기본 WooCommerce 템플릿 파일을 재정의합니다.

기본 content-single-product.php 파일을 하위 테마의 WooCommerce 폴더에 붙여넣고 위에 설명된 지침에 따라 이름을 변경한 다음 일부 버전을 만들어 테스트합니다.

2.2.3) 새로운 content-single-product.php 파일을 편집하는 사용자 정의 템플릿 생성

현재 상품이 " 포스터 " 카테고리에 속하는 경우에만 출력되는 샘플 상품 페이지입니다. 일부 콘텐츠를 추가하고 요소를 추가 및 제거하고 재정렬하고 일부 단축 코드를 실행한 것을 볼 수 있습니다.

기본 예제임에도 불구하고 템플릿 페이지에서 수행할 수 있는 작업에 대한 아이디어를 제공하고 새로운 가능성을 탐색할 수 있습니다.

 // 제품 요약 요소 제거
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
	
		// 사용자 정의 콘텐츠
		printf('<h1>이것은 <b>'.$post->post_name입니다.' </b>포스터</h1>');
		printf('<h4>"포스터" 카테고리 제품에 대한 전체 맞춤형 제품 페이지</h4>');
		// 설명
		printf('<h5>'.$post->post_excerpt.'</h5>');
		//썸네일
		do_action( 'woocommerce_before_single_product_summary' );
				
		//메타 추가
		do_action( 'woocommerce_single_product_summary');
		// 단축 코드
		echo do_shortcode(' [ add_to_cart show_price="false" class="my-addtocart" ] '); echo "<h3>연락처:</h3>".do_shortcode('[wpforms]'); echo "<h3>더 많은 포스터:</h3>".do_shortcode(' [ product_category category="posters" orderby="desc" limit="4" ] ');

이제 프론트엔드를 확인하면 다음이 표시됩니다. 프로그래밍 방식으로 WooCommerce 제품 페이지를 편집하는 방법 - 특정 분류에 대한 제품 페이지 템플릿 우리는 전역 post 객체를 사용하고 있다는 점에 유의하십시오. var_dump($post); 현재 제품과 관련하여 사용 가능한 모든 정보를 표시합니다. 제품 설명과 함께 샘플 스크립트에서 수행한 것처럼 $post->post_excerpt 와 같은 데이터를 사용할 수 있습니다.

3) CSS 스크립트로 제품 페이지 사용자 정의

프로그래밍 방식으로 WooCommerce 제품 페이지(및 기타 페이지)를 편집하는 또 다른 편리하고 간단한 방법은 CSS 코드를 사용하는 것 입니다. 이렇게 하면 제품 페이지의 스타일을 지정하고 비즈니스의 모양과 느낌을 주는 데 도움이 됩니다.

    1. 먼저 CSS 스크립트를 추가할 수 있도록 자식 테마에 확장자가 .css 인 새 파일을 만들어야 합니다. 쉽게 찾을 수 있도록 이름을 single-product.css 또는 이와 유사한 이름으로 지정하는 것이 좋습니다.
    2. 그런 다음 functions.php 및 style.css 파일과 같은 수준의 하위 테마 메인 폴더에 파일을 배치합니다.
    3. 그런 다음 자식 테마의 functions.php 파일에 다음 스크립트를 붙여넣고 필요한 경우 CSS 파일 이름을 바꾸세요.
 add_action( 'wp_enqueue_scripts', 'load_custom_product_style' );
      함수 load_custom_product_style() {
        if ( is_product() ){
        wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );
          wp_enqueue_style('product_css');
        }
	  }

if(is_product()) 조건부는 현재 페이지가 제품 페이지인지 확인합니다. 이렇게 하면 제품 페이지가 아닐 때 CSS 파일을 불필요하게 로드하는 것을 방지할 수 있습니다.

4. 이 스니펫을 추가한 후 사용자 정의 CSS 규칙을 CSS 파일에 추가하여 제품 페이지의 스타일을 편집할 수 있어야 합니다.

이 방법은 매우 간단하고 빠르고 쉬운 솔루션을 제공하지만 경우에 따라 이상적이지 않을 수 있습니다. CSS는 프론트엔드에서 편집할 수 있으므로 사용자가 브라우저 개발자 도구 사용법을 알고 있다면 CSS를 편집하여 숨겨진 요소를 쉽게 표시할 수 있습니다.

CSS로 WooCommerce 단일 제품 페이지 편집

약간의 CSS를 사용하여 제품 페이지에서 변경할 수 있는 몇 가지 다른 예를 살펴보겠습니다.

다음 스크립트를 적용하려면 WordPress 대시보드에서 모양 > 사용자 정의 > 추가 CSS로 이동합니다.

제목 글꼴 크기 변경

이렇게 하면 페이지 제품 제목의 글꼴 크기가 32로 변경됩니다. 코드를 조정하여 원하는 크기를 선택하기만 하면 됩니다.

 .woocommerce div.product .product_title { 
        글꼴 크기: 32px; 
}
제목 색상 변경

제품 페이지 제목의 색상을 사용자 정의할 수도 있습니다. 그렇게 하려면 다음 코드를 사용하고 색상을 조정하기만 하면 됩니다. 이 예에서는 주황색을 사용합니다. 이와 같은 16진수 코드 선택기를 사용하여 원하는 색상을 선택하는 것이 좋습니다.

 .woocommerce div.product .product_title { 
            색상: #FFA500; 
}
지금 구매 버튼의 색상 변경

마찬가지로 지금 구매 버튼의 색상을 변경할 수 있습니다. 이 예에서는 닷저 블루를 사용하고 있지만 코드를 조정하여 원하는 다른 색상을 선택할 수 있습니다.

 .woocommerce div.product .버튼 { 
        배경: #1E90FF; 
}

결론

요약하면, 온라인 상점을 사용자 정의하는 것은 경쟁업체와 차별화되는 핵심입니다. 제품 페이지는 모든 매장에서 가장 중요한 페이지이며 고객 경험을 개선하고 판매를 늘리기 위해 할 수 있는 일이 많습니다.

플러그인을 사용할 수 있지만 코딩 기술이 있는 경우 프로그래밍 방식으로 WooCommerce 제품 페이지를 편집하는 것이 좋습니다. 추가 도구를 설치할 필요 없이 상점의 모든 요소를 ​​사용자 정의할 수 있는 많은 유연성을 제공합니다. 이 가이드에서는 세 가지 방법으로 제품 페이지를 사용자 지정하는 방법을 살펴보았습니다.

  • 후크 사용
  • WooCommerce 템플릿 재정의
  • CSS 스크립트 사용

가능하면 템플릿 파일을 덮어쓰는 대신 WooCommerce 후크를 사용하도록 시도해야 합니다. WordPress가 권장하는 모범 사례 중 하나이며 덜 위험합니다. 그러나 기능이나 개체가 포함된 복잡한 작업의 경우 템플릿 파일을 편집해야 할 수 있습니다. 두 기술을 결합할 수 있다면 상점에서 원하는 모든 것을 사용자 정의할 수 있습니다.

마지막으로 이 튜토리얼에서 사용한 모든 샘플 스크립트를 포함하는 완전한 하위 테마를 살펴보십시오. 상점을 사용자 정의하는 방법에 대한 자세한 내용은 다음 가이드를 확인하십시오.

  • WooCommerce 템플릿 파일을 사용자 정의하는 방법 배우기
  • WooCommerce Shop 페이지를 사용자 정의하는 방법
  • WooCommerce에서 장바구니에 추가 버튼 사용자 지정
  • WooCommerce 관련 제품을 제거하는 방법
  • WooCommerce Checkout을 편집하는 방법(코딩 및 플러그인)

튜토리얼 이후에 문제가 있었나요? 아래 댓글 섹션에 알려주시면 최선을 다해 도와드리겠습니다.