Thiết kế danh mục sản phẩm WooC Commerce của bạn với Elementor

Elementor là trình tạo trang WordPress nổi bật nhằm nâng cao chức năng của trình tạo trang WordPress mặc định bằng cách thêm các tính năng mới.

Nếu bạn còn nhớ, các phiên bản đầu tiên của WordPress không đặc biệt thân thiện với người dùng. Ngoài việc có chức năng hạn chế, nó yêu cầu bạn phải dựa vào các chủ đề WordPress được tạo sẵn để tạo thiết kế cơ bản cho trang web của mình. Tuy nhiên, đối với nhiều người dùng, chức năng cơ bản của các chủ đề WordPress là không đủ, cần phải cài đặt plugin hoặc chỉnh sửa mã chủ đề theo cách thủ công.

Elementor là một trình xây dựng dựa trên khối tương tự như WordPress, nhưng nó cao cấp hơn nhiều so với trình tạo WordPress ở chỗ nó trực quan hơn, phản hồi nhanh hơn và giàu tính năng hơn. Quan trọng nhất, bạn có thể tạo một trang web tuyệt vời mà không cần phải viết một dòng mã nào!!

Sự kết hợp WooC Commerce và Elementor

WP-WooC Commerce và Elementor là hai trong số plugin WordPress được sử dụng rộng rãi nhất hiện nay. Mức độ linh hoạt và số lượng tính năng tuyệt vời mà mỗi tính năng này cung cấp đơn giản là vô giá. Nếu bạn đang điều hành một cửa hàng Thương mại điện tử, WooC Commerce là plugin tốt nhất đáp ứng hầu hết mọi nhu cầu mà bạn có thể có. Đây là plugin toàn diện nhất hiện có cho mọi nhu cầu thực tế.

Ngoài ra, Elementor là một trong những công cụ xây dựng trang web kéo và thả hiệu quả nhất hiện có trên thị trường. Nó cung cấp cho bạn khả năng nhanh chóng thiết kế, tùy chỉnh và cung cấp gần như bất kỳ trang nào trên trang web của bạn. Thậm chí còn có nhiều tính năng hơn, chẳng hạn như tạo các menu lớn và truy cập nhiều tiện ích bổ sung cũng như mẫu rất tiện lợi. Với sự trợ giúp của cả WooC Commerce và Elementor, bạn có thể thiết kế và xây dựng các trang Cửa hàng và Doanh nghiệp chất lượng chuyên nghiệp với ít chi phí và công sức nhất có thể. Với sự trợ giúp của Elementor, bạn hoàn toàn có thể tùy chỉnh bố cục Cửa hàng, lưới sản phẩm và băng chuyền của mình, cũng như chọn từ nhiều bố cục đẹp mắt khác nhau. Ngoài ra còn có khả năng thiết lập và cá nhân hóa trang thanh toán và giỏ hàng của bạn, cũng như tích hợp chúng với nhiều tùy chọn và tính năng thanh toán khác nhau để mang đến cho khách hàng của bạn sự thuận tiện hơn.

Ngoài ra, bạn có thể tạo các trang và thiết kế tùy chỉnh cho hàng hóa kỹ thuật số, bao gồm các tùy chọn trang tùy chỉnh để vận chuyển và thanh toán cũng như các trang đăng và mua trước, cùng những thứ khác. Tất cả những điều này góp phần làm cho trang web của công ty bạn trông vừa chuyên nghiệp vừa thân thiện với người dùng. Cùng với các nút kêu gọi hành động thân thiện với người dùng, thanh trượt sẵn sàng thị sai và một loạt các tính năng khác, bạn có thể tích hợp chức năng WooC Commerce vào trang web của mình. Số lượng cơ hội tuyệt đối có sẵn hầu như là vô hạn. Bây giờ, nếu bạn đủ thuyết phục, hãy để chúng tôi hướng dẫn bạn quy trình thực hiện kế hoạch của bạn. Bạn có thể làm nhiều cách khác nhau để làm cho trang Cửa hàng của mình trở nên thân thiện hơn và mục tiêu là các bước này sẽ hỗ trợ bạn tạo trang Cửa hàng thân thiện hơn cho cửa hàng WooC Commerce của bạn.

