YITH Custom Thank You Page for WooCommerce allows you to replace the WooCommerce default Thank You page with any of the pages you can create through the plugin.
When installing it, you will find 6 Thank you pages already created (Gutenberg-based) and ready to be used as they are or by editing them by clicking on the related icon. You can also duplicate and/or delete each page.
Example of a Thank You page
If, on the contrary, you are using WordPress classic editor, the page will include simple texts and shortcodes. To learn more about the different settings, shortcodes and their parameters, please go to this section.
Let’s now analyze how to edit the included custom Thank you pages or create new ones.
To edit an existing page, just click on the pencil icon that will show on mouse hover.
To create a new page, just click on the Add new button.
Now select Create new page in the popup.
When the page opens, you can edit/enter a title that will define it, replace/add an image to adapt the page to your site style and add anything you want through Gutenberg options.
Note: To preview the Thank you page you are building you can follow the steps in this page.
Let’s now set up a custom Thank you page by using the available shortcodes which are:
If, on the contrary, you are using WordPress classic editor, the page will include simple texts and shortcodes. To learn more about the different settings, shortcodes and their parameters, please go to this section.
Thank You Page Upsells
This section allows you to promote and sell upsell products through the Thank you page.
The available options for this block are:
Show title: (Yes, No) this controls the upsell section title;
Title alignment: choose the alignment for the upsell section title (Left, Center, Right);
Title color: choose the color for the upsell section title;
Number of products to show: decide how many products to show in the upsell section;
Columns number: select the number of columns to show the upsell products (from 1 to 4);
Order by: choose how to order products (by title, date or random);
Choose the type of products to promote: select the type of products to show as upsell (Best-sellers, Featured, Related, Custom). By selecting Custom, you will need to search and add the products from the field Products to show;
Responsive visibility: choose whether to show or hide the upsell section on
desktop
tablet
mobile
Responsive text alignment: set the alignment of the text for
mobile
tablet
Additional CSS Class(es): here, you can enter additional CSS classes;
Hide on Logged in Users: enable if you want to hide upsells to users when they are not logged in;
Hide on Logged out Users: enable if you want to hide upsells to guests or logged-out users.
Thank You Page Order Overview Header
You can use this block to add the order overview header to the page. The available options are:
Order ID: enter an order ID to see the rendered shortcode;
Style: select the style to apply to show the order overview
compact – single line
multiple lines
Text alignment: choose the alignment for the order overview text (Left, Center, Right);
Show thank you message: (Yes/No) this controls the thank you message;
Responsive visibility: choose whether to show or hide the order overview on
desktop
tablet
mobile
Responsive text alignment: set the alignment of the text for
mobile
tablet
Additional CSS Class(es): here, you can enter additional CSS classes;
Hide on Logged in Users: enable if you want to hide order overview to users when they are not logged in;
Hide on Logged out Users: enable if you want to hide order overview to guests or logged-out users.
Thank You Page Order Table
You can use this block to add the order table to the page. The available options are:
Order ID: enter an order ID to see the rendered shortcode;
Show title: (Yes, No) this controls the order table title;
Show product thumbnails: (Yes, No) this controls the thumbnails of products;
Title color: choose the color for the order table;
Text alignment: choose the alignment for the order table (Left, Center, Right, Justified);
Accent color: set the accent color;
Responsive visibility: choose whether to show or hide the order table on
desktop
tablet
mobile
Responsive text alignment: set the alignment of the text for
mobile
tablet
Additional CSS Class(es): here, you can enter additional CSS classes;
Hide on Logged in Users: enable if you want to hide order table to users when they are not logged in;
Hide on Logged out Users: enable if you want to hide order table to guests or logged-out users.
Thank You Page Order Customers Details
You can use this block to add the customer’s details to the page. The available options are:
Order ID: enter an order ID to see the rendered shortcode;
Show title: (Yes, No) this controls the customer’s details title;
Title color: choose the color for the customer’s details title;
Text alignment: choose the alignment for the customer’s details (Left, Center, Right);
Shipping and Billing info layout: choose the layout for the customer’s shipping and billing info from
Compact (single block)
Traditional (two columns)
Responsive visibility: choose whether to show or hide the customer’s details on
desktop
tablet
mobile
Responsive text alignment: set the alignment of the text for
mobile
tablet
Additional CSS Class(es): here, you can enter additional CSS classes;
Hide on Logged in Users: enable if you want to hide customer’s details to users when they are not logged in;
Hide on Logged out Users: enable if you want to hide customer’s details to guests or logged-out users.
Thank You Page Order Number
You can use this block to add the order number to the page. The available options are:
Responsive visibility: choose whether to show or hide the order number on
desktop
tablet
mobile
Responsive text alignment: set the alignment of the text for
mobile
tablet
Additional CSS Class(es): here, you can enter additional CSS classes;
Hide on Logged in Users: enable if you want to hide the order number to users when they are not logged in;
Hide on Logged out Users: enable if you want to hide the order number to guests or logged-out users.
Thank You Page Customer Name
You can use this block to add the customer’s name to the page. The available options are:
Name type: choose the name type to show as the customer’s name from:
first name
billing first name
Order ID: enter an order ID to see the rendered shortcode;
Responsive visibility: choose whether to show or hide the customer’s name on
desktop
tablet
mobile
Responsive text alignment: set the alignment of the text for
mobile
tablet
Additional CSS Class(es): here, you can enter additional CSS classes;
Hide on Logged in Users: enable if you want to hide the customer’s name to users when they are not logged in;
Hide on Logged out Users: enable if you want to hide the customer’s name to guests or logged-out users.
Thank You Page Order Customer Email
You can use this block to add the customer’s email to the page. The available options are:
Responsive visibility: choose whether to show or hide the customer’s email on
desktop
tablet
mobile
Responsive text alignment: set the alignment of the text for
mobile
tablet
Additional CSS Class(es): here, you can enter additional CSS classes;
Hide on Logged in Users: enable if you want to hide the customer’s email to users when they are not logged in;
Hide on Logged out Users: enable if you want to hide the customer’s email to guests or logged-out users.
Thank You Page Social box
Thanks to the Social box section, your customers will be able to share the products they have just purchased on Facebook, Twitter, Pinterest and/or WhatsApp.
The available options for this block are:
Order ID: enter an order ID to see the rendered shortcode;
Show title: (Yes, No) this controls the social box title;
Title alignment: choose the alignment for the social box title (Left, Center, Right);
Title color: choose the color for the social box title;
Show or hide the following social media in the box:
Facebook
Twitter
Pinterest
WhatsApp
Set the color for:
accent color
button background
button background on hover
button text
button text on hover
Button border radius (in px): set the border radius for the social box;
Responsive visibility: choose whether to show or hide the social box on
desktop
tablet
mobile
Responsive text alignment: set the alignment of the text for
mobile
tablet
Additional CSS Class(es): here, you can enter additional CSS classes;
Hide on Logged in Users: enable if you want to hide the social box to users when they are not logged in;
Hide on Logged out Users: enable if you want to hide the social box to guests or logged-out users.
Thank You Page PDF Button
Show a PDF button to allow your customers to download the order info as a PDF file.
The available options for this block are:
Button text: enter the text for the PDF button;
Set the color for:
button background
button background on hover
button text
button text on hover
Button border radius (in px): set the border radius for the PDF button;
Responsive visibility: choose whether to show or hide the PDF button on
desktop
tablet
mobile
Responsive text alignment: set the alignment of the text for
mobile
tablet
Additional CSS Class(es): here, you can enter additional CSS classes;
Hide on Logged in Users: enable if you want to hide the PDF button to users when they are not logged in;
Hide on Logged out Users: enable if you want to hide the PDF button to guests or logged-out users.
Thank You Page Coupon Box
The Coupon box can be very useful if you want to promote your running offers and discounts.
The available options for this block are:
Coupon code: select one of the coupons previously created in WooCommerce;
Title: enter a title for the coupon box;
Title color: choose the color for the coupon box title;
Title font size (in px): select the font size for the title;
Responsive visibility: choose whether to show or hide the PDF button on
desktop
tablet
mobile
Responsive text alignment: set the alignment of the text for
mobile
tablet
Additional CSS Class(es): here, you can enter additional CSS classes;
Hide on Logged in Users: enable if you want to hide the coupon box to users when they are not logged in;
Hide on Logged out Users: enable if you want to hide the coupon box to guests or logged-out users.