WooCommerce là nền tảng tốt nhất để tạo ra một cửa hàng trực tuyến, tuy nhiên nó có một số nhược điểm nhỏ. Ví dụ, trang giỏ hàng WooCommerce không dễ điều chỉnh như các tính năng Thương mại điện tử khác. May mắn thay, người dùng Divi có một giải pháp đơn giản dưới dạng một plugin mạnh mẽ.
WooCommerce chứa các trang khác nhau, chẳng hạn như trang Giỏ hàng, Thanh toán và Tài khoản, sử dụng các chủ đề được tạo sẵn để làm mọi thứ dễ dàng hơn cho các nhà bán lẻ trực tuyến. Đây là lý do tại sao WooCommerce là một nền tảng thương mại điện tử tuyệt vời như vậy: bạn có thể có được một cửa hàng và chạy trong vài phút bằng cách chỉ cần thêm sản phẩm của bạn và kết nối bộ xử lý thanh toán của bạn.
Trong khi một số thành phần của Thương mại điện tử rất linh hoạt và dễ sử dụng, những thành phần khác có thể khó khăn. Thay đổi thiết kế trang giỏ hàng WooCommerce mặc định, ví dụ, là một cam kết phức tạp. Để làm như vậy, bạn sẽ phải thay đổi các tệp mã hoặc sử dụng plugin của bên thứ ba.
Người dùng WordPress đã sử dụng chủ đề Divi để tạo trang web của họ đang trong một điều trị. Divi Shop Builder là một plugin Divi mở rộng sự đơn giản của Divi trong việc sử dụng cho khung WooCommerce. Chúng tôi sẽ chỉ cho bạn cách thay đổi trang giỏ hàng WooCommerce trong bài đăng này.
Bạn có thể thiết kế các trang giỏ hàng WooCommerce khác nhau cho cửa hàng trực tuyến của mình với plugin Divi Shop Builder trong bộ công cụ phát triển của mình:
HÌNH ẢNH
Bạn có muốn tạo một trang giỏ hàng trực quan hấp dẫn cho cửa hàng WooCommerce của mình không?
Hướng dẫn này sẽ dạy bạn cách sử dụng plugin Divi Shop Builder để tạo trang giỏ hàng tùy chỉnh cho trang web của bạn. Bạn sẽ khám phá ra:
- Tại sao bạn nên làm cho trang giỏ hàng của cửa hàng WooCommerce trở nên độc đáo?
- Plugin Divi Shop Builder là gì và làm thế nào để cài đặt nó?
- Cách xây dựng trang giỏ hàng WooCommerce tùy chỉnh bằng cách sử dụng từng mô-đun,
- Làm thế nào để tiết kiệm thời gian trên cửa hàng trực tuyến của bạn bằng cách sử dụng các bố cục được cung cấp.
Những lợi ích của việc tùy chỉnh trang giỏ hàng WooCommerce
The cart page is an essential part of the eCommerce customer’s journey. The buyer reviews their order on the shopping cart page and selects whether or not to proceed. Because this is the second-to-last step before consumers finalize a purchase, it’s critical that this page is well-designed, simple to use, and contains a few sales strategies.
You can do the following using the ability to alter the WooCommerce cart page:
- Customize the text to fit your brand’s personality. The default text on the cart page is just ‘Cart.’ This is drab and lifeless, and it doesn’t add anything to your brand’s experience. You can alter this default wording to something action-oriented like “Review your order” or something adorable like “Your new wardrobe basics” if you edit the WooCommerce cart page.
- Upsells should be encouraged. Similar products should be displayed on the basket page to stimulate more sales. You might include wording such as, “We think these would look excellent in your pantry/wardrobe/desk.” Customers will be surprised to see related products on the cart page, which will catch them off guard and hopefully encourage them to continue browsing.
Only code or a third-party plugin can be used to change the default WooCommerce cart page. Not everyone likes messing around with WooCommerce hooks and PHP templates, and not all plugins are made with Divi in mind.
Divi Shop Builder extends the Divi Builder’s simplicity to WooCommerce, allowing Divi users to create bespoke WooCommerce cart pages just like any other page. In our Divi Shop Builder for WooCommerce product overview, learn more about how it allows you to style an e-commerce website without coding:
Let’s put Divi Shop Builder to the test by creating a WooCommerce cart page.
How to Make a WooCommerce Cart Page That Is Unique
Set the Cart page in the first step.
First and foremost, you must configure the WooCommerce plugin’s cart page. To do so:
- Go to WooCommerce > Settings and select the Advanced option from the drop-down menu.
- Choose ‘Cart’ from the drop-down option where it says ‘Cart page.’
- Scroll to the bottom of the page and click Save Changes when you’re finished.
IMAGE
Install and activate the Divi Shop Builder Plugin in Step 2.
Next, purchase the Divi Shop Builder plugin from the Divi Space website. From your Account page, you may download the plugin and get the license key. Please install and activate the plugin as you would any other plugin once it has been downloaded. When the plugin is finished, it will appear in the Divi menu.
You’ll be asked to validate your plugin purchase when you click the plugin menu. On the Divi Space website, go to My Account and enter your license key. You can start using the plugin once you’ve authorized it.
The Divi Shop Builder plugin has no configurations or setup requirements. It will function straight within the Divi Builder once it is installed. The plugin dashboard merely summarizes the plugin’s features and links to its documentation.
Step 3: Make a WooCommerce cart page that’s unique to you.
Open the Cart page and enable the Divi Builder to begin utilizing the Divi Shop Builder plugin. There will be four new modules:
- /Notices /Cart List /Cart /Cart /Cart /Car
- Totals in Cart
Let’s take a closer look at each of these.
Please note that we have pre-styled our module settings in the Theme Customizer, which is why they import with a specific design style already applied, such as the font, font color, and button design. Your modules will display the default Divi styling if you haven’t contributed CSS to your child theme or altered values in the Theme Customizer.
Module for Cart Lists
This plugin provides a list of items in your customer’s basket for them to review. Depending on the style you want to deliver, each of the elements in the Cart List module can be switched on or off. Additionally, each text element can be edited directly from the Divi Builder.
IMAGE
To begin, use the Divi Builder and create a layout with the Cart List module. It will open a demo product called “My Awesome Product” by default.
Choosing options
There are five new columns, each of which can be toggled on or off depending on your preferred layout and design.
These are some of the possibilities:
- Take away the product marker.
- Image as a thumbnail
- Name of the product Price
- Quantity is important.
- Subtotal
If you don’t want a featured image of the product in question, for example, you might choose to display it. You may also select whether or not to show or hide the discount code row.
Options for renaming
You can rename the columns after picking the options to display in your Cart List. You could, for example, give a title to the thumbnail column and call it “Preview” or rename the quantity count from “Quantity” to “Number of Units.”
The discount code section follows the same renaming convention. The text defaults to ‘Coupon code,’ but you can rename it to something else in the Cart List Module, such as ‘Enter your coupon code,’ or something similar. You can also change the wording that says “Apply coupon” to something like “Click to get your discount.”
Settings for an empty cart
If a consumer hasn’t added any products to their Cart, the cart page will display a message like “Your cart is now empty” and a link to return to the store.
You can edit this with the Cart List module to whatever you like. ‘Oops!’ might be added to the text. ‘You don’t have any merchandise here.’ You may also specify a specific redirection URL and alter the button text to “Start shopping!”
You can also customize the Empty Cart page with the Cart List module, including a custom notification and a URL redirection button.
Module for Cart/Checkout Notifications
The Cart Notices module can then be used to add notices to your cart page.
IMAGE
The Cart/Checkout Notices module comes next. This module can be used on the Cart page as well as the Checkout page.
You can customize the appearance of the information, success, and error alerts once they’ve been added.
Module for Cart Totals
Finally, add the Cart Totals module to bring the page to a close and direct your consumers to the Checkout page.
The Cart Totals module will automatically fill in the final total financial worth of the Cart.
IMAGE
The module’s default title is ‘Cart totals,’ but it can be altered to any custom text. You can also customize the text for the ‘Subtotal’ and ‘Total’ buttons, as well as the ‘Proceed to checkout button.
Changing the look of the WooCommerce cart page
Like the rest of the Divi theme package’s modules, the Divi Shop Builder plugin’s cart modules may be styled with the Divi Builder. Play around with the pieces in the Design tab to match your brand identity or design.
If you want to customize the cart modules even more, go to the Advanced tab. For advanced CSS scripting, you can include custom classes and IDs here. Transitions, placement, scroll effects, and device visibility can all be customized.
WooCommerce Cart Pages Examples
The Divi Shop Module makes creating a new cart page for your online store a breeze. The following is an example of a stunning cart page created using the plugin.
IMAGE
When you buy the Divi Shop Builder plugin, you’ll get this layout plus a lot more! Use this beautiful WooCommerce cart page template in your online business to skip the design phases. You’ll get a collection of free layouts if you buy the Divi Shop Module plugin.
Using our JSON Layouts, you can create custom WooCommerce cart pages.
If you want to save time during development, you may use our prepared cart page templates to skip the process of developing a cart page. Our design team created a collection of beautiful WooCommerce cart page layouts that you can access through the Divi Library.
When you buy the Divi Builder plugin from our store, you get these JSON file layouts for free. The following is an example of a cart page layout included with the plugin:
IMAGE
When you purchase the Divi Shop Builder plugin, you’ll have access to this and a slew of other layouts.
Once you’ve downloaded the Divi Shop Builder Layouts
Once you’ve purchased the Divi Shop Builder plugin, visit our demo page and download the cart page layout of your choice. A download will start, and when complete, you’ll find a .zip file has saved to your computer. Unzip the file, and you’ll find the JSON layout inside.
The following are the two layouts demonstrated in this tutorial:
Go to the Divi Library now. Select Import & Export from the drop-down menu. A pop-up window will open; click the Import tab and choose your preferred layout from your PC. The arrangements will be added to your Divi Library once the installation is complete.
- Emusic Shopping Cart (displayed at the beginning of this post)
- A cart of Florists (displayed at the beginning of this section)
It’s a good idea to categorize the layouts. This makes it easier to organize and find the arrangements afterward.
IMAGE
Create a new page and enable the Divi Builder once the predefined layout has been inserted. Use the Divi Builder to paste in the saved configuration, and you’ll have a stunning cart page for your online store in no time.
final thoughts
You can build beautiful designs for your store using the Divi Shop Builder plugin. With this plugin, you may create a distinctive WooCommerce cart page design that reflects your brand and connects with your customers. The plugin not only allows you to customize the WooCommerce cart page, but it also allows you to create a custom Checkout experience for your online store, among other things.
Start developing amazing WooCommerce and Divi stores that stand out from the crowd with the Divi Shop Builder plugin from Divi Space.
Send us a link to your cart page if you’ve already purchased the plugin and are using it; we’d love to see your designs! Thank you for taking the time to read this!
