Copyrights Reserved © 2021 by BuildWooFunnels, How To Customize WooCommerce Checkout Page With Elementor Widgets, The New Elementor Widgets for Customizing WooCommerce Checkout, Six Shiny New Checkout Templates Built for Elementor, Adding Product(s) for Product-Specific Checkout Page, Customizing the WooCommerce Checkout Form. Would love your thoughts, please comment. Of course, this isn’t all you can do to edit your WooCommerce website. In this case, we’ve used the “Checkout Page”. How To Customize The Woocommerce Checkout Page With Elementor & Woolementor Pro is the simplest way to quickly build a more unique checkout experience for your customers. The checkout form widgets allow you to drag and drop the checkout form anywhere you like on the screen. 3) Remove any kind of shortcode or data from checkout page and click “Edit with elementor” button. Not just that, you can use drag & drop to change the order in which the products show up on the checkout page. Of course, if you're creating a global checkout, you don't have to select products. Many eCommerce store owners have considered their shop site needs to attract as many visitors as possible, that’s enough. In the “Woostify Checkout” section, find “Woostify-Checkout Forms” and drag-and-drop the widget to the editing section as below. WooCommerce is one of the best platforms to create any and all kinds of e-Commerce websites. You want to learn more about it already, don't you?! Apart from making all the functional adjustments to the mini cart, you can also change the colors, border type, width, and do a lot more from the Style section. With that in mind, Woostify offers WooBuilder, which will help you customize one of the most important WooCommerce pages as much as you want. Aero allows you to add WooCommerce product(s) and sell just those through a particular checkout. As you can notice, you can set additional discounts, specify the quantity, remove an accidentally added product. Share. How To Customize Woocommerce Product Pages with Elementor Pro. At BuildWooFunnels, we're determined to give you the tools you need to do the same in your business. Once you have assigned a page, edit that page with the Elementor Editor and find the ‘EA Woo Checkout’ element from the ‘Search’ option under the ‘ELEMENTS’ tab. Elementor is a great front end page builder that allows you to build beautiful custom templates in an instant. Enter your email address and be the first to learn about updates and new features. Not only that, you don't even need to learn how to design, or even hire a designer to help you put together a page that looks slick and also converts. And while you can customize just about anything from the widget's settings in Elementor, you cannot add, edit, remove, or re-order the form fields. To add the payment section, go to Woostify-Checkout Payment, drag the widget and move it to where under the coupon area. This means you don't have to worry about hooks to change the Return to shop URL. 2)Make sure the checkout page has selected a template “Elementor Checkout”. And want to customize that WooCommerce checkout page design using Elementor? As mentioned earlier, WooCommerce offers users a default checkout page, but you can’t edit it. From “Woostify Options” in the dashboard, press WooBuilder > Activate to enable WooBuilder. Elementor allows users to customize WooCommerce shop pages but does not let them edit the checkout page. To use this Essential Addons element, find the ‘EA Woo Checkout’ element from the ‘Search’ option under the ‘ELEMENTS’ tab. You may want to re-order the form fields within the shipping/billing section, or completely eliminate them entirely when not needed. In the search box, find Testimonial widget, then drag it to the right bottom corner. WooCommerce shows the contents of the Thank You page from the thankyou.php template file that can be found in woocommerce/ templates/checkout/ folder. And no, you don't need Elementor Pro for any of this - the free version is good enough! Do you know after Amazon implemented the 1-click buy system, their sales shot up year-on-year hitting $88.9 Billion mark in 2014? To add a new step to your checkout form, hit the plus icon next to 'Step 1'. So let me introduce you to the two widgets that we, engineers at WooFunnels, have built to help you create the custom checkouts of your dream. Next, you have … Take a look: You can change borders, colors, field width, and so much more using the 'Style' option on the left-hand panel. Following the installation of the plugin, the standard WooCommerce Cart and Checkout pages are extremely limited by design. Then you’ll have two areas parallel to each other, making a separation for essential information. Simply just Drag & Drop the ‘Woo Checkout’ element into the ‘Drag widget … This section includes the coupon information and allows your customers to fill in the coupon code if they have and the amount of discount. Then Create a new page called “login” and editing with Elementor. But when it comes to customizing your checkout page - Elementor doesn't have options for that. Checkout Styling for WooCommerce and Elementor adds two new widgets to Elementor Pro under WooCommerce to allow you to style your WooCommerce cart and checkout with the Elementor page builder. This isn't an ideal solution but I've found if you're using Elementor Pro you can create a template in My Library, include the WooCommerce Checkout shortcode [woocommerce_checkout], then paste the template's shortcode into the Checkout page. Activate the plugin. Therefore, it’s very limited to edit the WooCommerce shop page layout. Celebrate 10k activate installs with us. This gives your users complete control over their entire purchase experience. 4) In the left widget panel . Providing extra customization in the layout of the online shop and product pages, WooBuilder allows you to add simplicity to customers’ completing purchases. Open Elementor editor and create a new page. If “Single Product Page” is selected, an additional field becomes … Writer and Blogger about Technology and Marketing at Boostify. Still hacky but a simpler hack than the alternative. There you can make your decision on size, weight, font, style, and more. The WooCommerce Checkout Page is bare-bones by default and, in many cases, most eCommerce websites are „OK“ with that. When you’re creating a WooCommerce checkout page with Elementor, you can’t actually add or edit the checkout fields. No, thanks! The Woocommerce cart widget) OR create BRAND NEW Woocommerce widgets using the Elementor Page builder. What’s the Elementor Theme Builder? Learn how to use Elementor & Woolementor to create a more custom checkout and cart page with WooCommerce. Step 2: View WooCommerce Endpoints. Best WooCommerce Checkout Field Editor Plugins 1. You also might want a premium WooCommerce theme, which usually costs ~$60. It could be the case if you're selling only digital products. So get ready to create money-making checkout pages using the very versatile page builder, Elementor, and of course, the powerful, WooFunnels Funnel Builder Checkout! Content Element. To adjust the form field widths, go into 'your information' or 'shipping address' section and you'll find the options to adjust the form field widths. 1)After activating the plugin go to your checkout page and click edit . Adding Product(s) for Product-Specific Checkout Page Take a look: So the shoppers have the option to make adjustments to their order even at the final step, which obviously means that there's no need to go back to the cart page to make the required changes. In the Woostify Checkout panel, drag the “Woostify Checkout Overview” widget and drop it towards the empty column on the right of the page. When you go shopping in a grocery store, the final step is making payment. After finishing the previous step, let’s edit your WooCommerce Checkout page using the Elementor Editor. Elementor is a users' favorite when it comes to page builders, and I'm sure you'd love to have your store's checkout page be customized using the tool as well. 1. More information […] We also have a video tutorial on how to customize the Checkout page easily without coding. As I said, Elementor gives you a whole host of options to customize the WooCommerce product page, but it also lets you customize the shop page. You'll save a lot of time in the process. A checkout page is a page of an online store where the customer makes payment and provides the information needed for delivery and contact details for invoicing. Tap to unmute. This is the place where the customers can fill in with their private information such as name, address, phone number, etc. The pro plan of Woostify Elementor theme provides you with another choice that is easily customizable. Besides, I am a big fan of cooking and traveling to learn about other regions’ custom and food. For example, if you want to access Elementor WooCommerce Builder, you’ll need to purchase Elementor Pro for $49. Go ahead and explore WooFunnels Funnel Builder here. With these new widgets and the pre-built checkout templates, the WooCommerce checkout page designed using Elementor is fully customizable. You can choose from a wide range of WooCommerce widgets such as product rating, add to cart widget, product images, product stock, and many more to create compelling product pages. Enter your email and we'll send you more information. As usual, you’ll navigate to a page with its role as an online checkout counter once you’ve all you need in your cart and want to get paid. How to edit WooCommerce Pages with Elementor Step 1: Head to the WooCommerce Settings Page.. First, we want to start out by heading to the WooCommerce settings page. Customize Your Elementor Cart and Checkout Pages for WooCommerce. Checkout Styling for WooCommerce and Elementor adds two new widgets to Elementor PRO to allow you to style your WooCommerce Cart and Checkout with the Elementor page builder. The WooCommerce plugin comes with a default Checkout Page. After customizing the Checkout Page, you may also want to customize the My Account Page on WooCommerce Easily. Additionally, you can also style to narrow or widen your custom field by modifying the dashed line. Just click “Publish” and you can view the final outcome of your neat and convenient checkout page. However, when it comes to the checkout page - you can't customize it using Elementor. Download and install the Elementor plugin from here. 1. Customizing the WooCommerce Product Page in Elementor To start with the Product page customization, we’ll first remove the Product rating widget since we don’t have Product ratings enabled on our website. Select the Elementor ZIP from your desktop and upload it to your site. After that, go to the “Woostify Checkout” section by having a click on the grid icon next to the elementor line> Type Checkout to arrive the Woostify checkout widgets.. Aside from WooCommerce custom shop page, an online store website should also include other important pages like checkout and cart page. Customizing WooCommerce Thank You page by overwriting WooCommerce templates. An ideal checkout page can boost the shopping experience and increase conversion rates. Also, each one of these checkout templates is divided into one-step, two-step, and three-step formats. Not Affiliated to Automattic Inc. Before configuring the checkout page, please put some items into your shopping cart. You can decide which fields you want on what step from the 'fields' tab in the Checkout page editor. It applies the same to online stores. Other WooCommerce plugins typically cost ~$20-$80 but can range up to ~$200 for plugins such as WooCommerce Subscriptions (for recurring payments). Now it’s time for the main mission, modifying a checkout page. Now, you can use the Elementor WooCommerce Checkout widget to create a 2-column layout easily. Then within these sections you can add, remove, or edit the fields among many other options. If you want to edit the checkout fields then you need to use a WooCommerce checkout field editor plugin. Then follow the process below to start customizing WooCommerce checkout page with Elementor and Woostify. However, to get your products to sell, you need to create an attractive, eye-catching product page.Thankfully, Elementor’s easy-to-use drag and drop editor lets you do this in a matter of minutes. Customize Woostify Checkout-Form To set the checkout page layout in 2 columns, you select the “ Inner Section” widget from the elementor panel, then you drag and drop this widget to the blue dashed line box stating “ Drag widget here”. What you should go through is navigate to Woostify Options, click “Add New” to head to a pop-up page. We went over the amazing widgets you need to make your checkout page look exactly how you want. Click on the image to check the preview. Since the checkout form is on the same page as your product, customers are enabled to skip multiple pages and go straight forward to a one-step payment process. WooCommerce Elementor Pro brings the front end customization of Elementor to your WooCommerce Archive and Checkout pages! Page: Select a WooCommerce page to display, choosing from Cart Page, Single Product Page, Checkout Page, Order Tracking Form, or My Account Page. The mini cart widget is another drag and drop widget built to let you display a mini cart on the checkout page. Just style your checkout page and make it look the way you want. Copy link. Embed these widgets anywhere on the page directly within Elementors page builder. The Checkout Field Editor provides an interface to add, edit and remove fields shown on your WooCommerce checkout page. To modify the font, click on a random blank in the Checkout Overview table. In terms of checkout page alignment, you can use a widget available to add some space. All in all, customizing your WooCommerce shop page with Elementor can have a great impact on your store. By default, WooCommerce offers its users a basic checkout page. Because the cart abandonment rate is quite high, you should make the checkout page as user-friendly and simple as possible. Hooray, congrats you on your final step. I just can choose the payment method, but can’t pay. You can also design the page to sell one or more of the shown products. Check out the video for more details! In order to set up a WooCommerce checkout page, make sure you have the following WordPress plugins installed: WooCommerce, Elementor, and Woostify. Want to add a beautifully designed WooCommerce Checkout to your sales funnel? Here's how the product selection method works: Add your products to build dedicated checkout. To add a new field, hit the option in the right-hand panel. After adding this widget, you’ll now see the box informing the basic info of your cart including the product’s names their price, and the total price without the discount and shipping fee. Type “Checkout Page” into the field saying “Select the type of template you want to work on”. The way you organize and display … Conclusion. You can even add custom fields to your checkout. Simply click on the Checkout page option and pick any of the pages from the drop-down menu as your WooCommerce Checkout page. Why should you focus on the appearance of your checkout page? Hello, I don’t have a Pay button?? I just want to download the theme, Subscribe to receive exclusive content and notifications. What's more? Install Now and Activate the extension. You can not only change the colors of the button but also text, sub-text, and a lot more: There's also the option to make the order summary collapsible for mobile devices. Apart from the drag & drop widgets, you can even choose from various pre-built Elementor template to create your checkout page. A new page with an appearance as below, where you customize your site page’s layout. So, it will expand only when it is tapped/clicked on by the user. Continually, you add Woostify-Coupon Form to space under the Checkout Overview table. Additionally, if you want more testimonials, just duplicate testimonials by click-right, choose “Duplicate” and you have double sections. This means you can pick a template that you like, import it with a single click and use it to serve your purpose. Shopping. Jeff Bezos attributed it to a friction-free & streamlined buying process. Install Necessary Plugins. First, select the method that you'd like to use to create your checkout page i.e., Built-in Customizer, Elementor, or other page builders. In reality, the revenue is generated once a majority of your visitors convert and it relies on nothing else but the checkout page. 4. To customize the WooCommerce Checkout and Cart pages in Jupiter X:. The Most Powerful Funnel Building Solution For WordPress. For example, you can create a global checkout, one-page checkout, sales page with the embedded order form, Shopify-style checkout, and more. To create or edit a WooCommerce login page or Registration page, Install Elementor and JetBlocks plugin. 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. The buyer can even adjust the quantity of the product from here - add or delete an item and even recover accidentally deleted items. Every template serves a different purpose. There will be a time you’ll definitely need to modify your checkout page, so perceiving how to customize WooCommerce checkout page with Woostify is something that helps the process less hefty. The shoppers can see the list of all the items they've added to their cart on your eCommerce store and the respective quantities against each. By default, WooCommerce creates a long Checkout page, and a lot of useful information about the Cart Items, totals, and payment methods is pushed down the page. If you want an option that doesn't require any code at all, then check out PowerPack Addons for Elementor. As you can see, we’ve added separation between Testimonial and Coupon sections.