Liệt kê các sản phẩm trong Elementor với Bảng sản phẩm WooC Commerce

Trong bài đăng này, chúng tôi sẽ chỉ cho bạn cách kết hợp Elementor và WC Product Table để tạo một trang WordPress tùy chỉnh hơn đồng thời tăng doanh số bán hàng cho cửa hàng WooC Commerce của bạn.

WordPress đơn giản hóa quá trình tạo một trang web và thiết lập và chạy nó một cách nhanh chóng. WooC Commerce là một plugin WordPress cho phép bạn biến bất kỳ trang web WordPress nào thành một cửa hàng trực tuyến hoạt động hoàn chỉnh. Tuy nhiên, bạn có nguy cơ tạo ra một trang web bắt chước, nếu bạn tiếp tục với các tùy chọn và tính năng mặc định của chúng, điều này có thể không phù hợp với nhu cầu kinh doanh của bạn. Điều quan trọng là phải xác định được những công cụ tốt nhất để thiết kế và tùy chỉnh trang web của bạn cho đến khi đạt được điều bạn muốn.

plugin WordPress và WooC Commerce có sẵn để nâng cao chức năng của cửa hàng của bạn — Ví dụ: Elementor amp công cụ đơn giản nhất để tùy chỉnh trang sản phẩm WooC Commerce của bạn. Mặc dù đây là một trong những ưu điểm đáng kể nhất nhưng nó cũng có một số nhược điểm đáng kể. Ví amp plugin WordPress từ các tác giả khác nhau, bạn có nguy cơ gặp phải lỗi tương thích và các biến chứng khác; điều này không xảy ra khi sử dụng plugin Elementor và Bảng sản phẩm WooC Commerce cho các trang web WordPress. Bạn sẽ có quyền kiểm soát tốt hơn đối với giao diện và chức năng của trang web khi sử dụng một trong hai plugin và chúng có thể được sử dụng kết hợp để nhận được kết quả tuyệt vời hơn nữa.

• Tổng quan nhanh về Bảng sản phẩm WooC Commerce và Khung phần tử
• Để kết hợp Bảng sản phẩm WooC Commerce vào trình soạn thảo văn bản hoặc tiện ích mã ngắn, hãy làm theo các bước sau:
• Accordion, tab và nút chuyển đổi có thể được sử dụng để sắp xếp một số bảng sản phẩm.

Tổng quan nhanh về Bảng sản phẩm WooC Commerce và Khung phần tử

Như đã nêu trước đây, có rất nhiều plugin WordPress có sẵn để hỗ trợ bạn tạo một trang web WordPress tốt hơn được cá nhân hóa theo yêu cầu cụ thể của bạn. Một số plugin được thiết kế để sử dụng trên quy mô lớn, trong khi những plugin khác được thiết kế để thêm một khía cạnh hoặc tính năng cụ thể.

Elementor là một amp về loại ứng dụng đầu tiên:

plugin xây dựng trang của chúng tôi cung cấp cho bạn giao diện hoàn toàn mới để xây dựng trang web và tạo trang web WordPress của bạn. Bạn có được nhiều quyền kiểm soát đối với cách kết hợp trang web của mình bằng cách chọn và tùy chỉnh một thư viện rộng lớn gồm các tiện ích, khối và bố cục.

Mặc dù Bảng sản phẩm WooC Commerce là một giải pháp tổng quát hơn nhưng nó cũng được nhắm mục tiêu nhiều hơn:

plugin này cho phép bạn tạo các bảng động, có thể tùy chỉnh hoàn toàn để liệt kê các sản phẩm và dịch vụ WooC Commerce của bạn. Tuy nhiên, do tương tác với WooC Commerce, các bảng này đặc biệt phù hợp để hiển thị các mặt hàng và dịch vụ theo cách thân thiện với người dùng và hấp dẫn trực quan đối với người mua hàng trực tuyến. plugin Post Table Pro tương tác bình đẳng với Elementor và liệt kê bất kỳ loại nội dung WordPress nào trong bảng thay vì chỉ các sản phẩm WooC Commerce (nếu bạn muốn hiển thị thứ gì đó tách biệt với sản phẩm – chẳng hạn như bài đăng, trang hoặc tài liệu), có thể được sử dụng thay thế.

