Categories
Website Design

How To Customize Your WooCommerce Checkout Page [Video]

How To Customize Your WooCommerce Checkout Page

𝗚𝗲𝘁 𝗖𝗮𝗿𝘁𝗳𝗹𝗼𝘄𝘀 𝗽𝗿𝗼 𝗽𝗹𝘂𝗴𝗶𝗻 ➜ https://wl.tools/cartflows

𝗖𝗵𝗲𝗰𝗸𝗼𝘂𝘁 𝗼𝘂𝗿 𝗲𝘅𝗰𝗹𝘂𝘀𝗶𝘃𝗲 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀 𝗰𝗼𝘂𝗿𝘀𝗲 ➜ https://websitelearners.com/wordpress-course

𝗚𝗲𝘁 𝘁𝗵𝗲 𝗙𝗮𝘀𝘁𝗲𝘀𝘁 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀 𝗛𝗼𝘀𝘁𝗶𝗻𝗴 ➜ https://webspacekit.com

𝗛𝗼𝘄 𝘁𝗼 𝗠𝗮𝗸𝗲 𝗠𝗼𝗻𝗲𝘆 𝘄𝗶𝘁𝗵 𝘆𝗼𝘂𝗿 𝘄𝗲𝗯𝘀𝗶𝘁𝗲 ➜ https://websitelearners.com/ebook/top-5-ways-to-monetize-your-website/

𝗩𝗼𝘁𝗲 𝗳𝗼𝗿 𝗼𝘂𝗿 𝗻𝗲𝘅𝘁 𝘃𝗶𝗱𝗲𝗼 ➜ https://topics.websitelearners.com/websitelearners

𝗣𝗼𝘀𝘁 𝗜𝘀𝘀𝘂𝗲𝘀 𝗛𝗲𝗿𝗲 ➜ https://wltalk.com/post/1384095953

Learn how you can customize the checkout page on your Woo-commerce Website.

Let’s say you have an ecommerce Website, and you want to customize your checkout page

You can do that easily by following our simple steps,

So let’s get started

𝗧𝗮𝗯𝗹𝗲 𝗼𝗳 𝗰𝗼𝗻𝘁𝗲𝗻𝘁𝘀 :

00:00 Intro

01:02 Install Cartflows Plugin

01:54 Import a Design for the Checkout Page.

04:53 Edit the Content of your Checkout Page

07:23 Edit Form Field of Checkout Page

10:33 To Get Premium Features of Cartflows plugin

14:22 To Create Upsell and Downsell

22:31 To Create Order Bump

Step 1: Install Cartflows Plugin

To install the plugin, go to Dashboard ► Plugins ► Add New,

Now search for ‘Cart flows plugin’ and click ‘Install & Activate’.

Step 2: Import a Design for the Checkout Page.

Go to Cart flows ► Flows ► Add new,

Select your design, & click View all steps ► Checkout page ► Import flow,

Now enter your design title & click ‘Import’

The design will be imported on your site.

To delete a page, click on 3 dots of a page & then click ‘Delete’ & ‘OK’

To display our new checkout page on your site.

Go to dashboard, & click ‘Settings’,

In Global checkout select ‘Checkout page’ & then click ‘Save settings’,

Now if we go to our checkout page & click refresh,

Step 3: Edit the content of your checkout page.

Just click ‘Edit with Elementor’,

Now drag and drop the elements,

To change the image, text of your checkout page.

Once you’re done with the changes, click ‘update’.

Likewise, you can edit thankyou page.

To customize your checkout page,

First Install the plugin, go to Dashboard ► Plugins ► Add New,

Now search for ‘Checkout field editor’ and click ‘Install & Activate’.

Now click ‘Checkout fields’ & now edit your fields,

To disable a field, click on that field & disable field option.

Likewise you can change field name, add placeholder text,

Once you’re done editing, click ‘save’.

To get premium features of cart flows plugin

Click ➜ https://wl.tools/cartflows

Now click ‘Get Cartflows’, choose your plan,

Fill up the details & make payment.

