Friday, August 19, 2022
HomeeCommerceFind out how to Customise a WooCommerce Thank You Web page

Find out how to Customise a WooCommerce Thank You Web page

[ad_1]

The thanks web page, additionally known as the acquisition affirmation web page, is an often-neglected a part of many eCommerce web sites. Since its main perform is to let clients know that their buy was profitable, retailer house owners typically pay little consideration so long as it shows successful message of some type. 

However the thanks web page can present rather more worth for you and your clients should you spend a while optimizing it.

Why customise your WooCommerce thanks web page?

Although your thanks web page might appear to be a small a part of your web site, each level within the buyer journey is an opportunity to offer the patron with extra worth and enhance income in your retailer. Research have proven that it’s a lot inexpensive to retain current clients than it’s to seek out new ones. If somebody arrives at your thanks web page, it means they’ve already made a purchase order. And since they’re already extra more likely to make one other one, this can be a nice alternative to information them in that route. All it prices is slightly effort up entrance and this new enchancment to your retailer will go to give you the results you want each day.

Additionally, the thanks web page is a secure place so that you can show provides to your clients as an alternative of sending them in transactional emails, the place you might wish to restrict the quantity of promotional content material

Listed here are some methods to make use of customized thanks pages to enhance your retailer:

  • Embrace essential info associated to the order. Add a supply time estimate so clients have an thought of when they’ll obtain their order. Or embody hyperlinks to product guides, onboarding movies, FAQs, or different help paperwork. This may assist handle expectations, present wanted info, and scale back help tickets. 
  • Share particular provides. Embrace coupons that clients can use on their subsequent order and recommend associated merchandise or affiliate merchandise. 
  • Remind clients of loyalty factors, rewards, or subscription standing. With WooCommerce Factors and Rewards, clients can earn factors for purchases, account signups, and critiques. The thanks web page is a good place to remind them of the factors they’ve earned, how shut they’re to redemption, and methods to earn extra. For those who promote subscriptions or memberships, the thanks web page presents an important alternative to recommend plan upgrades or remind clients if their recurring cost methodology is about to run out.

There are just a few other ways you may customise your thanks web page. Handbook strategies embody coding a customized web page template, utilizing WooCommerce hooks through your theme’s capabilities.php file, and including customized kinds to your youngster theme’s stylesheet. For those who’re not snug with coding, you need to use a plugin that allows you to customise your thanks web page.

The default WooCommerce thanks web page

The model of your thanks web page might differ primarily based on the theme you may have put in. It could even use customized thanks pages already. Nevertheless, what you see beneath is the default content material included with kinds utilized from the Sinatra theme:

default thank you page

As you may see, the content material is comparatively fundamental. The order quantity, date, buyer e mail, whole, cost methodology, merchandise bought, and billing info are included by default. Let’s discover some methods we will add some fundamental customizations to enhance the thanks web page.

Utilizing an extension to customise your WooCommerce thanks web page

If the method of manually customizing your thanks web page appears tedious, otherwise you’re merely not snug digging into code, there are extensions that may do the heavy lifting of making customized thanks pages for you.

The Customized Thank You Pages extension enables you to create a number of thanks pages that show conditionally primarily based on the merchandise that have been bought. These customized thanks pages can show distinctive titles and descriptions, billing and delivery info, cross-sells, up-sells, and anything that you simply may wish to add. Since these are precise pages and never dynamically generated, you may add any WooCommerce or theme shortcodes, embed video, and add customized textual content. 

Simply create and format your thanks pages and select which one you wish to show within the Product information part for every product.

choosing a thank you page for a product

You’ll be able to even present a number of thanks pages for a single product or go for a single thanks web page that shows primarily based on precedence. If a buyer buys a number of merchandise in an order that every have their very own thanks web page assigned to them, the web page with the bottom precedence quantity would be the one which shows.

setting up a custom thank you page

An alternative choice for creating customized thanks pages is the Customized Thank You and Success Pages extension. It has comparable options to the Customized Thank You Pages extension but in addition has the potential of displaying thanks pages primarily based on person position or classes and displaying built-in social sharing buttons.

thank you page template

Create a customized WooCommerce thanks web page manually

On this part, we’ll focus on three other ways to manually customise your WooCommerce thanks web page.

Earlier than you get began, be sure to’re utilizing a youngster theme as an alternative of a father or mother theme. Don’t immediately overwrite information in WooCommerce or your father or mother theme as these information can be overwritten in future updates. 

Notice: For those who’re unfamiliar with code and resolving potential conflicts, choose a WooExpert or Developer for help. We’re unable to offer help for customizations beneath our Assist Coverage.

Find out how to code a WooCommerce thanks web page template

Step 1: Obtain the thankyou.php web page template file

Use an SFTP consumer or your host’s cPanel to entry your web site’s information and navigate to wp-content/plugins/woocommerce/templates/checkout. Obtain the file thankyou.php to your native machine. 

accessing a site via FTP

Step 2: Edit the thankyou.php file along with your customized code

Open thankyou.php in your textual content modifying software program of selection. You need to use Notepad (Home windows) or TextEdit (Mac), however be sure to’re modifying in plain textual content mode. Higher nonetheless, use a free textual content modifying software program designed particularly for coding like Atom.io. Atom.io is a cross-platform textual content editor that works on Home windows, Mac OS, and Linux working programs. 

