우커머스 장바구니에서 수량 변경 시 장바구니 자동 업데이트 방법
워드프레스 우커머스(WooCommerce) 쇼핑몰에서 고객이 상품을 장바구니에 추가한 후 장바구니에서 수량을 변경하는 경우, "장바구니 갱신" 버튼을 눌러야 장바구니 합계 금액이 업데이트됩니다.
사용자가 장바구니 페이지에서 상품 수량을 조절할 때마다 장바구니가 자동으로 갱신되도록 하고 싶은 경우 있을 수 있습니다.
그런 경우 다음 방법을 사용할 수 있습니다.
단계 1: 우커머스 "장바구니 갱신(Update Cart)" 버튼 숨기기
다음과 같은 CSS 코드를 추가하도록 합니다. 워드프레스에서 사용자 지정 CSS 코드를 추가하는 방법은 "워드프레스에서 CSS 추가하기"를 참고하세요.
/* 우커머스 '장바구니 갱신' 버튼 숨기기 */
/* Hide WooCoommerce "Update Cart" button */
input[name='update_cart'] {
display: none !important;
}
/* 또는 */
button[name='update_cart'] {
display: none !important;
}테마에 따라 위의 코드를 추가해도 "장바구니 갱신" 버튼이 사라지지 않을 수 있습니다. 그런 경우 테마에 맞게 변경해야 합니다. 예를 들어, 아바다 테마에서는 다음 코드로 "장바구니 갱신" 버튼을 숨길 수 있습니다.
/* 아바다 테마에서 '장바구니 갱신' 버튼 숨기기 */
/* Hide "Update Cart" button in Avada */
.cart-collaterals .cart_totals .fusion-button.fusion-update-cart {
display: none !important;
}단계 2: 장바구니 페이지에서 수량 변경 시 장바구니 자동 갱신
다음으로 사용 중인 테마의 함수 파일에 다음 코드를 추가하여 고객이 수량을 변경할 때 장바구니가 자동 업데이트되도록 합니다. (차일드 테마를 사용해야 테마가 업데이트되어도 변경 사항이 사라지지 않습니다.)
/* 수량 변경 시 장바구니 자동 갱신 */
/* Auto update cart when changing quantity */
add_action( 'wp_footer', 'auto_refresh_cart_amount' );
function auto_refresh_cart_amount() {
if (is_cart()) {
?>
<script type="text/javascript">
jQuery('div.woocommerce').on('click', 'input.qty', function(){
jQuery("[name='update_cart']").trigger("click");
});
</script>
<?php
}
}인터넷에서 검색되는 대부분의 글에서 위와 같은 코드를 제시합니다. 하지만 위의 코드를 적용해보면 숫자 증감 버튼을 이용하여 수량을 변경하는 경우에는 제대로 작동하지 않을 수 있습니다.
위의 코드 대신 다음 코드를 사용하면 고객이 수량 증감 버튼을 클릭할 때마다 장바구니가 갱신되도록 할 수 있습니다.
add_action( 'wp_footer', 'auto_refresh_cart_amount_alternative' );
function auto_refresh_cart_amount_alternative() {
if (is_cart()) {
?>
<script type="text/javascript">
jQuery('div.woocommerce').on('click', 'input.qty, input.plus, input.minus', function(){
jQuery("[name='update_cart']").trigger("click");
});
</script>
<?php
}
}위의 코드를 Flatsome과 Avada 테마에서 추가하여 테스트해보니 잘 작동했습니다. 코드를 넣어도 변화가 없으면 캐시 플러그인의 캐시와 브라우저 캐시를 삭제한 후에 테스트해보세요.
위의 방법이 번거롭게 느껴지거나 코드를 추가하는 방법이 어렵게 느껴지는 경우 Ajax Cart AutoUpdate for WooCommerce 같은 무료 플러그인을 사용하면 간단합니다.
이 플러그인은 상품 수량이 변경되면 장바구니 페이지와 미니 장바구니를 자동으로 업데이트하는 가벼운 플러그이라고 소개되어 있네요. 기본 "장바구니 갱신" 버튼이 제거됩니다. 선택 사항으로 장바구니 페이지 공지 사항을 끌 수 있습니다.