Now click ‘Download’ & you will be taken to cart flows dashboard

Now again click ‘download’, you will see cartflows pro plugin

Just click ‘download’ & plugin will be downloaded.

To install the plugin in WordPress

Go to dashboard ► plugins ► Add New,

Then click ‘upload plugin’ & add the plugin file,

Now click ‘Install & Activate’, Now Enter licence key,

To get keys, go to cart flows dashboard ► API keys,

Now add the keys on your dashboard and click ‘Activate,

To create an upsell, go to dashboard ► Cartflows ► Flows,

Click on checkout page & then click ‘Add new step’,

Now click upsell & select your design & click ‘Import’.

Now Enter upsell name & click ‘import’,

Now drag the upsell & drop it below checkout page.

To add products to upsell click Edit ► Products,

Now select your product & add discount.

Once done, click ‘save Settings’

Now to design, click design ► Edit with Elementor,

Edit your upsell page by adding your product image, title, price.

Once done, click ‘update’,

Now upsell page will appear when a customer places an order.

Likewise you can recommend another product with lower price,

This feature is called downsell.

Follow the same steps as upsell, to create downsell.

To create an order bump, go to Dashboard ► Cart flows ► Flows,

And click on your checkout page, now click Edit ► Order bump

And enable order bump option.

Select the product, add the product image, once done click ‘save’

And now your customer will see recommended product, when they place order.

To edit the fields of the checkout page using cartflows pro plugin

Go to dashboard ► Cartflows ► Flows

Now click on your checkout page ► Edit ► Form Fields,

And enable custom field editor option.

And you can edit the field of your checkout page.

To get premium templates, go to templates,

You will find all the premium templates, select your design.

So that’s it, guys,

Now you know how to customize your checkout page.

———————–
🙌 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹𝗹𝘆:
𝗪𝗲❜𝗿𝗲 𝗛𝗶𝗿𝗶𝗻𝗴: https://websitelearners.com/careers/​
Want your website developed by us? Email us your requirements to contact@websitelearners.com

Watch/Read More
Categories
Website Design

How To Create Advanced CSS Dropdown Menus [Video]

FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.htmlDropdown menus are one of the more common things you will create as a developer, but most developers create boring looking dropdowns. In this video I will show you have to create and advanced CSS dropdown that can include things such as forms or advanced navigation.📚 Materials/References:FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.htmlStarting GitHub Code: https://github.com/WebDevSimplified/advanced-dropdown/tree/starting-codeGitHub Code: https://github.com/WebDevSimplified/advanced-dropdownAsync Vs Defer Video: https://youtu.be/BMuFBYw91UQAsync Vs Defer Article: https://blog.webdevsimplified.com/2019-12/javascript-loading-attributes-explainedJavaScript Data Attribute Article: https://blog.webdevsimplified.com/2019-10/do-not-use-class-selectors-in-javascript🌎 Find Me Here:My Blog: https://blog.webdevsimplified.comMy Courses: https://courses.webdevsimplified.comPatreon: https://www.patreon.com/WebDevSimplifiedTwitter: https://twitter.com/DevSimplifiedDiscord: https://discord.gg/7StTjnRGitHub: https://github.com/WebDevSimplifiedCodePen: https://codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:20 - Demo/Starting Code00:56 - Dropdown CSS07:50 - JavaScript11:25 - Advanced Menu HTML/CSS#Dropdown #WDS #CSS

Categories
Website Design

Pure CSS Dropdown Menu with Cool Hover Effect | Latest CSS Dropdown Menu [Video]

9+ Complete Front-end Responsive Website DesignGet here - https://www.udemy.com/course/the-ultimate-frontend-web-development-8-courses-included/?couponCode=BE-CREATIVE-DESIGNER------------------------- Enroll this complete course - https://www.udemy.com/course/responsive-frontend-web-development-in-html-css-javascript/?couponCode=LATEST-TRENDS--------------------Join this channel to get Source code everyday :https://www.youtube.com/channel/UC8xTHK97Ng__KZvGcO_K7CA/join----------------------