새로운 WooCommerce 차단 플러그인 개요

게시 됨: 2019-01-21

WooCommerce를 설치하거나 업데이트하면 WooCommerce Blocks라는 새로운 플러그인이 포함됩니다. 이렇게 하면 페이지와 게시물에 WooCommerce 제품을 추가할 수 있는 WordPress 블록 편집기에 새 블록이 추가됩니다. 이 기사에서는 WooCommerce Blocks를 살펴보고 무엇을 할 수 있는지 알아보겠습니다.

WooCommerce 차단 플러그인

WooCommerce Blocks는 Gutenberg에 7개의 블록을 추가하는 WooCommerce의 새로운 애드온입니다.

특별 상품
엄선된 제품
베스트 셀러 제품
최고 평점 제품
최신 제품
세일 제품
카테고리별 제품

각 블록은 조정 가능한 그리드 내에 표시되며 정렬하거나 필터링할 수 있습니다. 그리드를 사용하여 레이아웃의 열 수를 지정할 수 있습니다. 슬라이더 컨트롤을 조정하여 1~6개의 열 중에서 선택합니다. 여러 블록을 사용하여 행 수를 조정할 수도 있습니다. 4는 열 또는 행이 있는 모든 블록의 기본값입니다. 페이지 매김을 포함하지 않으므로 설정한 숫자만 표시됩니다.

필터를 사용하면 범주를 선택할 수 있습니다. 일부에는 새로움, 가격, 등급, 판매, 제목 또는 메뉴 순서로 정렬할 수 있는 정렬 기능이 포함되어 있습니다.

블록에는 사용자 정의 CSS 필드가 있는 표준 Gutenberg 고급 탭도 포함됩니다.

제품 블록 활성화

WooCommerce를 업데이트하거나 활성화하면 플러그인 목록에 새 플러그인이 표시됩니다. 여기에 표시되지 않으면 플러그인 아래의 새로 추가 탭에서 WooCommerce 블록을 검색할 수 있습니다.

플러그인 목록에서 블록을 활성화하거나 WordPress 대시보드 상단의 버튼을 클릭하여 블록을 활성화할 수 있습니다.

WooCommerce 블록 사용

WooCommerce라는 새 탭이 Gutenberg 편집기 내에서 사용 가능한 블록 목록에 추가됩니다. 이 탭 안에는 7개의 WooCommerce 블록 세트가 있습니다. 각 블록에는 해당 기능과 일치하는 아이콘이 있어 한 눈에 알아볼 수 있습니다.

페이지에 블록을 추가하면 클릭하여 빠르게 추가할 수 있는 페이지에 기호가 나타납니다.

각 블록을 살펴보자.

특별 상품

추천 제품을 사용하면 목록에서 표시할 단일 제품을 선택할 수 있습니다. 텍스트를 정렬하고 오버레이를 편집하고 이미지를 편집할 수 있습니다. 또한 추가 CSS 클래스 필드가 있습니다.

이 블록은 모든 WooCommerce 블록 중에서 가장 많은 사용자 정의가 가능합니다. 상단에 있는 텍스트 버튼으로 텍스트 방향을 설정합니다. 편집을 클릭하면 오버레이에 대한 사용자 정의가 열립니다. 여기에서 제품을 선택하고, 설명을 표시하고, 가격을 표시하고, 오버레이 색상을 선택하고, 불투명도를 설정할 수 있습니다.

사용할 색상을 선택하거나 여러 색상의 원을 클릭하여 사용자 정의 색상을 선택할 수 있습니다. 여기에서 16진수 코드, RGB 코드를 입력하거나 슬라이더 및 색상 선택기로 색상을 조정할 수 있습니다. 오버레이 조정이 마음에 듭니다. 텍스트나 버튼을 조정하려면 CSS를 사용해야 합니다.

엄선된 제품

엄선된 제품을 통해 표시할 제품을 선택할 수 있습니다. 블록 자체 또는 오른쪽 열에서 검색할 수 있습니다. 1-6에서 열 수를 설정합니다. 새로움, 가격, 등급, 판매, 제목 또는 메뉴 순서로 주문하십시오.

제품을 선택하면 그리드 내의 레이아웃에 추가됩니다.

베스트 셀러 제품

베스트 셀러 제품을 사용하면 블록에서 아무 것도 선택할 수 없지만 오른쪽 설정에서 모든 사용자 정의를 수행할 수 있습니다. 여기에서 열과 행의 수(각각 1-6에서 선택)를 선택하고 카테고리별로 필터링하고 CSS를 조정할 수 있습니다.