Khi được sử dụng kết hợp với nhau, Bảng sản phẩm Elementor và WooC Commerce cung cấp các khả năng đa dạng đáng kể. Bạn có thể sử dụng chúng để tạo ra một số tác động đáng kể giúp tăng số lượng bán hàng cho cửa hàng WooC Commerce của bạn.

Bây giờ là lúc bắt tay vào công việc. Trong các phần sau, chúng ta sẽ xem xét một số amp thực tế về cách bạn có thể sử dụng Bảng sản phẩm và phần tử WooC Commerce để tạo các hiệu ứng tương tự như những hiệu ứng được hiển thị ở trên.

Khi nói đến việc kết hợp hai plugin này, không có giới hạn nào cả — và đây chỉ là một số khả năng. Với một chút thử nghiệm và sai sót, bạn có thể tập hợp nhiều trang khác nhau bằng cách sử dụng cùng một phương pháp cơ bản mà chúng tôi sẽ trình bày.

Đầu tiên và quan trọng nhất, bạn sẽ muốn đảm bảo rằng cả hai plugin đều được cài đặt chính xác trên trang web của mình. Thật tốt khi việc cài đặt Elementor và định cấu hình Bảng sản phẩm WooC Commerce không gây khó khăn và đơn giản. Bản thân WooC Commerce cũng phải được cài đặt và kích hoạt trước khi bạn có thể tiến hành bước này. Sau đó, bạn sẽ sẵn sàng bắt tay vào thực hiện dự án của mình.

Để kết hợp Bảng sản phẩm WooC Commerce vào trình soạn thảo văn bản hoặc tiện ích mã ngắn, hãy làm theo các bước sau:

Hãy bắt đầu với ứng dụng cơ bản và có lợi nhất có thể. Ngoài ra, nếu bạn chỉ muốn sử dụng bảng sản phẩm động trên trang web Elementor của mình, bạn có thể thêm nó vào một tiện ích và để nó xuất hiện ở giao diện người dùng của trang web.

Đảm bảo bạn đang sử dụng trình chỉnh sửa Elementor khi mở bất kỳ trang hoặc bài đăng nào để thực hiện việc này. Nếu bạn thấy giao diện WordPress quen thuộc, hãy nhấp vào nút Chỉnh sửa bằng Elementor để chuyển sang giao diện Elementor:

Nếu đây là lần đầu tiên bạn làm việc với Elementor, hãy cùng tham quan một chút quanh nền tảng này. Một khu vực rộng lớn sẽ xuất hiện ở bên phải nơi nội dung của bạn sẽ được hiển thị và nội dung đó sẽ được cập nhật theo thời gian thực khi bạn thêm và thay đổi nội dung đó. Ở bên trái màn hình, có một danh sách các 'widget' mà bạn có thể kéo vào khu vực được chỉ định, sau đó sắp xếp lại và định cấu hình nếu cần:

Một bảng sản phẩm có thể được sử dụng với nhiều tiện ích Elementor khác nhau. Tuy nhiên, nếu bạn chỉ muốn hiển thị một bảng sản phẩm trên một trang, bạn có thể thực hiện điều đó bằng cách đưa phần văn bản giới thiệu vào mã HTML của trang. Nhấc tiện ích Trình soạn thảo văn bản và di chuyển nó đến một nơi trống như sau:

Sau đó, bạn có thể nhấp vào bên trong tiện ích để xóa văn bản mặc định và thay thế bằng bất kỳ nội dung nào bạn muốn. Khi nói đến bảng sản phẩm, bạn có thể đưa nó vào bằng cách dán mã ngắn đơn giản này:

[bảng sản phẩm]

Khi bạn chèn mã ngắn vào trang của mình, bảng sẽ xuất hiện ở vị trí bạn chỉ định mà bạn có thể xác minh bằng cách xem nó ở giao diện người dùng:

Nếu bạn chỉ muốn sử dụng một phần tử cho chính mã đó, bạn có thể sử dụng tiện ích Shortcode.

Đừng bao giờ quên lưu trang khi bạn đã định vị xong bảng, bất kể bạn quyết định đặt nó ở đâu. Sau đó, có thể bạn sẽ muốn thực hiện một số thay đổi về cách thức hiển thị và hoạt động của bảng.

Quay lại bảng điều khiển WordPress của bạn và điều hướng đến tab WooC Commerce > Cài đặt để hoàn thành tác vụ này. Bạn có thể tìm thấy bảng sản phẩm bằng cách chọn Sản phẩm ở đầu màn hình rồi chọn Bảng sản phẩm:

Bạn có thể tìm thấy danh sách đầy đủ các tùy chọn để định cấu hình bảng sản phẩm WooC Commerce của mình ngay tại đây. Bạn có toàn quyền kiểm soát thông tin xuất hiện trong bảng và bạn có thể tùy chỉnh thông tin đó bằng cách thêm bộ lọc và biến, cùng với những thứ khác. Xem tài liệu của plugin để biết thêm thông tin về các lựa chọn khác nhau.

Bạn sẽ có thể sửa đổi bảng sản phẩm bạn vừa tạo bằng Elementor mà không cần phải làm gì khác. Sau khi bạn hoàn tất việc tùy chỉnh bảng theo thông số kỹ thuật của mình, bạn chỉ cần lưu các thay đổi và sẵn sàng bắt đầu!

Accordion, tab và nút chuyển đổi có thể được sử dụng để sắp xếp một số bảng sản phẩm.

Giải pháp trên hoạt động tốt nếu bạn muốn trình bày một bảng duy nhất với các sản phẩm WooC Commerce của mình. Nếu bạn định xây dựng nhiều bảng, mỗi bảng có một loại đối tượng khác nhau thì đây không phải là lựa chọn tốt nhất.

Có một số cách khác nhau để thực hiện điều này trong Elementor. Ví amp : tiện ích Accordion có thể được sử dụng để tạo ra hiệu ứng tương tự như chúng ta đã thấy trong nghiên cứu điển hình trước. Bắt đầu từ khu vực chỉnh sửa bên phải, di chuyển tiện ích Accordion sang khu vực chỉnh sửa bên trái.

Bạn có thể tạo bao nhiêu tab riêng biệt tùy thích bằng cách nhấp vào dấu cộng và bạn có thể tùy chỉnh tiêu đề và văn bản trong mỗi tab. Ngoài ra, bạn có thể thêm bảng sản phẩm vào một hoặc nhiều tab bằng cách sử dụng cùng một mã ngắn như đã đề cập trước đó.

Tất nhiên, chỉ cần thêm mã ngắn cơ bản sẽ dẫn đến một loạt các bảng sản phẩm tương tự, rất có thể đây không phải là thứ bạn đang tìm kiếm ngay từ đầu. Thay vào đó, bạn sẽ cần tùy chỉnh từng mã ngắn để chỉ hiển thị các sản phẩm được chỉ định – ví amp : các mặt hàng từ một danh mục cụ thể – thay vì tất cả các sản phẩm.

Phương pháp bạn sử dụng sẽ được xác định bởi các sản phẩm bạn muốn đưa vào và loại bỏ khỏi mỗi bảng được đề cập. Để biết thêm thông tin, vui lòng xem hướng dẫn đầy đủ để tùy chỉnh mã ngắn Bảng sản phẩm WooC Commerce của bạn.

Điều đáng chú ý là bạn có thể đạt được hiệu ứng tương tự với sự trợ giúp của một số tiện ích Elementor hữu ích khác; điều này bao gồm tiện ích Chuyển đổi và tiện ích Tab, cùng với các thành phần khác. Về mặt trình bày một số bảng sản phẩm WooC Commerce một cách hấp dẫn và được tổ chức tốt, Elementor là công cụ sử dụng của bạn.

Dọn dẹp phần đánh dấu cẩu thả của bạn nhờ các công cụ tổ chức HTML, CSS và JavaScript trực tuyến miễn phí!

Hãy suy nghĩ kỹ càng về thiết kế trang web thương mại điện tử của bạn nếu bạn muốn doanh nghiệp của mình nổi bật so với đối thủ cạnh tranh. Ví amp : bạn sẽ muốn xác định cách trưng bày sản phẩm của mình hiệu quả nhất, lý tưởng nhất là theo phong cách vừa thân thiện với người dùng vừa bắt mắt.

May mắn thay, việc sử dụng plugin Bảng sản phẩm WooC Commerce với Elementor khiến việc này trở nên đơn giản. Mã ngắn bảng sản phẩm của bạn có thể được sử dụng để hiển thị mọi thứ mà trang web của bạn cung cấp (hoặc chỉ là một lựa chọn) một cách thực sự năng động.