For this instance, we’ll change the textual content “Thanks. Your order has been obtained.” to “Thanks for putting an order with us!” We’ll additionally add some details about delivery and make some model modifications to visually name consideration to this essential info.

Unique code:

That is the default code that we’ll be modifying within the youngster theme template.

<p class="woocommerce-notice woocommerce-notice–success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thanks. Your order has been obtained.', 'woocommerce' ), $order ); // phpcs:ignore WordPress.Safety.EscapeOutput.OutputNotEscaped ?></p>

Substitute code:

That is the code we’ll be utilizing in our new customized thanks web page.

<p class="woocommerce-notice woocommerce-notice–success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thanks for putting an order with us!', 'woocommerce' ), $order ); // phpcs:ignore WordPress.Safety.EscapeOutput.OutputNotEscaped ?></p>

<p class="thankyou-note”> Please observe that supply instances are at present estimated at 7-10 enterprise days for U.S. supply. Orders exterior the US might take two weeks to 30 days to be delivered and should expertise delays as a result of customs or different present insurance policies which are out of our management. You probably have any questions on your order, please contact us at customerservice@yourstore.com.</p>

After making these modifications, save your file with the identical title, thankyou.php. In your SFTP software or cPanel, navigate to wp-content/themes/your-child-theme. In your youngster theme folder, you’ll create two new folders. First, create a folder named woocommerce. Within the woocommerce folder create a folder referred to as checkout.

Now add your modified thankyou.php file to the kid theme’s woocommerce/checkout folder.

CSS customizations

Notice that we’ve added a brand new p class referred to as .thankyou-note. In our youngster theme’s model.css file, we’re going so as to add some customizations to the already current p.woocommerce-notice class and add kinds to the brand new p.thankyou-note class as follows:

.woocommerce-checkout p.woocommerce-notice {

    font-size: 20px;

    font-weight: 800;

    colour: #3857F1;

}

.woocommerce-checkout p.thankyou-note {

    margin-bottom: 40px;

    padding: 0 0 5px 20px;

    border-left: strong 5px #c4401c;

}

Save your model sheet and re-upload it with these customizations to your youngster theme folder.

It is best to now have a thanks web page that appears like this: 

edited thank you page

Customizing the WooCommerce thanks web page template with hooks

You too can use WooCommerce hooks in your youngster theme’s capabilities.php file so as to add or take away content material out of your thanks web page. For those who’re unfamiliar with WooCommerce hooks, evaluate the WooCommerce documentation. For a whole checklist, try the WooCommerce Motion and Filter Hook Reference web page.

For this instance, we’ll use a hook so as to add a particular coupon for orders over $100 that can seem beneath the billing handle part.

In our youngster theme’s capabilities.php file, we’ll add the next code:

add_action( 'woocommerce_thankyou', 'coupon_thankyou', 10, 2 ); 

perform coupon_thankyou( $order_id ) {

$order = wc_get_order( $order_id );

     $whole=0;

foreach ( $order->get_items() as $item_key => $merchandise ) {

         $item_data = $item->get_data();       

         $item_total = intval( $item_data[‘total’] );

         $whole += $item_total;        

}

if ( $whole>100 ) {

echo "<part class="woocommerce-thankyou-coupon"><h2 class="woocommerce-column__title">Congrats! Get 50% off your subsequent buy!</h2><div class="tybox"><p>As a particular thanks for spending over $100 with us at present, we’d like to present you 50% off your subsequent order of any full priced gadgets in our retailer.</p><p>Use code <code class="tycoupon">[ 50special ]</code>&nbsp;in your subsequent order.</p></div></part>";

}

}

Save your modifications and add the revised file to your youngster theme folder.

CSS customizations

Notice that we’ve added some new CSS courses within the above motion — part class .woocommerce-thankyou-coupon, a div class referred to as .tybox, and a code class referred to as .tycoupon. Since this can be a particular coupon, we wish to name consideration to it and add distinctive kinds that assist it stand out from the remainder of the thanks web page. We’ll add these kinds to the brand new customized courses within the youngster theme model.css file as follows:

.woocommerce .woocommerce-thankyou-coupon div.tybox {

    border: dashed 13px;

    border-radius: 3px;

    border-color: rgba(110,110,110,.2);

    padding: 12px 20px;

    background: rgb(176,34,195);

    background: linear-gradient(0deg, rgba(176,34,195,0.30) 0%, rgba(253,214,45,0.30) 100%);

}

.woocommerce .woocommerce-thankyou-coupon {

margin-bottom: 2em;

}

code.tycoupon {

    font-size: 18px;

    font-weight: 800;

}

Re-upload the kid theme model sheet with these customizations to your youngster theme folder. The consequence ought to now appear like this:

thank you page with a coupon added

Irrespective of which methodology you resolve to make use of to customise your WooCommerce thanks web page, you need to take the time to develop a technique that gives the very best return in your efforts. Relying on the kind of enterprise you’re working, you might deal with rewards or loyalty factors, coupons, or detailed onboarding info. 

Whereas customized thanks pages are only one a part of the larger puzzle that’s rising your corporation, they’re a singular alternative to offer useful info and focused advertising and marketing messages that each save and make you cash. 

Uncover extra methods to customise your WooCommerce retailer.

Visit the extensions marketplace to customize your store

[ad_2]

RELATED ARTICLES

Most Popular

Recent Comments