ShopEngine’s Cart Total is another handy widget that can spice up your cart table. It helps improve the cart page by allowing users to visually control and style key pricing elements and buttons like “Proceed to Checkout “.
The Cart Total widget in ShopEngine is used to display and customize the overall cost of items in a cart, including subtotal, total price, and checkout actions.
Quick Steps:
1. Go to ShopEngine → Templates → Add New
2. Select Cart as template type and save
3. Click Edit with Elementor
4. Drag the Cart Table widget into the layout
5. Drag the Cart Total widget into the area
6. Customize styles (price, typography, buttons, etc.)
7. Save & preview on frontend
Use ShopEngine’s Cart Table #
First of all, go to the dashboard of your admin panel and find ShopEngine from the list of items.
Create a Cart Template #
- Click ShopEngine and then select Builder Templates from the drop-down menu.
- Then, click the “Add New” button on the top right beside the text “Templates”.
Immediately after that, a popup window will show up for template settings.
- Set your template name in the Name field
- Select the template type: Cart
- Template Activation: Enable
- Choose a default sample design or start designing from scratch.
- Check if Elementor is selected
- Finally, click edit with Elementor.
Drag & Drop Widgets & Customize the Template #
In this step, you will notice a sidebar on the left with a list of widgets. Search ShopEngine Cart Table widget and then drag and drop it to the editor.
This will pop up a cart table with a number of items on it, like product name, product image, price, subtotal, quantity, and other necessary buttons.
Now, find Cart Total widget from the ShopEngine Cart section or you can search the widget on the search field and then drag and drop it to the allotted area.
The cart total widget will show up instantly after that. You can now make the necessary tweaks from the Style tab. From the Cart Table section, you can change the title and price typography, title color, price color, etc.
Next, from the Input section, you can adjust font size, padding, margin, input color, input background color, etc.
Then, for the Update Shipping Button section, you can modify the typography, button colors, border type, border radius, and so on.
Similarly for the Checkout Button section, you can modify the typography, button colors, border type, border radius, and so on.
The cart total looks on the front end as displayed under below.
This is how you can make use of the ShopEngine Cart Total widget and jazz up your cart total elements.
