Next, you need to tell WooCommerce to start using your custom checkout page for all customers.
For more details, you can see our tutorial on customizing the WooCommerce checkout page.
For more details and bonus tips, see our tutorial on customizing WooCommerce product pages.
Customize the Shop Page for Your WooCommerce Store
Next, switch to the ‘Settings’ tab to enable Analytics, Facebook pixel, custom scripts, or CSS in your checkout funnel.
Just switch to the ‘Optimizations’ page, and you will see a list of optimizations that you can apply to the checkout page.
You can use ‘Thank You’ or any other meaningful title for your page.
Click on the ‘Save and Start Editing the Page’ button to continue.
For the different methods in this article, we will be using the SeedProd Pro version, as it has the features needed to edit WooCommerce pages.
After adding a product block, you can also customize how it looks.
Go to the WooCommerce » Settings page and switch to the ‘Advanced’ tab.
This will launch the SeedProd page builder interface with your selected template. You can simply point and click on any item on the page to edit it.
Most WooCommerce themes come with a separate cart page. This cart experience adds friction to the shopping and checkout experiences.
Just repeat the process to edit other templates in your custom WooCommerce theme.
SeedProd comes with sections, which are collections of blocks that are often used together. To add a header section, click on the ‘Sections’ tab and then select the ‘Header’ category.
To get started, simply go to the SeedProd » Landing Pages and then click on the ‘Add New Landing Page’ button.
Finally, you can replace the call to action with the Add to Cart block.
To get started, simply go to the SeedProd » Landing Pages and then click on the ‘Add New Landing Page’ button.
In this article, we will show you how to easily edit WooCommerce pages to make more sales without any coding skills.
Why Edit WooCommerce Pages for Your Online Store?
You can also add new blocks by clicking on the ‘Add Block’ button.
Next, you will be asked to choose a template for your page.
After that, you need to add the Checkout block from the left-hand menu.
If users need to adjust the product quality or remove items from the cart, they have to leave the page they are currently viewing to update the cart.
By default, it shows the products customers have added to their cart. However, research shows that more than 70% of customers leave an online store without completing the purchase.
FunnelKit comes with a bunch of optimizations that you can add to your checkout page for a more frictionless experience.
You can further optimize this page by adding more text, special offers, banners, an FAQ section, and more.
Click on the ‘Save and Start Editing the Page’ button to continue.
To publish your changes, don’t forget to click on the ‘Save’ button.
Next, you will need to provide a title and URL for the page. You can use anything that helps you easily identify this page.
Small edits to the checkout page can help you increase sales and reduce cart abandonment on your store.
The easiest way to ensure users complete their purchases is by offering a better checkout experience.
Click on the ‘Save and Start Editing the Page’ button to continue.
This will show the live product page on your website that you can now start promoting.
Next, you will be asked to enter a name for your funnel.
This will launch the SeedProd page builder interface with your selected template. You can simply point and click on any item on the page to edit it.
This is where SeedProd comes in. It is the ultimate WooCommerce page builder plugin that allows you to use an intuitive drag-and-drop tool to design your WooCommerce pages.
You can also add new form fields from the right column. By default, the plugin shows the commonly used checkout fields.
SeedProd allows you to create custom product pages. You can use a well-designed template tailor-made for higher conversions and then simply fill it with your product information.
By default, WooCommerce comes with a plain checkout experience, which is not optimized for sales and conversions.
SeedProd allows you to create and customize a WooCommerce shop page easily. You can choose your own layout and design and optimize this page for higher conversions.
You can choose from recent, featured, best-selling, top-rated, and sale products.
SeedProd allows you to choose the number of products, sorting options, columns, and more.
Simply go to the FunnelKit » Store Checkout page in the WordPress admin dashboard and click on the ‘Create Store Checkout’ button.
You can now replace links to the Shop page in your navigation menu with your custom shop page.
Customize WooCommerce Thank You Page
For instance, you can start by adding testimonials or add a countdown timer to trigger the FOMO effect.
The checkout page in any eCommerce store is one of the most significant steps in the customer journey.
Next, you will be asked to choose a template for your page.
Once you have finished editing all the pages, go to the SeedProd » Theme Builder page and toggle the ‘Enable SeedProd Theme’ switch.
This can be fixed by adding a slide-in cart in WooCommerce.
Paste your new WooCommerce Thank You page URL into this box, then click the ‘Save Changes’ button.
In the template selection, simply click on the ‘One-Step’ option at the top.
Add it to the left column, which is wider and will appear first on mobile devices.
Do you want to edit WooCommerce pages without writing code?
To create your custom checkout page, simply go to SeedProd » Landing Pages and click on ‘Add New Landing Page’.
You can choose one of the templates on the screen and edit it to create a checkout page, or you can start with a blank template.
Go to the WooCommerce » Settings page and switch to the ‘Advanced’ tab.
Next, you will be asked to choose a template for your page.
Next, you need to install and activate the plugin. For more details, see our tutorial on how to install a WordPress plugin.
It has dozens of templates, a funnel builder wizard, and drag-and-drop editing for your cart and checkout pages.
You can now visit your online store in a new browser tab.
Feel free to play around by adding different blocks and tweaking colors and width.
The WooCommerce ‘Thank You’ page appears when a customer completes a purchase. By default, WooCommerce will only show them their order details on this page.
You can choose one of the templates on the screen and edit it to create a cart page, or you can start with a blank template.
You can also simply point and click on any item to edit it.
After that, you will see the page dashboard. From here, you can edit your checkout page, add more steps, or add an order bump.
Simply click to select a template and continue.
Next, you will be asked to provide a page title and URL. You can use something like Shop, Store, or Storefront to indicate that it is the main shop page.
This will launch SeedProd’s page builder interface, where you can simply drag and drop blocks to build your page layout.
Feel free to experiment with different headings, text copy, and products to create an effective Thank You page.
This is where FunnelKit can help. It is one of the best sales funnel builders for WooCommerce that enables you to optimize funnels, checkout pages, cart experience, and more.
Below that, you need to add a two-column layout, which you will use to add other cart page blocks.
Under the ‘Page Setup’ tab, select your custom checkout page for the ‘Checkout page’ option. Don’t forget to click on the ‘Save changes’ button to store your settings.
Next, the plugin will show you many ready-to-use WooCommerce themes you can use as a starting point.
By default, your WordPress theme controls how these pages look. There are a ton of great WooCommerce themes that you can choose from.
This is where you can edit the checkout form fields. In this example, we are using a two-step checkout form. This allows you to capture the contact information before the payment.
Next, you need to add blocks to the right column. This is the area you can use to convince users to complete the purchase.
Now, you can visit your WordPress website to see it in action.
On the next screen, you need to first choose your editor interface.
You can also make the field ‘required’ and assign it to the checkout or thank you page.
Need help? See our tutorial on how to install a WordPress plugin.
First, you need to sign up for a FunnelKit plan by visiting their website.
Your custom WooCommerce theme will now replace your existing WooCommerce theme.
Next, you will be asked to choose a template for your page.
This will bring you back to the Checkout page dashboard. From here, you need to switch to the ‘Fields’ tab.
To get started, simply go to the SeedProd » Setup page and click on the ‘Select a theme for my store’ button next to the ‘Build a WooCommerce Store’ option.
Next, take your mouse to a header and click the ‘Add (+)’ button to insert it into your page.
Next, add the ‘Cart’ block to the right column.
We hope this article helped you learn how to easily edit WooCommerce pages without writing code. You may also want to see our complete WooCommerce SEO guide or our expert picks for the best WooCommerce sales funnel plugins to boost your conversions.
You can then continue editing your template in your preferred editor. See the previous section of this tutorial for more detailed instructions.
Add a Slide-In Cart to WooCommerce
Click on the ‘Save and Start Editing the Page’ button to continue.
Next, you will need to provide a title and URL for the page. You can use anything that helps you easily identify this page.
SeedProd comes with a complete WooCommerce theme builder built-in. This allows you to replace your WooCommerce theme with a custom one of your own.
Simply click on an optimization to configure it, then click on the ‘Save Changes’ button to store your changes.
After entering your license key, you are good to go. You can now edit and create highly optimized WooCommerce pages for your online store.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Don’t forget to click on the ‘Save Changes’ button to store your form settings.
Switch to the ‘Thank You’ tab, and you will find a bunch of thank you page templates. You can choose one of them, or you can even start with a blank template.
Once finished, don’t forget to click on the ‘Save and Publish’ button in the top right corner of the screen.
This will show a popup where you can choose the field type, provide a meta key, and enter a label.
Start adding a few products, and then head over to the cart page to see your new cart page in action.
Edit WooCommerce Product Pages
You can start by replacing the header items, such as the logo, navigation menu, and call-to-action button, with your own.
You can now visit your store in a new browser tab to test the custom checkout experience you have created.
You can choose one of the templates on the screen and edit it to create your shop page.
From here, you will see many options to your left and a live preview of how your slide-in cart will look.
For this tutorial, we chose Gutenberg. Each item on the checkout page is a block that you can edit by simply clicking to select it.
Once you have activated the plugin, you must go to the FunnelKit » Cart page to configure the slide-in cart settings.
However, editing these pages may not be as straightforward as it seems.
You can add all the common website building blocks from the left column. To the right, you will see a live preview of the page you are editing.
The advantage of this approach is that you get more flexibility when editing your WooCommerce theme. You can edit any page using a simple drag-and-drop tool.
Note: You will need at least the Plus plan to unlock sales funnels, upsells, order bumps, and other features.
To find a product ID, you need to go to the Products » All Products page in the WordPress admin area in a separate browser tab.
Simply click to select a template and continue.
Editing a page will open it in the editor you chose earlier.
After that, feel free to point and click to edit the header area to your liking.
WooCommerce creates many pages to display products and add cart functionality to your store. Small improvements to these pages can result in higher sales and less cart abandonment for your store.
You can now go to your store in a new browser tab and try the new checkout experience by adding a product to your cart.
You can add a testimonial block here or show your most popular products.
After signup, go to your account on the FunnelKit website to download the FunnelKit Cart plugin.
You can start by switching to the ‘Sections’ tab and adding a header to your blank template.
Each WooCommerce or WordPress theme is a collection of templates showing different areas of your website or online store.
That doesn’t provide customers with more options to explore. It is kind of a dead end and a missed opportunity for sales and conversions.
This will launch the SeedProd builder interface.
Once you have finished making the changes, don’t forget to click on the ‘Update’ button.
To do that, you will need to install and activate the Thanks Redirect for WooCommerce plugin. For more details, see our tutorial on how to install a WordPress plugin.
WooCommerce themes often come with a boring cart page with no optimization for conversions.
WooCommerce has a default cart page allowing users to continue to the checkout page.
On the other hand, if you want to keep using your existing WooCommerce theme and only edit certain parts of your website, then continue reading.
Customize the WooCommerce Checkout Page
We will be using the blank template for this tutorial, but you can choose any of them that you like.
From here, you need to check the ‘Enable Global Thanks Redirect’ option. After that, you will see a field labeled ‘Thanks Redirect URL.’
Now when customers complete a purchase, they will see your highly optimized custom Thank You page. They will be far more likely to click and search the rest of your store than if you had stayed with the default.
Once you are done editing, don’t forget to click on ‘Save and Publish’ at the top.
SeedProd will open the page in a new browser tab.
Once you have finished, you are ready to customize the WooCommerce checkout form.
Your custom thank you page is now live. However, you still need to tell WooCommerce to use this page as your default Thank You page.
That being said, let’s take a look at how to edit WooCommerce pages, step by step.
Once you are done editing your product page, don’t forget to click on the ‘Save and Publish’ button at the top.
Don’t forget to click on the ‘Save Changes’ button to apply your changes.
You can now take your mouse over to a template and click on the ‘Edit Design’ link to start editing it.
FunnelKit templates can be edited with the default Gutenberg editor, Elementor, Divi, Oxygen, or any other page builder by using shortcodes.
You can start by replacing the header items, such as the logo, navigation menu, and call-to-action button, with your own.
Luckily, you can fix that with SeedProd by creating a custom thank you page.
Once you are happy with the header, you need to add a two-column layout.
Finally, you need to click on the ‘Draft’ button next to the Checkout page title and change it to ‘Publish’. This will replace your existing checkout page with the custom funnel you have just created.
You can call it anything that helps you identify it later. Then, click on the ‘OK’ button to continue.
After that, you need to install and activate the FunnelKit Builder and FunnelKit Builder Pro plugins. You can find them under your account on the FunnelKit website.
FunnelKit also allows you to create a one-page checkout experience.
Next, you will be asked to choose a title and URL for your page.
You need to visit the FunnelKit » Store Checkout page and click on ‘Create Store Checkout’.
After that, you need to enter the product ID in the Add to Cart block settings. You can also change the button text, as well as add subtext, color, and shift alignment.
You can click any of the links below to jump to any method you want:
Create a Completely Custom WooCommerce Theme
By customizing your WooCommerce cart page, you can easily reduce cart abandonment and improve sales.
The shop template in most WooCommerce themes is boring and not optimized for sales and conversions. On top of that, there are usually no or very few options to customize it.
However, you can click on the ‘Add New Field’ button to add a custom form field.
Below that, you can use WooCommerce blocks to display your products.
Simply click on a template to select it.
Next, you will be asked to choose a template for your page.
SeedProd comes with all the WooCommerce blocks that you will need to build a sales-oriented WooCommerce theme.
Upon activation, you need to visit SeedProd » Settings page to enter your plugin license key. You can find this information under your account on the SeedProd website.
After saving your page, click the ‘Preview’ button to see it in action.
Upon activation, you will be asked to provide your plugin license keys. You can find them on the same Downloads page under your account on the FunnelKit website.
FunnelKit offers a ton of customization options. For instance, you can choose from different styles, select cart icons, change button text, and more.
Once you have finished editing, don’t forget to click on ‘Save and Publish’ in the top-right of the screen.
Now, since your cart is currently empty, it will not show any products. Go to your store and add a few products to your cart and then reload the SeedProd page builder.
The checkout page is one of the areas where many users abandon carts.
Next, you need to tell WooCommerce to start using your custom cart page for all customers.
Next, you will be asked to provide a page title and URL. You can use the product name as the title and URL.
Upon activation, go to the WooCommerce » Settings page and click the ‘Products’ tab.
This will launch the SeedProd page builder interface.
You can now use this opportunity to promote your email list or upsell products by adding WooCommerce product grid blocks.
After that, you can add other elements to improve your cart page.
Once you have finished editing your checkout page, don’t forget to click the arrow beside ‘Save’ and then click on ‘Publish’ in the upper-right corner of the screen.
SeedProd will now generate those templates for your theme and show you a list of them.
FunnelKit will now create your custom checkout page.
First, you should add a header and then customize it with your own branding.
We’ll use the blank template for this tutorial.
However, you may want to promote some products more than others. The most you can do to distinguish important products is to make them featured products.
After that, click on the ‘Import This Funnel’ button to continue.
To get started, simply go to the SeedProd » Landing Pages and then click on ‘Add New Landing Page’.
You can now visit your website to test the slide-in cart in your live store.
Customize the WooCommerce Cart Page
FunnelKit has a beautiful slide-in cart feature that integrates seamlessly with your online store. You can even use it to upsell products, incentivize checkout, offer discounts, and more.
To make your product page more effective, you can try these tips:
- Add high-quality product images with the zoom effect so that users can clearly examine the product.
- Under your main call to action, you can create different rows highlighting product features and providing more information to the customers.
- Use social proof to trigger the FOMO effect.
You can also add upsell products or cross-sell products, offer discounts, and make the cart experience much more appealing.
For instance, you may not be able to show additional products, add upsell features, change the layout, and more.
WooCommerce themes use the same template to display all products on your website.
To create your custom checkout page, simply go to the SeedProd » Landing Pages and click on ‘Add New Landing Page’.
A slide-in cart shows a cart button on the screen. Clicking on the button displays a slide-in menu with products the user has added to the cart.
You can choose one of the templates on the screen and edit it to create a product page. You will find several templated optimized for conversions under the ‘Sales’ tab.
To learn more, see our complete tutorial on how to create a custom WordPress theme without coding.
WooCommerce creates many pages to display products, shop, account, checkout, and cart features for your online store.
This will launch the SeedProd page builder interface, where you will see a live preview of your template. You can simply point and click to edit any item in the preview or add new blocks from the left column.
You can choose between a single-step or multi-step checkout page in the preview. After that, simply click on the ‘Import This Funnel’ button at the top.
After that, you can add a hero section at the top with a large image and your main call to action.
Here are a few more things you can add to your checkout page to improve it for higher conversions:
- Trust badges like secure payment badges provided by PayPal and Stripe
- More social proof, like real-time customer activity
- The Business Reviews block in SeedProd to display Google reviews
After that, you can replace images with your product images and edit the text as necessary.
You can use this two-column layout to display the checkout form and upsell products, testimonials, and other elements.
First, you need to visit the FunnelKit website and sign up for an account.
Once you are done making changes to a template, simply click on the ‘Save’ button to store your changes.
For example, you can show related products with an ‘Add to Cart’ button on the checkout page so that users may see something else they want to purchase, too.
After that, you need to choose a template. There are dozens of beautiful templates to choose from. Just click on the ‘Preview’ button to see a live preview of the template.
Note: You will need at least the Plus plan to access the slide-in cart features.
You can now edit the header section by simply clicking on each block and replacing it with your own logo, menu, and call to action.
WooCommerce allows you to easily display your products on the shop page. It is basically a page with your products displayed in a grid layout.
Once published, you can view your product page by clicking on the ‘Preview’ button.
Bonus Tip: Want to see how your new cart page is performing? See our tutorial on WordPress conversion tracking for beginners to track all your conversions.
Customize the WooCommerce Checkout Form
Take the mouse over to the product that you want to promote, and the product ID will appear along with other links.
The first thing you need to do is install and activate the SeedProd plugin. For more details, see our tutorial on how to install a WordPress plugin.
This is how it looked on our demo website.
Add One-Page Checkout in WooCommerce
Users can now edit and update the cart without leaving the page.