Shop 페이지 WooCommerce에서 드롭다운 변형 드롭다운을 표시하는 방법
게시 됨: 2021-07-19
WooCommerce 쇼핑 페이지에 드롭다운 변형을 표시하는 방법을 찾고 있습니까? 이 게시물에서 우리는 당신을 위한 간단한 솔루션을 공유할 것입니다. 그러나 사용자 지정 코드를 사용하게 되므로 이 솔루션을 구현하려면 약간의 코딩 경험이 필요합니다.
대부분의 전자 상거래 상점에는 다양한 제품이 있습니다. 고객은 변형을 보려면 단일 제품 페이지를 클릭해야 합니다.
상품 바리에이션을 샵 페이지에 표시하면 고객의 마음을 사로잡을 수 있습니다. 또한 몇 번의 클릭만으로 제품을 확대할 수 있습니다.
WooCommerce Show Dropdown Variations on Shop 페이지
이 가이드가 끝나면 상점 페이지에 프로그래밍 방식으로 변형 드롭다운을 표시할 수 있습니다. 그러나 먼저 제품 페이지에서 제품 변형을 만들어야 한다는 점을 염두에 두는 것이 중요합니다.
계속 진행하기 전에 하위 테마도 설치하거나 생성해야 합니다. 이렇게 하면 업데이트 중에 변경 사항이 손실되지 않습니다. 또한 실수할 경우 이전 버전으로 되돌릴 수 있도록 계정을 백업해야 합니다.
바로 들어가 보겠습니다.
쇼핑 페이지에 드롭다운 변형 드롭다운을 표시하는 단계
다음은 따라야 할 간단한 단계입니다.
- WordPress 사이트에 로그인하고 관리자로 대시보드 에 액세스합니다.
- 대시보드 메뉴에서 모양 메뉴 > 테마 편집기 메뉴 를 클릭합니다. 테마 편집기 페이지가 열리면 테마 기능 파일을 찾아 상점 페이지에 드롭다운 변형을 표시하는 기능을 추가합니다.
- php 파일 에 다음 코드를 추가 합니다.
// Display variations dropdowns on shop page for variable products
add_filter( 'woocommerce_loop_add_to_cart_link', 'njengah_display_variation_dropdown_on_shop_page' );
function njengah_display_variation_dropdown_on_shop_page() {
global $product;
if( $product->is_type( 'variable' )) {
$attribute_keys = array_keys( $product->get_attributes() );
?>
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $product->get_available_variations() ) ) ?>">
<?php do_action( 'woocommerce_before_variations_form' ); ?>
<?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
<?php else : ?>
<table class="variations" cellspacing="0">
<tbody>
<?php foreach ( $product->get_variation_attributes() as $attribute_name => $options ) : ?>
<tr>
<td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
<td class="value">
<?php
$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
?>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<div class="single_variation_wrap">
<?php
/**
* woocommerce_before_single_variation Hook.
*/
do_action( 'woocommerce_before_single_variation' );
/**
* woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
* @since 2.4.0
* @hooked woocommerce_single_variation - 10 Empty div for variation data.
* @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
*/
do_action( 'woocommerce_single_variation' );
/**
* woocommerce_after_single_variation Hook.
*/
do_action( 'woocommerce_after_single_variation' );
?>
</div>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<?php endif; ?>
<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>
<?php } else {
echo sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
);
}
}
- 결과는 다음과 같습니다.
마무리
이제 상점 페이지에 드롭다운 변형을 표시할 수 있습니다. 그러나 코딩에 익숙하지 않은 경우 YITH WooCommerce 색상 및 레이블 변형(프리미엄 버전) 또는 WooCommerce 변형 마스터(프리미엄 버전)와 같은 플러그인을 사용하는 것이 좋습니다.
샵페이지에서 추가 커스텀 작업이 필요하시면 언제든지 연락주세요. 이 게시물이 문제에 대한 해결책을 찾는 데 도움이 되었기를 바랍니다.
유사한 기사
- WooCommerce에서 장바구니 보기 버튼을 추가하는 방법
- WooCommerce에서 상점 페이지 제목을 변경하는 방법
- WooCommerce에서 모든 제품을 삭제하는 방법
- WooCommerce에서 쇼핑 페이지에 검색을 추가하는 방법
- WooCommerce에 Amazon 제휴 제품을 추가하는 방법
- WooCommerce의 제품 페이지에 이미지를 업로드하는 방법
- WordPress WooCommerce에서 분류되지 않은 카테고리를 제거하는 방법
- WooCommerce 맞춤형 단일 제품 생성 페이지
- Elementor 및 연락처 양식 플러그인으로 연락처 양식을 추가하는 방법
- Shopify에서 WooCommerce로 마이그레이션하는 방법
- Elementor Pro로 WooCommerce 제품 페이지를 사용자 정의하는 방법
- MailChimp를 WooCommerce와 통합하는 방법
- WooCommerce 관리자에 로그인하는 방법
- 사용자 정의 제품 필드를 추가하는 방법 WooCommerce
- WooCommerce에서 제품을 내보내는 방법
- 쇼핑 페이지에서 카테고리를 숨기는 방법 WooCommerce
- WooCommerce 데이터베이스를 백업하는 방법
- WooCommerce에서 제품 브랜드 이름을 얻는 방법