WooCommerce 버튼의 색상을 변경하려면 버튼의 기본 style.css 파일을 변경하거나 교체해야합니다. 이렇게하려면 다음을 추가해야합니다. 맞춤 CSS 코드 우리에게 자녀의 워드 프레스 테마.

이를 수행하는 두 가지 방법이 있습니다.

• 하위 테마 style.css 파일에 사용자 정의 CSS 추가
• 일부 플러그인을 사용하여 웹 페이지에 사용자 정의 CSS 코드를 삽입하십시오.

1 단계 : 워드 프레스 간단한 사용자 정의 CSS에 플러그인을 설치하고 활성화

우리는 사용할 것입니다 워드 프레스 플러그인 페이지에 CSS 코드를 삽입하려면 WooCommerce 온라인 상점. 플러그인을 다운로드 할 수 있습니다 : 간단한 사용자 정의 CSS

당신은 우리의 자습서를 읽을 수 있습니다 WordPress 플러그인 설치 및 활성화.

플러그인을 활성화하면 새 하위 메뉴가 메뉴에 추가됩니다. apparence :

이 섹션에 액세스하면 사용자 정의 CSS 코드를 입력 할 수있는 텍스트 상자가있는 인터페이스로 이동합니다.

텍스트 상자에 다음 CSS를 넣고 " 업데이트 사용자 정의 CSS".

.woocommerce #content input.button.alt : .woocommerce #respond 입력 번호의 submit.alt, 마우스를 이동 : 마우스를 .woocommerce a.button.alt : 호버, .woocommerce button.button.alt : 호버, .woocommerce input.button. 고도는 : .woocommerce 페이지 버튼을 맴 돕니 다 : .woocommerce 페이지 #content의 input.button.alt를 가져 : 마우스를 .woocommerce 페이지 입력 #respond #의 submit.alt을 : 마우스를 .woocommerce 페이지 a.button.alt합니다. button.alt는 : .woocommerce 페이지 input.button.alt를 가져 : 가져가 {배경 : 빨간색 상당한를; 배경 색상! 빨간색 중요합니다; ! 색상 : 흰색 중요합니다; 텍스트 그림자! 투명 중요합니다; 상자 그림자 : 없음; 테두리 색! #ca0606 중요합니다; } .woocommerce #content Input.button이 : 마우스를 .woocommerce a.button : 호버, .woocommerce button.button : 호버, .woocommerce input.button : 호버, .woocommerce 페이지 번호를 .woocommerce #respond 입력 # 제출, 마우스를 행복 input.button : 마우스를 .woocommerce 페이지 a.button : 마우스를 .woocommerce 페이지 button.button : 마우스를 .woocommerce 페이지 input.button : .woocommerce 페이지 입력 #respond # 제출, 마우스를 가져가 {배경 :! 빨간 중요합니다; 배경 색상! 빨간색 중요합니다; ! 색상 : 흰색 중요합니다; 텍스트 그림자! 투명 중요합니다; 상자 그림자 : 없음; 테두리 색! #ca0606 중요합니다; } .woocommerce #content Input.button, .woocommerce #respond 입력 #은 .woocommerce의 a.button, .woocommerce의 button.button, .woocommerce의 input.button, .woocommerce 페이지 #content의 input.button, .woocommerce 페이지 번호를 제출 # 입력, .woocommerce 페이지 a.button, .woocommerce 페이지 button.button, .woocommerce 페이지 input.button를 응답 제출 {배경 : 빨간색 중요한; ! 색상 : 흰색 중요합니다; 텍스트 그림자! 투명 중요합니다; 테두리 색! #ca0606 중요합니다; } .woocommerce #content Input.button.alt : 호버, .woocommerce #respond 입력 번호의 submit.alt : 마우스를 .woocommerce a.button.alt : 호버, .woocommerce button.button.alt : 호버, .woocommerce input.button .ALT : .woocommerce 페이지 버튼을 맴 돕니 다 : .woocommerce 페이지 #content의 input.button.alt를 가져 : 마우스를 .woocommerce 페이지 입력 #respond #의 submit.alt을 : 마우스를 .woocommerce 페이지 a.button.alt을 .button.alt : .woocommerce 페이지 input.button.alt를 가져 : 가져가 {배경 : 빨간색 상당한를; 상자 그림자 : 없음; 텍스트 그림자! 투명 중요합니다; ! 색상 : 흰색 중요합니다; 테두리 색! #ca0606 중요합니다; }

이제 온라인 상점에 액세스 할 수 있으며 버튼의 색상이 실제로 변경되었음을 알 수 있습니다.

마지막으로 원하는 모양을 갖도록 버튼의 색상을 사용자 지정하려면

"속성 바꾸기 배경에서 : 빨간색 중요! 에 의해 당신의 선택의 색상. 코드를 업데이트하고 온라인 상점에 다시 액세스하십시오. 실제로 방금 제공 한 스타일링을 사용하면 버튼의 구조를 완전히 변경할 수 있습니다.

