안녕하세요?
오늘은 php code 내에서 class 설정 방법에 대해서 문의하고 합니다.
우커머스 로그인/회원가입 폼을 세팅법을 공부하고 있는데요.
디자인을 변경하려면 class를 지정해 css 명령을 주기 때문에 해당 객체에 class 지정하는 것이 중요하다고 들었습니다.
그래서 회원가입 내용들에 대해서는 각기 class를 지정했는데요.
일부에서는 지정된 class대로 나오지 않네요. 해당 코드는 아래처럼 class와 label class를 지정했습니다.
- class : iconic-register-checkboxes-required
'iconic-register-checkboxes-required' => array(
'type' => 'checkboxes', 'checked',
'class' => array('iconic-register-checkboxes-required', 'form-row-wide'),
'label' => __( '가입 필수 동의 사항', 'iconic' ),
'label_class' => 'iconic-register-checkboxes-required-label',
'options' => array(
// 1 => __( '[필수] 만 14세 이상 확인', 'iconic' ),
1 => __( '[필수] <a href="https://ownergolf.net/privacy-policy/" target="_blank">개인보호정책</a> 및 <a href="https://ownergolf.net/terms-of-service/" target="_blank">이용 약관</a> 동의', 'iconic' ),
2 => __( '[필수] <a href="https://ownergolf.net/위치-정보-이용-정책/" target="_blank">위치 정보 이용</a> 동의', 'iconic' ),
3 => __( '[필수] 서비스 메일/SMS 등 <a href="https://ownergolf.net/커뮤니케이션-정책/" target="_blank">커뮤니케이션</a> 동의', 'iconic' ),
),
'hide_in_account' => false,
'hide_in_admin' => false,
'hide_in_checkout' => true,
'hide_in_registration' => false,
'required' => true,
'value' => array(1, 2, 3)
),
그런데 실제로는 요소검사를 해보면 class는 form-row라고 나옵니다.
다른것들은 별 문제가 없는데 여기가 이상합니다.
그러다보니 알려주신 여러가지 코드가 서로 악영향을 끼쳐서 이상한 상태가 되고 말았습니다.
https://ownergolf.net/my-account에서 확인할 수 있습니다.
여기에는 알려주신 아래 코드가 적용되어 있습니다.
.woocommerce form .form-row { float: left; }
.woocommerce form.login .woocommerce-LostPassword { clear: both; }
.woocommerce form.login .form-row:nth-child(3) { width: 100%; }
무엇이 잘못되었을까요?
가입필수 동의사항부에 class를 제대로 주려면 어떻게 해야할까요?
그리고 checkboxies 왼쪽에 있는 점을 없애려면 어찌해야하나요?
감사합니다.
안녕하세요~^^
아래 링크에 올려주신 코드와 같은 코드인지요?
https://www.cosmosfarm.com/threads/document/36466
해당 코드에서 woocommerce_form_field 함수를 활용하고 있기 때문에
우커머스 woocommerce_form_field 함수에 대해 알아보시면 도움이 되실 듯합니다.
저희가 만든 제품이 아니라면 모든 코드와 구조를 알 수 없기 때문에
도움을 드리는 데 한계가 있습니다.
다만 저희는 홈페이지 주소를 알려주시면
수정 시 막히시는 부분을 간단히 도움을 드릴 수 있습니다. (HTML, CSS 코드 등)
고맙습니다.
네 같은 코드입니다.
그리고 구현되어 있는 곳은 https://ownergolf.net/my-account입니다.
고맙습니다.
체크박스 왼쪽에 표시되어 있는 점은 안 보이게 하시려면
워드프레스 관리자 -> 외모(테마 디자인) -> 사용자 정의하기 -> CSS 입력 필드에
아래의 코드를 추가해보시겠어요?
.woocommerce form .form-row ul { list-style: none; }
CSS list-style에 대한 자세한 내용은
아래의 링크를 참고해보세요.
https://www.w3schools.com/cssref/pr_list-style-type.asp
고맙습니다.