Tạo trang sản phẩm WooCommerce tùy chỉnh với chủ đề Flatsome

Chủ đề Flatesome

Flatsome là một chủ đề WordPress mạnh mẽ được thiết kế cho các trang web Thương mại điện tử và đi kèm với tích hợp WooCommerce.

Đây là một trong những chủ đề WooCommerce phổ biến nhất trên ThemeForest. Tính đến thời điểm viết bài hướng dẫn này, nó đã có hơn 174.500 lượt bán hàng và xếp hạng 4,8 sao tuyệt vời đến từ hơn 6.600+ bài đánh giá.

Flatsome chủ yếu được thiết kế dành cho người mới bắt đầu và người dùng không am hiểu về công nghệ.

Điều này rất tốt cho những người muốn bắt đầu kinh doanh trực tuyến nhưng không biết cách viết mã hoặc không có đủ ngân sách để thuê một lập trình viên chuyên nghiệp. Với Flatsome, bạn sẽ có thể tạo một trang web trông chuyên nghiệp bằng các công cụ đơn giản và trực quan.

Giờ đây, Flatsome có rất nhiều tính năng và chức năng tuyệt vời. Để giới thiệu những gì có sẵn và cách thức hoạt động, chúng tôi có một hướng dẫn nhanh chỉ cho bạn cách tạo trang sản phẩm WooCommerce bằng Flatsome.

Vì vậy, không cần phải quảng cáo thêm, hãy bắt đầu:

Mục lục:

Sự khác biệt giữa Flatsome, WooCommerce và WordPress

Khi chúng tôi chào đón độc giả mới của mình, chúng tôi phải cung cấp một số thông tin cần thiết để đảm bảo rằng tất cả độc giả của chúng tôi đều ở trên cùng một trang. Ở đây chúng ta sẽ thảo luận về sự khác biệt trong cả ba thuật ngữ mà chúng ta sẽ sử dụng trong suốt bài viết này.

Hãy bắt đầu với WordPress. Đây là một nền tảng mà bạn cài đặt các chủ đề và plugin khác nhau để tạo trang web của mình. Có hàng ngàn plugin và chủ đề có sẵn để thực hiện các nhiệm vụ khác theo yêu cầu của bạn.

WooCommerce là một plugin chúng tôi cài đặt trên WordPress cho phép bạn thêm các tính năng khác nhau vào trang web của chúng tôi. Với việc cài đặt plugin này, chúng tôi có thể tạo trang web và cửa hàng trực tuyến của mình với các chức năng bổ sung như giỏ hàng, xử lý thanh toán, quản lý sản phẩm, v.v.

Cuối cùng, nhưng chắc chắn, một trong những yếu tố quan trọng nhất là triển vọng của trang web của chúng tôi. Flatsome là một chủ đề cho phép chúng ta tùy chỉnh góc nhìn của trang web theo mong muốn của mình. Ví dụ: nếu logo công ty của bạn có màu cam, bạn sẽ muốn phản ánh màu sắc trang web của mình. Đó là những gì Flatsome có thể cung cấp cho bạn.

Tạo trang sản phẩm WooCommerce bằng chủ đề Flatsome

Vì tất cả người đọc của chúng tôi đều có kiến ​​thức về WordPress, WoCommerce và Flatsome, nên đã đến lúc chúng tôi chuyển sang tùy chỉnh trang sản phẩm của mình với trình tạo UX tuyệt vời đi kèm với chủ đề Flatsome. Đó là một tính năng kéo và thả giúp cuộc sống của nhà thiết kế trở nên vô cùng dễ dàng.

Hầu như tất cả mọi người đều đã mua sắm trực tuyến, có thể là do những thời điểm thử thách mà chúng tôi đã phải đối mặt trong vài tháng qua. Ở nhà là giải pháp an toàn nhất cho tất cả chúng ta. Đó là lý do mà tất cả độc giả của chúng tôi sẽ đồng ý khi thấy rằng một cửa hàng trực tuyến phức tạp hơn rất nhiều so với một trang web tiêu chuẩn.

Tuy nhiên, với sự trợ giúp của WooCommerce và Flatsome, nhiệm vụ này đã trở nên vô cùng dễ dàng. Bạn cần ngồi xuống và lập kế hoạch trang web của bạn sẽ trông như thế nào, và chỉ có thế. WooCommerce sẽ ở đó để giúp bạn với các tùy chọn trình tạo của nó. Bạn có thể tạo một cửa hàng trực tuyến hoạt động chính thức chỉ trong vài phút bằng thao tác kéo và thả.

Với WooCommerce và Flatsome , bạn sẽ có thể đưa ra ý tưởng về việc có một cửa hàng trực tuyến một cuộc sống hoàn toàn mới. Trang web của bạn phải có giao diện hiện đại và đẹp mắt để có thể thu hút khách hàng. Do đó, Flatsome là giải pháp tốt nhất cho mọi vấn đề của bạn, vì vậy hãy tải xuống từ đây và bắt đầu.

Flatsome có một số tính năng tuyệt vời, nhưng một trong những phần là nó đã trở thành lựa chọn hàng đầu của hơn 300.000 người dùng. Một công cụ cuối cùng hỗ trợ tạo một số trang web đáp ứng cực lớn mà không cần phải viết mã một dòng. Hơn nữa, khả năng tạo ra một số cửa hàng trực tuyến có tính sáng tạo cao và độc đáo càng làm cho nó trở nên xứng đáng hơn.

Vì vậy, không lãng phí thêm thời gian, hãy bắt đầu với hướng dẫn. Hướng dẫn này sẽ đưa bạn qua toàn bộ quá trình thiết kế trang sản phẩm. Những hình ảnh sẽ giúp bạn hiểu rõ hơn về quá trình thực hiện nhiệm vụ như thế nào.

Bước 1: Chọn Bố cục cho Trang Sản phẩm

Đầu tiên, chúng ta sẽ bắt đầu bằng cách chọn bố cục của trang sản phẩm. Lựa chọn này sẽ tạo ra một trang cơ bản cho cửa hàng trực tuyến của chúng tôi, trang này chúng tôi sẽ tùy chỉnh theo mong muốn của chúng tôi sau này. Hướng dẫn từng bước này sẽ hướng dẫn bạn qua quá trình tùy chỉnh trang.

Đối với ex amp le này, chúng tôi sẽ tiếp tục với tùy chọn Classic Shop. Tuy nhiên, không có hạn chế đối với bạn. Quá trình tùy chỉnh sẽ tương tự đối với mọi bố cục mà bạn chọn. Sự khác biệt duy nhất sẽ là cấu trúc cơ bản của trang sẽ khác với trang khác.

Chuyển sang phần tùy biến sản phẩm, chúng tôi đã đặt tên cho nó là Thanh bên trái có chiều cao đầy đủ.

Có hai tùy chọn có sẵn để tùy chỉnh trang sản phẩm. Việc đầu tiên được thực hiện với trình tạo UX, trong khi cách khác là xây dựng trang theo cách thủ công. Nếu bạn chọn tùy chọn thứ hai, bạn sẽ phải đi đến tài liệu chính thức và xác định vị trí các mã ngắn. Nếu bạn là người mới bắt đầu và đây là trải nghiệm đầu tiên của bạn khi xây dựng một cửa hàng trực tuyến, tôi khuyên bạn nên chọn tùy chọn đầu tiên này.

(Tùy chọn) Bước 2: Tạo trang sản phẩm theo cách thủ công

Đây là ảnh chụp màn hình trang tài liệu chính thức của Flatsome. Bạn có thể nhập các mã từ ngắn và tìm kiếm chúng.

Khi bạn nhấn tìm kiếm, sẽ có một danh sách các mã ngắn được hiển thị trên màn hình. Bạn có thể chọn các mã ngắn quan trọng cho trang sản phẩm. Sử dụng mã ngắn đòi hỏi ít nỗ lực hơn, nhưng điều cần thiết là bạn phải có một chút kinh nghiệm thực hành về WordPress và sử dụng mã ngắn.

Đây là danh sách các mã ngắn mà bạn có thể sử dụng trên trang web để tạo trang.

Trong ex amp le này, chúng tôi sẽ tùy chỉnh bố cục thanh bên trái có chiều cao đầy đủ; do đó, chúng tôi sẽ sao chép mã cho thiết kế. Sau đây là một hình ảnh của ứng dụng, nhưng bạn có thể dễ dàng sao chép nó từ cấu trúc.

Bắt đầu tạo một khối với tiêu đề. Nếu bạn muốn phát triển head, bạn cần nhấp vào “Thêm mới” có sẵn trong khối UX được đặt trong trang tổng quan của bạn.

Bạn có thể đặt tên khối theo mong muốn của bạn. Ở đây trong này cũ amp le, chúng tôi đã đặt tên cho công đoàn là 'bố trí đầy đủ chiều cao thanh bên trái.' Tiếp theo, bạn có thể thấy các mã ngắn bên trong trình chỉnh sửa khối. Sau khi bạn hoàn thành việc sao chép các mã ngắn mong muốn, bạn có thể nhấn xuất bản.

Chúng tôi sẽ ở ngang sau một bước nhỏ này, nơi chúng tôi có thể tùy chỉnh trang của mình theo mong muốn của chúng tôi. Bây giờ điều hướng đến tùy chọn chủ đề trang sản phẩm và nhấn vào biểu tượng bố cục tùy chỉnh.

Sau khi hoàn tất, bây giờ bạn sẽ có thể tạo khối từ menu thả xuống Bố cục Sản phẩm Tùy chỉnh.

Chọn khối mà chúng tôi vừa tạo. Mục tiêu chính của chúng tôi khi tạo khối đó là tạo ra một trang sản phẩm từ nó. Theo ex amp le này, bố cục thanh bên trái có chiều cao đầy đủ là khối, trong khi ở phần cuối của bạn, nó sẽ giống như bạn đã đặt tên.

Sau khi hoàn tất, chỉ cần nhấn nút Xuất bản; nó sẽ lưu các cài đặt.

Bước 3: Tùy chỉnh Trang Sản phẩm

Đã đến lúc chúng tôi bắt đầu tùy chỉnh. Đầu tiên, chúng tôi sẽ điều hướng trang sản phẩm hiện có từ giao diện người dùng mà chúng tôi đã đặt trước đó trong các bước.

Điều quan trọng là bạn phải chọn một sản phẩm cụ thể mà chúng tôi cần thiết lập. Bạn nên có đầy đủ thông tin chi tiết, hình ảnh của công việc mà chúng tôi cần tùy chỉnh. Bằng cách này, quá trình trở nên thoải mái hơn khi hình dung phần trang mà bạn sẽ tạo.

Tùy chọn trình tạo UX hiển thị. Chỉ cần nhấn nút để bắt đầu tùy chỉnh.

Sau khi trình tạo trải nghiệm người dùng mở, bạn có thể thấy từ hình ảnh rằng các phần tử trang sản phẩm có sẵn trong bảng điều khiển bên trái của trang sản phẩm của bạn.

Bảng điều khiển bên trái là khối mà chúng tôi đã tạo ban đầu. Chúng tôi đã tạo ra nó với sự trợ giúp của các mã ngắn lấy từ tài liệu.

Bạn có các tùy chọn để sắp xếp lại thứ tự các phần tử từ bảng điều khiển bên trái và thay đổi cài đặt từ tùy chọn phần tử. Trong ex amp le này, chúng tôi sẽ sắp xếp lại Giá có sẵn trên menu bên trái.

Hơn nữa, nó cũng cho phép bạn sắp xếp lại các phần tử từ bản xem trước của trình xây dựng và đưa vào các thành phần bổ sung trên trang sản phẩm của trình xây dựng. Trong bản trình diễn này, phần Tab Sản phẩm và Sản phẩm liên quan đã được sắp xếp lại chỉ với một thao tác kéo và thả đơn giản.

Với chức năng kéo và thả đáng kể, Flatsome sẵn sàng cung cấp cho bạn những gì bạn đang tìm kiếm trên trang web của mình. Với các mô-đun có khả năng tùy biến cao, bạn có thể tạo một số trang tuyệt vời một cách dễ dàng. Tính năng kéo và thả giúp cuộc sống trở nên thoải mái hơn.

Kết thúc

Bắt buộc phải kinh doanh trực tuyến trong thời đại ngày nay vì mọi người thích ở nhà để giữ an toàn. Vì vậy, hãy bắt đầu xây dựng cửa hàng trực tuyến đầu tiên cho doanh nghiệp của bạn với Flatsome và mê hoặc khách hàng của bạn bằng sự độc đáo và sáng tạo của nó. Hơn nữa, không có sự lộn xộn của mã trong trình soạn thảo nội dung, chỉ cần một vài dòng mã ngắn. Flatsome chắc chắn là chủ đề hay nhất mà tôi đã xem qua. Vì vậy, không cần phải tìm kiếm bất kỳ chủ đề nào khác, chỉ cần nhấn nút tải xuống và bắt đầu xây dựng cửa hàng trực tuyến tùy chỉnh của bạn ngay lập tức.

Để 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 *