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

Chủ đề phẳng phiu

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 WooC Commerce.

Đây là một trong những chủ đề WooC Commerce phổ biến nhất trên ThemeForest. Tính đến thời điểm viết 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 được thiết kế chủ yếu 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 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ó hướng dẫn nhanh chỉ cho bạn cách tạo trang sản phẩm WooC Commerce bằng Flatsome.

Vì vậy, không dài dòng nữa, hãy bắt đầu:

Mục lục:

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

Khi chào đón những độc giả mới, chúng tôi phải đưa vào 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 hiểu rõ. Ở đâ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 nơi bạn cài đặt các chủ đề và plugin khác nhau để tạo trang web của mình. Có hàng nghì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.

WooC Commerce 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à giao diện trang web của chúng tôi. Flatsome là một chủ đề cho phép chúng ta tùy chỉnh phối cảnh 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 của 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 WooC Commerce bằng chủ đề Flatsome

Vì tất cả độc giả của chúng tôi đều có kiến ​​thức về WordPress, WoC Commerce và Flatsome, nên đã đến lúc chúng tôi chuyển sang phần 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à tính năng kéo và thả giúp công việc của nhà thiết kế trở nên cực kỳ dễ dàng.

Hầu hết mọi người đều đã mua sắm trực tuyến, có lẽ vì những thời điểm khó khăn mà chúng ta 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 tại sao tất cả độc giả của chúng tôi sẽ đồng ý 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 WooC Commerce và Flatsome, nhiệm vụ này trở nên cực kỳ dễ dàng. Bạn cần phải ngồi xuống và lên kế hoạch cho trang web của mình sẽ trông như thế nào, thế là xong. WooC Commerce sẽ có mặt để giúp bạn với các tùy chọn trình tạo. Bạn có thể tạo một cửa hàng trực tuyến hoạt động hoàn chỉnh chỉ trong vài phút bằng cách kéo và thả.

Với WooC Commerce và Flatsome , bạn sẽ có thể biến ý tưởng có một cửa hàng trực tuyến của mình thành một sứ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 thì mới có thể thu hút được 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 số đó 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ụ tối ưu hỗ trợ tạo ra một số trang web có độ phản hồi cực cao mà không cần phải viết mã một dòng nào. Hơn nữa, khả năng tạo ra một số cửa hàng trực tuyến độc đáo và sáng tạo cao khiến nó càng trở nên xứng đáng hơn.

Vì vậy, không lãng phí thêm thời gian nữa, hãy bắt đầu với phần 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 bức ảnh sẽ giúp bạn hiểu rõ hơn về cách thực hiện nhiệm vụ.

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 việc chọn bố cục của trang sản phẩm. Lựa chọn này sẽ tạo 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 mình 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 amp dụ này, chúng tôi sẽ tiếp tục với tùy chọn Cửa hàng cổ điển. Tuy nhiên, không có hạn chế nào đối với bạn. Quá trình tùy chỉnh sẽ tương tự đối với mọi bố cục bạn chọn. Sự khác biệt duy nhất là cấu trúc cơ bản của trang sẽ khác với cấu trúc cơ bản khác.

Chuyển sang tùy biến sản phẩm, chúng tôi đã đặt tên cho nó là thanh bên trái 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 là được thực hiện với trình tạo UX, trong khi việc còn lại 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 tới tài liệu chính thức và tìm 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 từ shortcodes 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 shortcode đò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 tế với WordPress và sử dụng shortcode.

Dưới đâ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 amp 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à hình ảnh được áp 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 có tiêu đề. Nếu bạn muốn phát triển phần đầu, bạn cần nhấp vào “Thêm mới” có sẵn trong các khối UX được đặt trong bảng điều khiển của bạn.

Bạn có thể đặt tên khối theo ý muốn của mình. Ở đây trong amp dụ này, chúng tôi đã đặt tên kết hợp là 'Bố cục thanh bên trái có chiều cao đầy đủ'. Tiếp theo, bạn có thể xem các mã ngắn bên trong trình chỉnh sửa khối. Khi bạn hoàn tất 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 bằng 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 mình. Bây giờ hãy điều hướng đến tùy chọn chủ đề trang sản phẩm và nhấn biểu tượng bố cục tùy chỉnh.

Sau khi hoàn tất, bây giờ bạn có thể tạo các 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 ta vừa tạo. Mục tiêu chính của chúng tôi khi tạo khối đó là tạo một trang sản phẩm từ khối đó. Theo amp dụ này, bố cục thanh bên trái có chiều cao đầy đủ là khối, trong khi ở cuối, 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 ta 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 đủ chi tiết, hình ảnh công trình mà chúng tôi cần tùy chỉnh. Bằng cách này, quá trình trực quan hóa phần trang bạn sẽ tạo sẽ trở nên dễ dàng hơn.

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 mở trình tạo UX, từ hình ảnh, bạn có thể thấy các thành phần của trang sản phẩm có sẵn ở bảng điều khiển bên trái của trang sản phẩm.

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 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 các thành phần từ bảng điều khiển bên trái và thay đổi cài đặt từ tùy chọn thành phần. Trong amp 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 thành phần từ bản xem trước của trình xây dựng và đưa các thành phần bổ sung vào trang sản phẩm của trình xây dựng. Trong bản demo 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ỉ bằng 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

Việc kinh doanh trực tuyến trong thời đại hiện đại này là bắt buộc 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ó dòng mã lộn xộn nào trong trình chỉnh sửa nội dung, chỉ có một vài dòng mã ngắn. Flatsome chắc chắn là chủ đề hay nhất mà tôi từng xem. 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 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.

Chủkhu

trực tiếp: .cid.e495888558d5265f

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