우커머스 상점페이지에서 필터링 방식을 실렉트 형태에서 탭형태로 변경하는 방법 문의

최근 우커머스가 3.8버전으로 업그레이드 되었습니다.

반가운 일이죠^^

그런데 우커머스 상점(shop) 페이지의 필터링 (인기순, 평점순, 최신순, 가격순 등) 방식이

실렉트 박스 형식으로만 되어있습니다.

 

국내 많은 쇼핑몰에는 이러 방식이 아닌 탭 방식 (상단 좌측 부터 인기순, 평점순 등으로 나열되는 방식) 으로

되어 있는 경우가 많습니다.

 

우커머스에도 이런 탭 방식을 적용할 수 있는가 찾아보아도 답변을 찾을 수가 없어서 문의드립니다.

이와 관련해서 아시는 분은 답변을 부탁드립니다.

 

감사합니다!

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    우커머스 상점 페이지에서 인기순, 평점순, 최신순, 가격순 등의 필터링은

    FTP로 접속해서 /wp-content/plugins/woocommerce/templates/loop/orderby.php 파일에서 표시하고 있습니다.

     

    별도로 수정해서 버튼 형식으로 교체하시려면

    /wp-content/themes/사용중인테마/woocommerce/loop/orderby.php 파일을 추가해보세요.

    orderby.php 파일의 내용에는

    아래의 코드를 추가해보세요.

    <?php
    if ( ! defined( 'ABSPATH' ) ) {
    	exit;
    }
    
    ?>
    <form class="woocommerce-ordering" method="get">
    	<?php foreach ( $catalog_orderby_options as $id => $name ) : ?>
    		<button type="button" onclick="my_woocommerce_loop_orderby(this, this.form)" data-orderby="<?php echo $id?>"><?php echo $name?></button>
    	<?php endforeach; ?>
    	<input type="hidden" name="orderby" value="">
    	<input type="hidden" name="paged" value="1" />
    	<?php wc_query_string_form_fields( null, array( 'orderby', 'submit', 'paged', 'product-page' ) ); ?>
    </form>
    
    <script>
    function my_woocommerce_loop_orderby(button, form){
    	var orderby = jQuery(button).data('orderby');
    	
    	jQuery('input[name="orderby"]').val(orderby);
    	jQuery(form).submit();
    }
    </script>

    고맙습니다.

  • 스레드봇님^^~
    빠른 답변에도 놀라왔지만, 답변 주신대로 하니....  잘됩니다!!!

    우커머스로는 안되는 줄 알고 포기하려다가,
    혹시나 코스모스팜에서 답변을 얻을 수 있을지 않을까 하고

    큰 기대를 안하고 드린 질문인데,
    너무 고맙습니다^^

    감사합니다!!!

     

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기