우커머스 외부연계 상품 데이터

밑 줄 친 부분에 텍스트 말고 이미지를 넣고 싶습니다 .어떻게 해야하나요 ? 

처음 만드는 거여서 상세하게 알려 주시면 감사하겠습니다.

 

 

감사합니다.

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

    우커머스 외부/연계 상품일 때 버튼 텍스트에

    이미지를 넣는 방법은 저희도 연구를 해봐야 할 듯합니다.

    추후 좋은 방법을 찾게 되면 다시 안내해드리겠습니다.

    고맙습니다.

  • 조금 오래 걸리실까요 ㅠㅠ?

  • 안녕하세요.

    우커머스 내장 필터인 woocommerce_product_single_add_to_cart_text 필터를 활용하시면

    외부/연계 상품 버튼 텍스트를 변경하실 수 있습니다.

    다만, 우커머스 쪽에서 버튼 텍스트 쪽에 esc_html 함수로

    HTML 태그를 문자로 표시하고 있기 때문에 다른 방법을 활용해주셔야 할 듯합니다.

     

    woocommerce_after_add_to_cart_button 액션을 활용해보시겠어요?

    워드프레스 관리자 -> 외모 -> 테마 편집기 페이지에서 functions.php 파일 하단에

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

    add_action('woocommerce_after_add_to_cart_button', 'my_woocommerce_after_add_to_cart_button');
    function my_woocommerce_after_add_to_cart_button(){
    	global $product;
    	
    	if($product->get_type() == 'external'){
    		?>
    		<img src="이미지주소">
    		<?php
    	}
    }

    위의 코드에서 이미지주소 부분에는 실제 이미지 주소로 적용해보세요.

    위의 코드를 적용하시면 모든 외부/연계 상품 버튼 텍스트 쪽에 이미지를 별도로 표시하실 수 있습니다.

     

    특정 상품에만 적용하시려면

    아래의 코드로 교체해보세요.

    add_action('woocommerce_after_add_to_cart_button', 'my_woocommerce_after_add_to_cart_button');
    function my_woocommerce_after_add_to_cart_button(){
    	global $product;
    	
    	if($product->get_type() == 'external' && $product->get_id() == '1'){ // 실제 상품 ID로 적용해주세요.
    		?>
    		<img src="이미지주소">
    		<?php
    	}
    }

    위의 코드에서 $product->get_id() == '1' 부분의 숫자는

    실제 상품 id로 적용해보세요.

     

    우커머스 상품 id를 확인하는 방법은

    워드프레스 관리자 -> 우커머스 -> 상품 -> 모든상품 -> 상품 선택하시면

    주소에 아래처럼 표시됩니다.

    페이지주소/wp-admin/post.php?post=1&action=edit

    위의 코드에서 post=1 부분이 상품 id입니다.

     

    워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드도 추가하시면 기존의 버튼을 안 보이게 하실 수 있습니다.

    .woocommerce .product-type-external .single_add_to_cart_button { display: none; }

    고맙습니다.

  • add_action('woocommerce_after_add_to_cart_button', 'my_woocommerce_after_add_to_cart_button'); function my_woocommerce_after_add_to_cart_button(){ global $product; if($product->get_type() == 'external'){ ?> <img src="이미지주소"> <?php } }

    이것을 테마에 적용 시켰습니다.

     

     

    사이트는 

    https://katzekorears.com/product/%eb%a0%8c%ed%83%88-%ea%b3%b5%ea%b8%b0%ec%b2%ad%ec%a0%95%ea%b8%b0-%ec%9d%98%eb%a5%98%ea%b1%b4%ec%a1%b0%ea%b8%b0-%ea%b2%b0%ed%95%a9%ec%83%81%ed%92%88/ 사이트는 이곳입니다.

  • 올려주신 페이지에서 "카톡 상담" 버튼을 안 보이게 하는 건

    이전 댓글에 안내해드린 CSS 코드를 적용해서 확인해보시겠어요?

    고맙습니다.

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