How to Use WC-Cart Page Widget

How to Use WC-Cart Page Widget

In the documentation below, I’m going to show you ‘How to Use WC-Cart Page Widget‘. To use the widget is super easy. What more, I will include some instructions with pictures detailed to help you to get it started.

To Insert Widget

To insert a widget into the section is a very fun thing. Simply, drag and drop your widget you want to use for your project. As you see in the screenshot above.


Using the Content Tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.

Now, I’m going to show the sections of the tab and how they work behind the widget.


After inserting the WC- Elements widget, go to Element > Element control > select Cart Page from the dropdown. Then, you’ll find your cart page. As you see in the image example above.

N.B: If you are to use Cart Page, first of all, you’ve to make sure you have listed the products in the WooCommerce. And to do that, just go to WordPress Dashboard > WooCommerce > Products. Keep your eyes on the image.

Style Tab

Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Table Heading

Here, this section will let you add color to both Text and Background. Simply, go to the Style tab > Table Heading.

Table Content

If you want to style the content of the cart page, then, go to the Style tab > Table Content. Take a look at the image.


Go to the Style tab > Input.

Under this section, you can beautify all the input contents. As you see in the image above.

Coupon/ Update Button

Here, you’ve to go to the Style tab > Coupon/ Update Button.

In general, you’ll be able to add a Border with different styles, Border Radius, Box Shadow, Padding, and Typography from this section.

Moreover, see there are two modes (Normal/ Hover) under the sub-heading Button Style and the modes will allow you to style the Coupon Button.

Checkout Button

Finally, look at the subheading Button Style. You should go to the Style tab > Checkout Button and you’ll be able to style under the modes both Normal and Hover.

Video Assist

To sum up, if the doc described above is not enough, I’ll say.
Go and watch the video on ” How to Use WooCommerce Cart Page” inserted. And to get knowledge about the widget by Element Pack go for the demo page.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.


Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.