WooCommerce에서 사용자 정의 장바구니에 추가 버튼을 추가하는 방법
게시 됨: 2021-04-22
페이지에 사용자 정의 장바구니에 추가 버튼을 추가하는 방법을 찾고 있습니까? 장바구니에 추가 버튼은 모든 온라인 상점에서 매우 중요합니다. 고객이 이 버튼을 클릭하면 제품이 장바구니에 추가됩니다.
매출과 매출로 직결됩니다.
따라서 판매 제품을 포함할 페이지를 생성하려면 사용자 정의 장바구니에 추가 버튼을 추가하는 것이 중요합니다.
WooCommerce는 WordPress와 같이 다양한 수준에서 사용할 수 있는 많은 사용자 지정 옵션을 제공합니다.
WooCommerce에서 사용자 정의 장바구니에 추가 버튼을 추가하는 방법
이 게시물에서는 장바구니에 추가 버튼을 사용자 지정하고 템플릿 페이지에 추가합니다. 계속 진행하기 전에 몇 가지 코딩 기술이 필요하다는 점을 언급할 가치가 있습니다.
그러나 코드 처리에 익숙하지 않은 경우 각 단계를 설명하기 위해 최선을 다했으므로 계속 읽으십시오.
이를 달성하는 방법을 살펴보겠습니다.
WooCommerce에서 사용자 정의 장바구니에 추가 버튼을 추가하는 단계
시작하기 전에 템플릿 페이지에 버튼을 추가할 코드 조각이 있습니다.
<?php
/* Template Name: Customize Add To Cart*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<ul class="products">
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 12,
);
$loop = new WP_Query( $args );
if ($loop->have_posts()) {
while ($loop->have_posts()) : $loop->the_post();
?>
<div id="product-image1">
<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
title="<?php echo esc_attr( $product->get_title() ); ?>">
<?php echo $product->get_image(); ?>
</a>
</div>
<div id="product-description-container">
<ul>
<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
title="<?php echo esc_attr( $product->get_title() ); ?>">
<li><h4><?php echo $product->get_title(); ?></h4></li>
</a>
<li><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt )?></li>
<li><h2><?php echo $product->get_price_html(); ?> </h2></li>
<?php
echo apply_filters(
'woocommerce_loop_add_to_cart_link',
sprintf(
'<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button %s product_type_%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
$product->is_purchasable() ? 'add_to_cart_button' : '',
esc_attr( $product->product_type ),
esc_html( $product->add_to_cart_text() )
),
$product
);?>
</ul>
</div> <?php endwhile;
} else {
echo __( ' o products found' );
}
wp_reset_postdata();
?>
</ul>
<!--/.products--> </main>
<!-- #main -->
</div><!-- #primary --> <?php
do_action( 'storefront_sidebar' );
get_footer();
작동 원리
이 코드는 매우 이해하기 쉽습니다.
'post_type' => 'product'는 기본 WooCommerce 사용자 정의 게시물 유형입니다.
- 'posts_per_page' => 12는 페이지에 표시할 수 있는 최대 게시물 수를 설정합니다.
- apply_filters( 'woocommerce_short_description', $post->post_excerpt )는 장바구니의 페이지 URL과 장바구니에 있는 항목을 표시합니다.
- esc_attr( $product->get_id() ) 제품 ID를 가져옵니다.
- esc_attr( $product->get_sku() ) 제품의 SKU를 가져옵니다.
따라야 할 단계는 다음과 같습니다.
- WordPress 사이트에 로그인하고 관리자로 대시보드 에 액세스합니다.
- 대시보드 메뉴에서 모양 메뉴 > 테마 편집기 메뉴 를 클릭합니다. 테마 편집기 페이지가 열리면 사용자 정의 장바구니에 추가 버튼을 추가할 기능을 추가할 테마 기능 파일을 찾으십시오.
- php 파일 에 다음 코드를 추가 합니다.
add_filter('woocommerce_product_single_add_to_cart_text','njengah_add_to_cart_button_woocommerce');
function njengah_add_to_cart_button_woocommerce() {
return __('Custom add to cart button code', 'woocommerce');
}
- 결과는 다음과 같습니다.
결론
지금쯤이면 사용자 정의 장바구니에 추가 버튼을 추가할 수 있을 것입니다. 사용자 지정 버튼은 사용자 경험에 가치를 더하기 때문에 중요합니다.
사용자 정의 코드를 사용하여 페이지를 편집하고 있으므로 하위 테마를 만드는 것이 좋습니다. 이렇게 하면 업데이트 중에 변경 사항이 손실되지 않습니다.
유사한 기사
- 100개 이상의 팁, 트릭 및 스니펫 Ultimate WooCommerce Hide Guide
- 로그아웃 후 WooCommerce 리디렉션 [궁극적인 가이드]
- 체크아웃 후 WooCommerce 리디렉션: 맞춤 감사 페이지로 리디렉션
- WooCommerce에서 쇼핑 페이지에 검색을 추가하는 방법
- 장바구니 페이지에서 제품 이미지를 숨기는 방법 WooCommerce
- WooCommerce에서 상태 변경에 대해 이메일을 보내는 방법
- WooCommerce 등록 양식에 필드를 추가하는 방법
- WooCommerce에서 상점을 숨기는 방법
- WooCommerce에서 현재 제품 카테고리 이름을 얻는 방법
- 상위 30개 이상의 최고의 WordPress 양식 플러그인 » 최고의 WordPress 양식 플러그인
- 체크아웃 끝점을 변경하는 방법 WooCommerce
- WooCommerce 설명 탭을 기본적으로 열어 두는 방법
- WooCommerce에서 사용자 정의 카테고리 페이지를 만드는 방법
- WooCommerce에서 로그아웃 시 장바구니를 지우는 방법
- WooCommerce 제품 페이지를 사용자 정의하는 방법
- WooCommerce에 통화를 추가하는 방법 [커스텀 통화]
- 사용자가 WordPress에 로그인했는지 확인하는 방법
- 맞춤 주문 수신 페이지를 만드는 방법 WooCommerce
- WooCommerce에서 프로그래밍 방식으로 제품을 장바구니에 추가하는 방법
- 전문가처럼 WordPress 발췌문 길이를 제한하는 5가지 이상의 유용한 방법