이 예에서는 열 6개, 행 2개, 의류 카테고리를 선택했습니다.

최고 평점 제품

최고 평점 제품은 또한 블록을 선택하면 제품을 추가합니다. 설정에는 1-6개의 열과 행에 대한 표준 레이아웃, 범주별 필터링 및 CSS가 포함됩니다. 이것은 기본 설정을 보여줍니다.

세일 제품

판매 중인 제품은 판매 중인 모든 제품을 자동으로 로드합니다. 또한 열 및 행, 제품 필터 및 CSS에 대한 레이아웃 옵션이 포함됩니다. 이것은 새로움, 가격, 등급, 판매, 제목 또는 메뉴 순서로 주문할 수 있도록 Order By 옵션을 추가합니다. 이 예에서는 열을 2로, 행을 4로 설정했습니다. 제품 범주는 기본값으로 두었습니다.

카테고리별 제품

범주별 제품을 사용하면 블록 내에서 범주를 선택할 수 있으며 선택 항목을 구체화하는 데 도움이 되는 선택기가 포함됩니다. 내 예의 경우 하나의 옵션(선택한 범주)만 있었습니다. 또한 레이아웃 옵션, 카테고리 선택, 정렬 기준 및 CSS 설정이 포함됩니다.

이 예에서는 카테고리를 선택하고 열을 4로, 행을 2로 설정하고 제품을 알파벳순으로 정렬했습니다.

WooCommerce 블록이 있는 예제 페이지

다음은 프런트 엔드의 각 블록을 살펴보겠습니다. 나는 그들을 식별하기 위해 레이블을 추가했습니다. 각각 다른 수의 열로 설정했지만 이미지가 손에 닿지 않도록 하기 위해 모두 1행이 있습니다. 이 블록을 사용하여 각 카테고리에 대한 상점 페이지를 쉽게 만들 수 있습니다.

예를 들어 액세서리를 보여주기 위해 페이지를 만들었습니다. 표지 이미지와 제목을 추가하고 3개의 열과 6개의 행을 표시하도록 Products by Category 블록을 설정했습니다.

멋진 디자인으로 깔끔한 페이지를 만들고, 물론 악세사리 카테고리의 상품만 보여줍니다. 이것은 모든 유형의 제품 페이지를 만드는 데 사용할 수 있습니다.

다음은 이중 열에 직접 선택한 블록과 텍스트 블록을 추가하는 짧은 CTA입니다.

페이지는 단순하지만 기능적입니다.

이 페이지의 경우 블로그 게시물 레이아웃 내에 베스트 셀러 제품을 추가했습니다. 4열 1행으로 설정하고 카테고리로 의류를 선택했습니다.

게시물이 멋지게 보입니다. 출판하기 전에 제품에 대한 레이블과 공간을 추가하고 텍스트에 패딩을 추가할 수 있지만 가능성을 쉽게 볼 수 있습니다.

이를 위해 2열 레이아웃을 추가하고 2열 2행이 있는 텍스트 블록과 베스트 셀링 제품 블록을 추가했습니다.

마무리 생각

WooCommerce Blocks는 흥미로운 플러그인입니다. 블록은 사용하기 쉽고 몇 가지 유용한 카테고리, 레이아웃 및 필터링 도구를 제공합니다. 나는 열과 행 레이아웃 슬라이더를 좋아합니다. 텍스트, 버튼, 호버 오버레이 등을 조정하려면 CSS를 사용해야 하지만 최소한 사용자 정의 CSS는 옵션입니다. 블록은 판매 페이지를 만들거나 콘텐츠 내에 제품을 추가하는 데 유용합니다.

더 많은 스타일 기능(특히 버튼, 텍스트 및 호버 오버레이)을 보고 싶습니다. Divi를 사용하는 것처럼 계속 사용자 정의하고 싶었습니다(Divi가 저를 망쳐 놓은 것 같습니다). CSS를 사용하는 사람들에게 도움이 될 CSS 클래스 필드가 포함되어 있습니다. 많은 커스터마이징 없이도 블록을 사용하는 것이 좋았습니다. Gutenberg 페이지 및 게시물에 WooCommerce 제품을 포함하려면 WooCommerce Blocks를 사용해 볼 가치가 있습니다.

우리는 당신의 의견을 듣고 싶습니다. WooCommerce 블록을 사용해 보셨습니까? 의견에 귀하의 경험에 대해 알려주십시오.

Jomic/Shutterstock.com을 통한 추천 이미지