약간의 연구를 통해 귀하의 스타일에 맞는 독특한 버튼을 만들 수 있습니다. 워드 프레스 테마 (특히 후자가 WooCommerce와 호환되지 않는 경우).

다음 예제에서는 다음 CSS 코드를 사용할 수 있습니다.

.woocommerce #content input.button, .woocommerce #respond 입력 #이 .woocommerce의 a.button, .woocommerce의 button.button, .woocommerce의 input.button, .woocommerce 페이지 #content의 input.button을 제출 .woocommerce 페이지 #respond # 입력, .woocommerce 페이지 a.button, .woocommerce 페이지 button.button, .woocommerce 페이지 input.button {배경 컬러를 제출 #6fba26을; 패딩 : 10px; 위치 : 상대; 글꼴 - 가족 : '열기 산세', 산세 리프; 폰트 크기 : 12px; 텍스트 장식 : 없음; 색상 : #fff; 배경 이미지 : 선형 구배 (하단, RGB (100,170,30) 0의 %의 RGB (129,212,51) 100의 %); 상자 그림자 : 삽입 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; 경계 반경 : 5px; } .woocommerce #content input.button.alt : 마우스를, .woocommerce #respond 입력 # submit.alt : 마우스를, .woocommerce a.button.alt :두고 .woocommerce button.button.alt :두고 .woocommerce input.button .ALT : .woocommerce 버튼 페이지를 올려 : .woocommerce 페이지 #content의 input.button.alt를 올려 : 마우스를, .woocommerce 페이지에 입력 #respond # submit.alt을 : 마우스를, .woocommerce 페이지를 a.button.alt .button.alt : .woocommerce 페이지 input.button.alt를 가져 : 최고 맴 돕니 {: 7px을; 배경 이미지 : 선형 구배 (하단, RGB (100,170,30) 100의 %의 RGB (129,212,51) 0의 %); 상자 그림자 : 삽입 0px 1px 0px #0D496F, 삽입 0px -1px 0px #0D496F; 색상 : #156785; 텍스트 그림자 : 0px 1px 1px의 RGBA (255,255,255,0.3); 배경 : RGB (44,160,202); }

전환 또는 제품 판매와 관련하여 온라인 상점의 성능을 최적화하려는 경우,

또한이 작업을 위해 설계된 3 프리미엄 WordPress 플러그인도 제공합니다.

1. WooCommerce는 버려진 장바구니를 복구합니다

고객 종종 바구니를 채우고 떠납니다. 덕분에 버려진 카트 복구 WooCommerce 당신은 그들에게 연락하고 그들이 구매 한 것을 상기시키고 그들의 행동을 완료하도록 초대 할 수 있습니다.

장바구니가 폐기 된 시점과 구매 페이지로 직접 연결되는 링크가 포함 된 맞춤형 알림 이메일이 고객에게 전송되는 시점 사이의 시간 간격을 설정합니다. 구매 포인트.

다운로드 | 데모 | 웹 호스팅

2. WooCommerce 가격 숨기기 및 장바구니 버튼 플러그인에 추가

WooCommerce 가격 숨기기 플러그인을 사용하면 판매자가 여러 규칙을 만들어 가격을 숨기거나 로그인하지 않은 고객 또는 전자 상거래 웹 사이트에 대한 특정 액세스 권한이있는 사용자로부터 "장바구니에 추가"버튼을 숨길 수 있습니다.

특정 제품 또는 특정 범주에서 가격 및 "장바구니에 추가" 버튼을 숨길 수 있습니다. 사용자 지정 텍스트 또는 해당 항목으로 이동하는 버튼으로 바꿀 수 있습니다.  연락처 양식. 가격과 ' panie에 추가r "당신이 원하는 것에 따라.

다운로드 | 데모 | 웹 호스팅

3. WooCommerce 통화 전환기

이 플러그인을 사용하면 제품 가격을 한 통화에서 다른 통화로 실시간 전환 할 수 있습니다.

이것은 전 세계를 겨냥한 전자 상거래에서 특히 중요합니다. 이 플러그인은 고객의 위치에 관계없이 항상 온라인 상점에서 주문할 수 있도록합니다.

다운로드 | 데모 | 웹 호스팅

추천 자료

도움이되는 기타 권장 리소스를 찾아보세요. 온라인 상점의 성능을 최적화하십시오. 

• 50 WooCommerce는 플러그인 온라인 상점을 개선하기 위해
• 제휴 프로그램을 만드는 9 WordPress 플러그인
• 변수 제품의 속성을 향상시키는 9 WooCommerce 플러그인
• 블로그에서 시각적으로 CSS를 편집하는 5 WordPress 플러그인

결론

여기 있습니다! 이것으로 버튼 커스터마이징에 관한 튜토리얼입니다. 장바구니에 담기 WooCommerce에서. 당신의 친구와 공유하는 것을 망설이지 마십시오 소셜 네트워크 선호했다. 

그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작.

그러나 그 동안 귀하의 commentaires 전용 섹션의 제안.

...