밑 줄 친 부분에 텍스트 말고 이미지를 넣고 싶습니다 .어떻게 해야하나요 ?
처음 만드는 거여서 상세하게 알려 주시면 감사하겠습니다.
감사합니다.
안녕하세요~^^
우커머스 외부/연계 상품일 때 버튼 텍스트에
이미지를 넣는 방법은 저희도 연구를 해봐야 할 듯합니다.
추후 좋은 방법을 찾게 되면 다시 안내해드리겠습니다.
고맙습니다.
조금 오래 걸리실까요 ㅠㅠ?
안녕하세요.
우커머스 내장 필터인 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 } }
이것을 테마에 적용 시켰습니다.
사이트는
올려주신 페이지에서 "카톡 상담" 버튼을 안 보이게 하는 건
이전 댓글에 안내해드린 CSS 코드를 적용해서 확인해보시겠어요?
고맙습니다.