Tạo trang danh mục WooC Commerce trong Elementor

Nếu bạn quen thuộc với WooC Commerce, bạn biết rằng danh mục sản phẩm rất quan trọng trong việc sắp xếp sản phẩm của bạn để khách hàng hiển thị và truy cập phù hợp – họ có thể tìm thấy những gì họ đang tìm kiếm càng nhanh thì càng tốt. Nhưng chính xác thì danh mục sản phẩm là gì?

Khách hàng dành nhiều thời gian để duyệt các sản phẩm trên trang cửa hàng của bạn, vì vậy họ phải có trải nghiệm tích cực. Không có gì khó chịu hơn việc phải điều hướng qua hàng chục trang để xem sản phẩm trên trang web của cửa hàng bạn.

Do đó, việc phân loại là điều cần thiết để cung cấp cho khách hàng của bạn trải nghiệm mua sắm tốt hơn. Khách hàng sẽ dễ dàng sắp xếp và lọc ra những sở thích của mình hơn nếu có một khu vực được sắp xếp và tổ chức hợp lý cho tất cả các loại mặt hàng như quần áo hay giày dép. Việc thêm các yếu tố tạo khách hàng tiềm năng như nút kêu gọi hành động, phần sản phẩm nổi bật, cửa sổ bật lên để bán hàng hoặc ưu đãi và các thành phần tương tự khác vào phần này có thể khiến nó hấp dẫn hơn đối với khách truy cập.

Nếu bạn có cửa hàng WooC Commerce và muốn nâng cấp nó, hướng dẫn này chính xác là những gì bạn cần để bắt đầu.

Nhiều chủ đề WooC Commerce bao gồm bố cục mặc định cho Danh mục sản phẩm, bố cục này có thể phù hợp nhất hoặc không phù hợp nhất với nhu cầu kinh doanh của bạn. Mặc dù những cài đặt mặc định này có thể bao gồm một số tính năng hữu ích nhưng chúng không thể được tùy chỉnh thường xuyên.

Hãy bắt tay vào công việc.
Sau khi thiết lập sản phẩm của mình, bạn cần thực hiện các thao tác sau trước khi xuất bản để sản phẩm xuất hiện trong danh mục:

Bạn sẽ đặt các điều kiện xác định vị trí mẫu sản phẩm của bạn sẽ xuất hiện trong giai đoạn này. Khi bạn sử dụng một mẫu, mẫu đó sẽ tự động áp dụng cho tất cả các trang sản phẩm trên trang web của bạn. Bạn cũng có thể thu hẹp tìm kiếm của mình vào một danh mục sản phẩm cụ thể.

Nhấp vào Xuất bản và sản phẩm duy nhất của bạn hiện có sẵn để mua!

Chúng tôi vẫn chưa xong.
Những gì chúng tôi vừa làm là không đủ để đưa các danh mục lên trực tuyến trên trang web của chúng tôi; để hiển thị các danh mục trực tuyến trên tất cả hoặc một số trang trên trang web của chúng tôi, chúng tôi vẫn cần thiết lập một số thứ. Để hoàn thành nhiệm vụ, hãy tạo một trang danh mục sản phẩm sẽ ảnh hưởng đến tất cả các sản phẩm hoặc một trang danh mục sẽ ảnh hưởng đến một danh mục sản phẩm cụ thể.
Để thực hiện việc này, trước tiên, hãy quay lại Elementor > Mẫu của tôi và tạo mẫu lưu trữ sản phẩm. Sau đó, chọn mẫu hiện có hoặc tạo mẫu mới. Tùy chỉnh giao diện của tiện ích Sản phẩm lưu trữ và tiện ích Tiêu đề lưu trữ bằng cách thêm chúng vào trang của bạn.

Sử dụng chức năng sao chép kiểu giữa các trang để tùy chỉnh nó cho phù hợp với thiết kế bạn đã tạo cho mẫu sản phẩm duy nhất của mình, sau đó lưu các thay đổi của bạn.
Quay lại trang sản phẩm và chọn Sao chép từ menu thả xuống. Bấm chuột phải vào Dán Kiểu khi bạn quay lại sản phẩm lưu trữ. Chọn Sản phẩm mới nhất từ ​​menu thả xuống Truy vấn > Nguồn trong cài đặt Lưu trữ sản phẩm.
Sau đó chọn nhẫn từ menu thả xuống Danh mục sản phẩm. Chỉ có loại vòng sẽ được hiển thị theo cách này. Nếu bạn có một danh sách dài các sản phẩm cho một danh mục cụ thể, bạn nên bật phân trang.
Bạn có thể tùy chỉnh khoảng cách giữa các cột và hàng bằng cách chọn tab kiểu. Thay đổi màu sắc, phông chữ và các khía cạnh khác của thiết kế.

Trước khi xuất bản, hãy chọn các điều kiện xác định vị trí kho lưu trữ sẽ xuất hiện, giống như bạn đã làm đối với mẫu sản phẩm đơn lẻ, sau đó xuất bản.

Sau khi bạn nhấn “xuất bản”, trang lưu trữ của bạn sẽ hoạt động.

Elementor pro cung cấp cho bạn khả năng thiết kế các danh mục sản phẩm sạch sẽ và gọn gàng với nhiều tùy chọn;

Bạn có thể thực hiện các thao tác sau với các tùy chọn có sẵn trên Elementor Pro:

Cài đặt bố cục cho danh mục sản phẩm WooC Commerce

  • Cột: Đặt chính xác số cột cần hiển thị, từ 1 đến 12
  • Số lượng danh mục: Chọn số lượng danh mục cần hiển thị

Cài đặt truy vấn

  • Nguồn: Chọn nguồn để hiển thị các danh mục, chọn từ Tất cả, Lựa chọn thủ công, Theo phụ huynh hoặc Danh mục con hiện tại. Nếu Chọn thủ công được chọn, hãy chọn thủ công những danh mục sẽ hiển thị. Nếu chọn “Bởi phụ huynh”, hãy chọn từ Chỉ cấp cao nhất hoặc chọn một danh mục riêng lẻ từ danh sách thả xuống.
  • Ẩn sản phẩm trống: Đặt thành Có cho các danh mục không có sản phẩm nào trong đó
  • Order By: Đặt thứ tự hiển thị các danh mục. Các tùy chọn bao gồm Tên, Slug, Mô tả hoặc Đếm
  • Thứ tự: Chọn hiển thị danh mục theo thứ tự ASC hoặc DESC (Tăng dần hoặc Giảm dần)

Cài đặt kiểu

  • Columns Gap: Đặt khoảng cách chính xác giữa các cột
  • Khoảng cách hàng: Đặt khoảng cách chính xác giữa các hàng
  • Căn chỉnh: Căn chỉnh dữ liệu sản phẩm sang trái, phải hoặc giữa

Cài đặt hình ảnh

  • Loại đường viền: Chọn loại đường viền, chọn từ không có, liền nét, đôi, chấm, nét đứt hoặc có rãnh
  • Border Radius: Đặt bán kính để kiểm soát độ tròn góc của đường viền
  • Khoảng cách: Điều chỉnh khoảng cách giữa hình ảnh và dữ liệu của chúng

Cài đặt tiêu đề

  • Màu sắc: Chọn màu tiêu đề
  • Kiểu chữ: Đặt tùy chọn kiểu chữ cho văn bản Tiêu đề

Đếm cài đặt

  • Color: Chọn màu cho Đếm
  • Kiểu chữ: Đặt tùy chọn kiểu chữ cho Đếm

Phần kết luận

Trình tạo WooC Commerce trong Elementor cung cấp cho bạn sự linh hoạt trong thiết kế mà bạn cần để tạo và tinh chỉnh các trang sản phẩm của mình một cách trực quan. Thời gian cần thiết để chuyển từ ý tưởng thành hiện thực , và đầy đủ Cửa hàng WooC Commerce trực tuyến chức năng bị giảm đáng kể do điều này giúp bạn tiết kiệm thời gian. Nhìn chung, việc tùy chỉnh trang cửa hàng WooC Commerce của bạn bằng Elementor có khả năng tác động đáng kể đến hiệu suất tổng thể của trang web của bạn. Bạn có thể hỗ trợ hoặc cản trở việc bán hàng bằng cách sắp xếp và trưng bày sản phẩm của mình theo cách tốt nhất có thể để khách hàng xem và mua chúng. Việc thiết lập và tùy chỉnh Trang cửa hàng WooC Commerce của bạn trong Elementor sẽ được trình bày qua các bước trong hướng dẫn này. Tuy nhiên, hãy nhớ rằng đây chỉ là phần nổi của tảng băng chìm xét về phạm vi của vấn đề. Phần giới thiệu về cách sử dụng Elementor để tạo trang Cửa hàng lý tưởng cho cửa hàng của bạn được trình bày trong phần trình diễn cơ bản này. Hãy sử dụng điểm này làm điểm khởi đầu và thử nghiệm với nó để tận dụng tối đa trình tạo trang tuyệt vời này

Hanson F.

Xem nhận xét

  • Làm thế nào một thương mại điện tử với Elementor Pro có thể được phân loại sản phẩm không phải là Elementor thú vị, bạn có khả năng không?

    • Xin chào, đối với phiên bản Elementor miễn phí, bạn sẽ cần sử dụng tiện ích WooC Commerce hoặc cài đặt một plugin khác thực hiện công việc.

  • Xin chào, cảm ơn vì công việc hữu ích của bạn. Tôi có thể sử dụng Danh mục sản phẩm thành phần cũng như Danh mục sản phẩm không?

  • Chào!

    Bạn béo có thể chia sẻ danh mục với Elementor không? Bạn có thể làm điều đó cho đến khi có thêm văn bản theo danh mục và hệ thống SEO? Cảm ơn bạn vì lần mua phiên bản Pro tiếp theo của bạn

    • Xin chào, vâng, bạn có thể thêm mô tả vào danh mục WooC Commerce bằng phiên bản chuyên nghiệp vì bắt buộc phải sử dụng bố cục danh mục WooC Commerce.

  • Cảm ơn bạn vì trải nghiệm tuyệt vời. Ai có thể sở hữu sản phẩm theo đúng nghĩa của nó? Kiểm tra cho bzw đáp ứng. Anzeige di động. Chúng tôi có thể cung cấp cho bạn 4 sản phẩm máy tính để bàn trong khu vực của bạn và 1 sản phẩm điện thoại di động trong khu vực của bạn.

    • Nếu đó chỉ là một cấu hình di động cụ thể, bạn có thể thực hiện việc đó từ tiện ích Elementor. Nếu bạn muốn một cái gì đó hoàn toàn khác biệt trên thiết bị di động, bạn có thể tạo 2 tiện ích, một cho máy tính để bàn và một cho thiết bị di động. Lựa chọn thiết bị di động nằm trong tab nâng cao.

Bài viết gần đây

Cách sử dụng đầu trang và chân trang với Elementor

Đầu trang và chân trang của trang web là những yếu tố cần thiết. Trong hầu hết các trường hợp, Tiêu đề cung cấp điều hướng…

Ngày 6 tháng 1 năm 2022

So sánh chủ đề WordPress: Astra vs OceanWP

Hai trong số các chủ đề WordPress phổ biến nhất trên thị trường là Astra và OceanWP. Chuyên nghiệp…

Ngày 2 tháng 1 năm 2022

So sánh chủ đề tin tức WordPress: Báo so với báo Astra

Tạo một trang web tin tức xuất sắc không nhất thiết bạn phải trở thành một nhà thiết kế web. Chúng tôi…

Ngày 25 tháng 10 năm 2021

Tạo một trang web liên quan đến tin tức với Chủ đề Báo chí

Chủ đề Báo chí là một trong những chủ đề WordPress quan trọng nhất được thiết kế bởi tagDiv, một…

Ngày 18 tháng 10 năm 2021

Cách xây dựng Thương mại điện tử với trình tạo Avada WooC Commerce

Khi nói đến việc thiết lập một cửa hàng trực tuyến, WooC Commerce là plugin phù hợp. Nó…

Ngày 4 tháng 10 năm 2021

Cách sử dụng hiệu ứng cuộn và tiêu đề cố định với Elementor

Tiêu đề thường là thứ đầu tiên một người nhìn thấy khi họ truy cập trang web của bạn,…

Ngày 21 tháng 9 năm 2021