Blog

Customize WooCommerce Cart Page Using Elementor (WooLentor Pro)

In this video, I will show you how to create a custom cart page for WooCommerce using WooLentor plugin. The custom cart page option is available only in the WooLentor Pro version.
This is the page that I have created for the cart page. Let me show you how I did this.

Make sure you have added the cart page already. If WooCommerce pages like shop, cart, checkout, and my account pages are not created yet, go to WooCommerce – Status – tools – and Create default WooCommerce pages.

To create a custom cart page using WooLentor, the best way is to use the predefined layout available in the template library.
Click on the image to check the preview.
Import the template. Create a page and add a name like Cart Page and edit template. I can see that there are 3 sections
Cart Table, Cart Total and cross-sell.

To see this design, set this template as a cart page from WooLentor – Setting – WooCommerce Template and select the cart page template.

check the frontend.

Now I want to show the Cart total at the right. To do that, add a column and move the cart total there. I prefer to make the cross-sell full width, so remove the extra column.

Customization options are available for a table cell, price, and the checkout button.

You can add background color for the column or only for this widget. to add background color go to the advance tab and add the background-color, Now if I add padding it will look better.

Now let's try to edit the cart table. Click edit and go to the content tab. By default, there are few columns like remove icon, product title, price, quantity, etc. Position can be changed by drag n drop. To remove any column, simply delete that. Edit the column title if you need it. Column width can be increased/decreased by percentage or pixel.
To add any extra column, add new and select custom. This custom content for each product can be added from Product edit screen.

Use the style tab to customize the design.

Below the table, there are 3 buttons. These can be customized from here. for example, I want to increase the coupon code input box width, color, radius, etc.

Button styles customization options are available here.

To change the background color, go to the advance tab and add the background color and make necessary changes.

If you want to display the cross-sell, keep it or delete the section. To use custom cross-sell, search widget by cross-sell and drag the custom widget.
Edit title, set the content, set the column for desktop, tablet and mobile. There are many customization option you will find here.

You can add extra sections at the top or bottom if you need it. Add promotional image, video or any element using elementor widgets.

We are trying to improve and increase this plugin feature regularly.
If you have any suggestions feel free to contact us through our website hasthemes.com.

Leave a Reply

Get 40% OFF on Themes Plugins, Limited Time OfferMore Details