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 the WooCommerce product cart 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 in designing the WC-Cart Page widget.
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.
Now, let’s work with the Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design the WooCommerce cart page.
Styling with the tab in Elementor will always give you a fantastic experience.
Let’s have a look.
Here, this section will let you add color to both Text and Background. Simply, go to the Style tab > Table Heading.
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 of the WC-Cart Page widget by Element Pack.
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.
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.