programing

Woocommerce - 제품 종류 링크 방법

yellowcard 2023. 3. 31. 21:58
반응형

Woocommerce - 제품 종류 링크 방법

특정 제품 변형을 링크할 수 있는 방법을 찾고 있습니다.

이 플러그인으로 해결한 줄 알았는데...https://wordpress.org/plugins/woocommerce-direct-variation-link/

그런데 2단어 제품 속성명이 있는데 제대로 작동하지 않는 것 같습니까?두 단어 사이에 _, -, & +를 넣었지만 가지 않았다.

여기 의사 선생님...저 같은 경우에는 mysite.com/product/happy-ninja/?color=blue가 아닌 color style을 사용합니다.

mysite.com/product/happy-ninja/ ?color = blue & size = small (추가변형은 '&'로 구분)

mysite.com/product/happy-ninja/?color=blue+green(변동치는 '파란 녹색'으로 공백은 '+'로 대체됨)

또한 마지막 포스터는 그의 코드가 제대로 작동하지 않았지만 WooCommerce가 대부분의 경우 카트에 대해 이러한 코드를 생성한다는 것을 알게 되었습니다.

  1. 변종 제품을 직접 방문하십시오.
  2. 카트에 변형 추가
  3. 카트를 열고 아이템 위에 마우스를 올려놓습니다.상태 바의 링크(또는 오른쪽 클릭)> 링크 주소 복사)를 클릭합니다.

http://website.com/product/product-name/?attribute_colours=Grey와 같은 접미사가 붙어야 합니다.

:colours slug이기 입니다.Grey변주하다

이름의 에는 Variation을 합니다.+공간을 대신해서.

속성을 '다르다'부터 하면 될 것 요.&그리고 침 뱉고?attribute_[slug]=Variation

많은 사람들이 URL 파라미터로 특정 변형을 링크하는 솔루션을 찾을 것이라고 생각하기 때문에, 그 토픽에 대한 보다 긴 답변을 드리겠습니다.

여기에 기재되어 있는 다른 많은 것과 같이 속성 파라미터를 사용하여 모든 변동에 액세스 할 수 있습니다.제품 상세 페이지에서 변형을 선택하는 방법은 선택 메뉴입니다.해당 선택 항목의 이름 속성은 매개 변수 이름이고 옵션 값 속성은 매개 변수 값입니다.다음은 예를 제시하겠습니다.

여기에 이미지 설명 입력

표시된 는 '링크'가 .https://example.com/some_product/?attribute_pa_size=small

'다 하다'와 같이 여러 변수를 할 수 .https://example.com/some_product/?attribute_pa_size=small&attribute_pa_color=red

중요한 것은 개발 도구를 사용하여 이러한 정보를 찾는 것은 그리 편리한 솔루션이 아니라는 것입니다.아래는 특정 제품 Variation 탭/어코드온의 워드프레스 관리자에서 Variation Permalink를 나타내는 코드 스니펫을 테마 펑션.php(또는 단순한 파일 플러그인 내)에 추가할 수 있습니다.

add_action( 'woocommerce_product_after_variable_attributes', 'gdy_add_wc_varition_permalink', 100, 3 ); 
 
function gdy_add_wc_varition_permalink( $loop, $variation_data, $variation ) {
    
    echo '<a href="' . get_permalink( $variation->ID ) . '" target="_blank">' . __( 'Permalink for this variation' ) . '</a>';

}

많은 솔루션과 플러그인을 직접 시도해 보았지만 플러그인 없이도 쉽게 할 수 있는 방법을 찾았습니다.이것이 2015년 oktober에 효과가 있었는지 모르겠지만, 지금은 효과가 있습니다.

저는 이 유튜브 비디오 https://www.youtube.com/watch?v=Y_hMI4bXN6A에서 설명했습니다.

제품 뒤에 '/?color=red'와 같은 것을 추가하고 싶습니다.

website.com/shop/product1/?attribute_color=red
website.com/shop/product1/?attribute_length=10m

하지만 시행착오를 통해 알게 된 것은 당신이 사용하는 속성의 종류입니다.애트리뷰트는 2가지 방법으로 추가할 수 있습니다.즉, 미리 작성된 애트리뷰트(텍스트/선택) 또는 커스텀애트리뷰트입니다이 메서드로 직접 링크하는 것은 사용자 정의 제품 속성을 생성하는 경우에만 작동합니다.

캐피톨 문자를 사용했는지 여부에 대해 주의를 기울여야 합니다.커스텀 제품 속성의 이름은 백엔드에서 capitol을 사용해도 상관없습니다(url에서 테마를 사용하지 않는 한).단, 이 값에는 일반 문자만 사용할 수 있으며 capitol은 사용할 수 없습니다.이 두 문자는 URL 자체와 마찬가지로 백엔드에서도 사용할 수 있습니다.

이름: 색상

값: 빨강 | 검정, 녹색

website.com/shop/product1/?attribute_color=red > will work
website.com/shop/product1/?attribute_Color=red > will not work
website.com/shop/product1/?attribute_color=Red > will not work
website.com/shop/product1/?attribute_color=Black > will work
website.com/shop/product1/?attribute_color=black > will not work

저는 이 유튜브 비디오 https://www.youtube.com/watch?v=Y_hMI4bXN6A에서 설명했습니다.

다음 작업을 수행할 수 있습니다.

$variation_product_url = $variation_product->get_permalink();

나머지는 WooCommerce가 처리합니다. URL에 올바른 파라미터를 추가합니다.

저는 WooCommerce용 플러그인 Variation Swatch를 사용하고 있기 때문에 이것이 핵심 워드프레스/woocommerce 기능인지 잘 모르겠습니다.

제품 중 하나를 열어서 "제품 데이터"에서 "제품 링크" 탭으로 이동하여 내 변형 중 하나를 제품에 링크했습니다.업데이트 후 제품 페이지로 이동.링크된 제품을 클릭하면 다음과 같은 URL이 나타납니다.

example.eg/product/product-name-slug/?attribute_pa_kids-size=27&attribute_pa_color=navy

?attribute_pa_slug (와 following slug (following slug (following) slug (following slug (kids-size))이다.=민달팽이(27, 28, 27, 28, …) 민달팽이...)url url ribute Attribute 。민달팽이, 민달팽이, 민달팽이

어떤 경우에도 변형에 대한 직접 링크를 만들 수 있습니다. 즉, 사용자 지정 속성을 사용하는 변형과 미리 정의된 속성을 사용하는 변형 모두입니다.

URL에 추가해야 하는 URL 파라미터에 약간의 차이가 있을 뿐입니다.

예:

사용자 지정 특성 변형 URL:

domain.com/shop/product-x/?attribute_color=blue

미리 정의된 속성 변형 URL:

domain.com/shop/product-x/?attribute_pa_color=blue

유일한 차이점은 "pa_"입니다.

주의: 이 질문은 꽤 오래되었지만, 제가 도착해서 완전한 답을 찾지 못했기 때문에, 다른 사람들이 혜택을 볼 수 있도록 추가하겠습니다.

테스트하지 않았습니다만, 바리에이션명의 스페이스를 스페이스 문자의 URL 인코딩 버전인 %20으로 대체해 주세요.

추가 및 카트에서 복사하는 데 시간을 들이지 않고 링크를 쉽게 가져올 수 있는 또 다른 방법은 제품 정보를 XML 형식으로 내보낸 후 XML 파일에서 제품을 검색하여 필요한 링크를 복사하는 것입니다.

XML 형식은 wordpress admin -> tools -> export -> 변수에서 얻을 수 있습니다.

숭고한 텍스트 3 프로그램에서 파일을 열고 제목 또는 게시 ID로 검색합니다.variant의 URL을 쉽게 찾을 수 있습니다.카트에 추가하는 것보다 더 빨리 찾을 수 있습니다.

하나의 제품 페이지의 HTML 코드를 보고 제품 변수를 검색하여 콤보 ID를 선택하고 URL 끝에 추가합니다: ?attribute_YOUR_ID=가치

변수 옵션이 여러 개 있는 경우 &로 구분하여 조합할 수 있습니다.

예:

website.com/shop/product1/?attribute_id_of_variable_combo=value_of_combo 

Little JS 스니펫은 WooCommerce의 단일 제품 페이지 URL을 활성 변형 선택에 필요한 매개 변수로 자동으로 업데이트합니다.

사용자가 변동 선택을 변경할 때마다 URL이 새로운 파라미터로 갱신되므로 하드 리프레시 시 선택된 변동 내용이 표시됩니다.

또한 선택한 변형에 대한 직접 URL을 빠르게 가져올 수 있습니다.

브라우저 콘솔에 붙여넣고 실행합니다.테마/플러그인에서 사용할 수도 있습니다.

const els = document.querySelectorAll('.variations select')

// add el.name and el.value as query parameters to the URL
function updateURL(el) {
    const url = new URL(window.location.href)
    url.searchParams.set(el.name, el.value)
    window.history.pushState({}, '', url.href)
}

// update the URL when the user changes the select
els.forEach(el => el.addEventListener('change', () => updateURL(el)))

아래를 브라우저 북마크바의 새로운 엔트리에 붙여넣고 지정된 WC 단일 제품 페이지에서 클릭합니다.

javascript:(function()%7B%2F**%0A%20*%20Little%20JS%20snippet%20to%20automatically%20update%20the%20WooCommerce%20single%20product%20page%20URL%20with%20the%20needed%20parameters%20for%20the%20active%20variations'%20selection.%0A%20*%20%0A%20*%20Each%20time%20the%20user%20changes%20the%20variation%20selection%2C%20the%20URL%20is%20updated%20with%20the%20new%20parameters%2C%20so%20on%20hard%20refresh%20the%20selected%20variation%20is%20displayed.%0A%20*%20%0A%20*%20Also%2C%20fast%20way%20to%20get%20the%20direct%20URL%20to%20the%20selected%20variation.%0A%20*%20%0A%20*%20Paste%20it%20into%20your%20browser%20console%20and%20run%20it.%20Or%20use%20it%20in%20your%20theme%2Fplugins.%0A%20*%2F%0A%0Aconst%20els%20%3D%20document.querySelectorAll('.variations%20select')%0A%0A%2F%2F%20add%20el.name%20and%20el.value%20as%20query%20parameters%20to%20the%20URL%0Afunction%20updateURL(el)%20%7B%0A%20%20%20%20const%20url%20%3D%20new%20URL(window.location.href)%0A%20%20%20%20url.searchParams.set(el.name%2C%20el.value)%0A%20%20%20%20window.history.pushState(%7B%7D%2C%20''%2C%20url.href)%0A%7D%0A%0A%2F%2F%20update%20the%20URL%20when%20the%20user%20changes%20the%20select%0Aels.forEach(el%20%3D%3E%20el.addEventListener('change'%2C%20()%20%3D%3E%20updateURL(el)))%7D)()%3B

https://gist.github.com/devidw/2f674f273fb556cb48c82dc1b70aff25

언급URL : https://stackoverflow.com/questions/33202678/woocommerce-how-to-link-to-product-variation

반응형