코스모스팜 스레드
우커머스 상점 리스트 구성(loop) 순서 변경 방법
1. 정확한 제품 또는 플러그인 이름
우커머스
2. 상세 내용
안녕하세요.
우커머스 상점에 상품리스트 부분의 구성요소 순서를 변경하고 싶습니다.
/www/wp-content/plugins/woocommerce/templates/content-product.php 의
<li <?php wc_product_class( '', $product ); ?>>
<?php
do_action( 'woocommerce_before_shop_loop_item' );
do_action( 'woocommerce_before_shop_loop_item_title' );
do_action( 'woocommerce_shop_loop_item_title' );
do_action( 'woocommerce_after_shop_loop_item_title' );
do_action( 'woocommerce_after_shop_loop_item' );
?>
</li>
여기서 li 속 구성요소 순서를 바꾸고 싶습니다.
/www/wp-content/plugins/woocommerce/templates/loop
li가 loop 폴더 안에 있는 파일들로 구성되어 있는 건 알겠는데
어떤 파일에서 순서를 지정하고 있는지 모르겠네요ㅜㅜ
위 그림처럼 장바구니버튼(add-to-cart.php)을 상품명 위로 올리고 싶습니다.
templates 안에 있는 모든 파일을 열어봤는데도 모르겠네요 ㅜ 도움 부탁드립니다.
3. 확인 가능한 상세 페이지 주소
4. 수정한 코드 내역 (있다면)
-
스레드봇 (30650 Point)ㆍ2023.02.21 18:43
안녕하세요~^^
아래 코드를 테마 functions.php에 입력후
add_filter('woocommerce_loop_add_to_cart_link', function(){ return; }); remove_action('woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title'); add_action('woocommerce_shop_loop_item_title', function(){ global $product; echo '<div class="wc-custom-title">'; echo '<h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h2>'; echo sprintf( '<a href="%s" data-quantity="%s" class="%s wc-custom-buttons" %s>%s</a>', esc_url( $product->add_to_cart_url() ), esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ), esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ), isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '', esc_html( $product->add_to_cart_text() ) ); echo '</div>'; }, 10);아래 코드를 테마 추가 css에 입력해보시겠어요?
.wc-custom-title { display: flex; justify-content: space-between; } .wc-custom-buttons { margin: 0 !important; }고맙습니다.
-
워드프레스웹사이트 (273 Point)ㆍ2023.02.22 15:33
안녕하세요.
구조를 바꾸려면 삭제하고 새로운 위치에 새로 생성해야하는 모양이네요.
혹시 상품가격(price)을 상품타이틀 밑으로 옮기는 방법도 알 수 있을까요?
-
스레드봇 (30650 Point)ㆍ2023.02.22 17:02
아래 링크에서 훅의 위치를 확인하실 수 있으며
https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
파일 경로상 woocommerce/templates/content-product.php
파일내에서 해당 위치에 관련된 훅들을 모두 확인하실 수 있습니다.
모든 상황에 하나씩 맞춰서 코드를 제공해드리기에는
어려움이 있기 때문에 직접 하나씩 해보시는 것이 더 좋을 듯 합니다.
코드를 작성하기에 많은 어려움이 있으시다면
프로젝트 의뢰에 자세한 내용을 남겨보시겠어요?
https://www.cosmosfarm.com/project
고맙습니다.
-
워드프레스웹사이트 (273 Point)ㆍ2023.02.22 18:18
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 ); // 가격 제거 add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_price', 10 ); // 가격 woocommerce_shop_loop_item_title 위치에 생성function에 이렇게 두줄만 추가했는데 해결됐습니다! 감사합니다~
