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

Trong bài đăng này, chúng tôi sẽ hướng dẫn bạn cách kết hợp Bảng sản phẩm Elementor và WC để tạo trang web WordPress tùy chỉnh hơn đồng thời tăng doanh thu cho cửa hàng WooCommerce 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. WooCommerce 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 sao chép, 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 họ, đ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à xác định các công cụ tốt nhất để thiết kế và tùy chỉnh trang web của bạn cho đến khi nó là những gì bạn muốn.

Nhiều plugin WordPress và WooCommerce có sẵn để nâng cao chức năng cho cửa hàng của bạn - Elementor, ví dụ như ex amp le, là công cụ đơn giản nhất để tùy chỉnh trang sản phẩm WooCommerce của bạn. Mặc dù nó là một trong những ưu điểm đáng kể nhất của nó, nhưng nó cũng có một số nhược điểm đáng kể. Đối với ex amp le, khi bạn kết hợp các plugin WordPress từ các tác giả khác nhau, bạn sẽ có nguy cơ gặp phải lỗi tương thích và các biến chứng khác; đây không phải là trường hợp khi sử dụng Bảng sản phẩm WooCommerce và plugin Elementor 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 này và chúng có thể được sử dụng kết hợp để có được kết quả tuyệt vời hơn nữa.

Tổng quan nhanh về Bảng sản phẩm WooCommerce và các khung công tác phần tử

Như đã nói trước đó, có rất nhiều lựa chọn plugin WordPress có sẵn để hỗ trợ bạn tạo một trang WordPress tốt hơn được cá nhân hóa theo các 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 ex amp le của loại ứng dụng đầu tiên:

plugin tạo trang của chúng tôi cung cấp cho bạn một giao diện hoàn toàn mới để xây dựng các 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 trang web của bạn được kết hợp với nhau bằng cách chọn từ 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.

Trong khi Bảng sản phẩm WooCommerce là một giải pháp tổng quát hơn, 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, hoàn toàn có thể tùy chỉnh liệt kê các sản phẩm và dịch vụ WooCommerce của bạn. Tuy nhiên, do sự tương tác của chúng với WooCommerce, 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 cho người mua sắm trực tuyến. plugin Posts 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 một bảng thay vì chỉ đơn giản là các sản phẩm WooCommerce (nếu bạn muốn hiển thị thứ gì đó ngoà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à WooCommerce 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 có ý nghĩa lớn giúp tăng doanh số bán hàng cho cửa hàng WooCommerce của bạn.

Bây giờ là lúc bắt tay vào kinh doanh. Trong phần tiếp theo, chúng tôi sẽ xem xét một số thực thế giới cũ amp les về cách bạn có thể sử dụng các sản phẩm Bảng WooCommerce và Elementor để tạo hiệu ứng tương tự như trình bày ở trên.

Khi nói đến việc kết hợp hai plugin , bầu trời là giới hạn - và đây chỉ là một vài khả năng. Với một chút thử nghiệm và sai sót, bạn có thể kết hợp các trang khác nhau bằng cách sử dụng cùng một cách tiếp cận cơ bản mà chúng tôi sẽ chứng minh.

Đầ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 bạn. Một điều tốt là cài đặt Elementor và định cấu hình Bảng sản phẩm WooCommerce là không khó khăn và đơn giản. Bản thân WooCommerce 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 WooCommerce 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 một 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 con và để nó xuất hiện trên giao diện người dùng của trang web.

Đảm bảo rằng bạn đang sử dụng trình chỉnh sửa Elementor khi bạn 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 Edit with 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 xung quanh nền tảng này. Một khu vực 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ó sẽ được cập nhật theo thời gian thực khi bạn thêm và thay đổi nội dung đó. Ở phía bên trái của 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 đó tổ chức 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 loại vật dụng 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 duy nhất 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ặt 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ế nó 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ể bao gồm nó bằng cách dán vào mã ngắn đơn giản sau:

[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ó trê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 Mã ngắn.

Đừ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 bảng xuất hiện và hoạt động.

Quay lại trang tổng quan WordPress của bạn và điều hướng đến tab WooCommerce> Cài đặt để hoàn thành tác vụ này. Bảng sản phẩm có thể được tìm thấy bằng cách chọn Sản phẩm ở đầu màn hình, sau đó 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 WooCommerce 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 các bộ lọc và biến, trong số những thứ khác. Kiểm tra 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 mà bạn vừa tạo bằng Elementor mà không cần phải làm bất cứ điều gì khác. Khi bạn đã hoàn thành việc tùy chỉnh bảng theo thông số kỹ thuật của mình, chỉ cần lưu các thay đổi của bạn và bạn đã sẵn sàng!

Các sắp xếp, tab và 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 WooCommerce của mình. Nếu bạn định tạo nhiều bảng, mỗi bảng có một danh mục đố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. Tiện ích Accordion, cho ex amp le, có thể được sử dụng để tạo ra hiệu ứng tương tự như chúng tôi đã 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 các 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 shortcode cơ bản sẽ dẫn đến liên tiếp 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 shortcode để chỉ hiển thị các sản phẩm được chỉ định - đối với ex amp le, các mặt hàng thuộc 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 bao gồm 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 các mã ngắn Bảng sản phẩm WooCommerce của bạn.

Cần lưu ý rằng 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, trong số các thành phần khác. Về việc trình bày một số bảng sản phẩm WooCommerce một cách hấp dẫn và được tổ chức tốt, Elementor là công cụ cần thiết của bạn.

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

Hãy đặt một số suy nghĩ nghiêm túc vào việc 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. Đối với ex amp le, bạn sẽ muốn xác định cách hiệu quả nhất để trưng bày sản phẩm của mình, lý tưởng nhất là theo phong cách vừa thân thiện với người dùng vừa thu hút mắt nhìn.

May mắn thay, việc sử dụng plugin Bảng sản phẩm WooCommerce 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ỉ một lựa chọn) một cách thực sự năng động.

Để lại bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *