Skip to content

Commit

Permalink
Feat: Add options to customize WooCommerce thank you page (#890)
Browse files Browse the repository at this point in the history 
* Add option to customize the page's title and thank you message
* Remove order details table
* Add option to show the customer details, and set it to false
  • Loading branch information
@laurelfulford
laurelfulford authored Apr 23, 2020
1 parent 488656e commit e487f0b
Show file tree
Hide file tree
Showing 5 changed files with 283 additions and 1 deletion.
65 changes: 65 additions & 0 deletions newspack-theme/inc/customizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -509,6 +509,71 @@ function newspack_customize_register( $wp_customize ) {
'section' => 'woocommerce_cart_options',
)
);

/**
* WooCommerce Thank You page details
*/
$wp_customize->add_section(
'woocommerce_thank_you',
array(
'title' => esc_html__( 'Thank You Page', 'newspack' ),
'panel' => 'woocommerce',
)
);

// Thank you page title.
$wp_customize->add_setting(
'woocommerce_thank_you_title',
array(
'default' => esc_html__( 'Order received', 'newspack' ),
'sanitize_callback' => 'sanitize_text_field',
)
);
$wp_customize->add_control(
'woocommerce_thank_you_title',
array(
'type' => 'text',
'label' => esc_html__( 'Thank You page title', 'newspack' ),
'section' => 'woocommerce_thank_you',
)
);

// Thank you message text.
$wp_customize->add_setting(
'woocommerce_thank_you_message',
array(
'default' => esc_html__( 'Thank you. Your order has been received.', 'newspack' ),
'sanitize_callback' => 'sanitize_text_field',
)
);
$wp_customize->add_control(
'woocommerce_thank_you_message',
array(
'type' => 'textarea',
'label' => esc_html__( 'Thank You message', 'newspack' ),
'description' => esc_html__( 'Text message that displays at the top of the "Thank You" page.' ),
'section' => 'woocommerce_thank_you',
)
);

// Thank you - display customer details
$wp_customize->add_setting(
'thank_you_customer_details_display',
array(
'default' => false,
'sanitize_callback' => 'newspack_sanitize_checkbox',
)
);

$wp_customize->add_control(
'thank_you_customer_details_display',
array(
'type' => 'checkbox',
'label' => esc_html__( 'Display Customer Details', 'newspack' ),
'description' => esc_html__( 'Display the customer\'s billing address below their transaction details.', 'newspack' ),
'section' => 'woocommerce_thank_you',
)
);
}
add_action( 'customize_register', 'newspack_customize_register' );

Expand Down
28 changes: 28 additions & 0 deletions newspack-theme/inc/woocommerce.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,3 +167,31 @@ function newspack_checkout_fields_styling( $fields ) {
}
add_filter( 'woocommerce_checkout_fields', 'newspack_checkout_fields_styling', 9999 );

/**
* Filters the page title for the Thank You page.
*/
function newspack_thankyou_page_title( $title, $id ) {
if ( function_exists( 'is_order_received_page' ) &&
is_order_received_page() && get_the_ID() === $id ) {
$title = get_theme_mod( 'woocommerce_thank_you_title', esc_html__( 'Order received', 'newspack' ) );
}
return esc_html( $title );
}
add_filter( 'the_title', 'newspack_thankyou_page_title', 10, 2 );

/**
* Filters the 'message' for the Thank You page.
*/
function newspack_thankyou_order_message() {
$thank_you_msg = get_theme_mod( 'woocommerce_thank_you_message', esc_html__( 'Thank you. Your order has been received.', 'newspack' ) );
return esc_html( $thank_you_msg );
}
add_filter( 'woocommerce_thankyou_order_received_text', 'newspack_thankyou_order_message' );

/**
* Remove the subscription 'thank you' message.
*/
function newspack_subscription_thank_you() {
return '';
}
add_filter( 'woocommerce_subscriptions_thank_you_message', 'newspack_subscription_thank_you' );
21 changes: 20 additions & 1 deletion newspack-theme/sass/plugins/woocommerce.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1188,9 +1188,15 @@ table.variations {
}
}

.woocommerce-checkout-review-order-table {
.woocommerce-checkout-review-order-table,
table.woocommerce-table--order-details.shop_table,
.my_account_orders {
border-top: 1px solid $color__border;

td {
font-weight: normal;
}

td,
th {
border-color: $color__border;
Expand Down Expand Up @@ -1229,6 +1235,10 @@ table.variations {
.cart-subtotal.recurring-total {
font-weight: bold;
}

tfoot th {
font-weight: normal;
}
}

.woocommerce-checkout-review-order {
Expand Down Expand Up @@ -1529,3 +1539,12 @@ table.variations {
}
}
}

.woocommerce-customer-details {
border-top: 1px solid $color__border;
padding-top: $size__spacing-unit;
address {
font-size: 90%;
font-style: normal;
}
}
104 changes: 104 additions & 0 deletions newspack-theme/woocommerce/checkout/thankyou.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<?php
/**
* Thankyou page
*
* This template can be overridden by copying it to yourtheme/woocommerce/checkout/thankyou.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce/Templates
* @version 3.2.0
*/

if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>

<div class="woocommerce-order">

<?php
if ( $order ) :

do_action( 'woocommerce_before_thankyou', $order->get_id() );
?>

<?php if ( $order->has_status( 'failed' ) ) : ?>

<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed">
<?php esc_html_e( 'Unfortunately your order cannot be processed as the originating bank/merchant has declined your transaction. Please attempt your purchase again.', 'newspack' ); ?>
</p>

<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions">
<a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php esc_html_e( 'Pay', 'newspack' ); ?></a>
<?php if ( is_user_logged_in() ) : ?>
<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php esc_html_e( 'My account', 'newspack' ); ?></a>
<?php endif; ?>
</p>

<?php else : ?>

<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received">
<?php echo esc_html( apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Thank you. Your order has been received.', 'newspack' ), $order ) ); ?>
</p>

<h4><?php esc_html_e( 'Summary', 'newspack' ); ?></h4>

<ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">

<li class="woocommerce-order-overview__date date">
<?php esc_html_e( 'Date:', 'newspack' ); ?>
<strong><?php echo wc_format_datetime( $order->get_date_created() ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong>
</li>

<?php if ( is_user_logged_in() && $order->get_user_id() === get_current_user_id() && $order->get_billing_email() ) : ?>
<li class="woocommerce-order-overview__email email">
<?php esc_html_e( 'Email:', 'newspack' ); ?>
<strong><?php echo $order->get_billing_email(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong>
</li>
<?php endif; ?>

<li class="woocommerce-order-overview__total total">
<?php esc_html_e( 'Total:', 'newspack' ); ?>
<strong><?php echo $order->get_formatted_order_total(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong>
</li>

<?php if ( $order->get_payment_method_title() ) : ?>
<li class="woocommerce-order-overview__payment-method method">
<?php esc_html_e( 'Payment method:', 'newspack' ); ?>
<strong><?php echo wp_kses_post( $order->get_payment_method_title() ); ?></strong>
</li>
<?php endif; ?>

<li class="woocommerce-order-overview__order order">
<?php esc_html_e( 'Transaction:', 'newspack' ); ?>
<strong><?php echo $order->get_order_number(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong>
</li>

</ul>

<?php
// Copied from templates/order/order-details.php
$show_customer_details = is_user_logged_in() && $order->get_user_id() === get_current_user_id();
if ( false === get_theme_mod( 'thank_you_customer_details_display', false ) ) {
$show_customer_details = false;
}
if ( $show_customer_details ) {
wc_get_template( 'order/order-details-customer.php', array( 'order' => $order ) );
}
?>
<?php endif; ?>
<?php else : ?>

<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received">
<?php echo esc_html( apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Thank you. Your order has been received.', 'newspack' ), null ) ); ?>
</p>

<?php endif; ?>

</div>
66 changes: 66 additions & 0 deletions newspack-theme/woocommerce/order/order-details-customer.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<?php
/**
* Order Customer Details
*
* This template can be overridden by copying it to yourtheme/woocommerce/order/order-details-customer.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce/Templates
* @version 3.4.4
*/

defined( 'ABSPATH' ) || exit;

$show_shipping = ! wc_ship_to_billing_address_only() && $order->needs_shipping_address();
?>
<section class="woocommerce-customer-details">

<h4><?php esc_html_e( 'Your Information', 'newspack' ); ?></h4>

<?php if ( $show_shipping ) : ?>

<section class="woocommerce-columns woocommerce-columns--2 woocommerce-columns--addresses col2-set addresses">
<div class="woocommerce-column woocommerce-column--1 woocommerce-column--billing-address col-1">

<?php endif; ?>

<?php if ( $show_shipping ) : ?>
<h5 class="woocommerce-column__title"><?php esc_html_e( 'Billing address', 'newspack' ); ?></h5>
<?php endif; ?>

<address>
<?php echo wp_kses_post( $order->get_formatted_billing_address( esc_html__( 'N/A', 'newspack' ) ) ); ?>

<?php if ( $order->get_billing_phone() ) : ?>
<p class="woocommerce-customer-details--phone"><?php echo esc_html( $order->get_billing_phone() ); ?></p>
<?php endif; ?>

<?php if ( $order->get_billing_email() ) : ?>
<p class="woocommerce-customer-details--email"><?php echo esc_html( $order->get_billing_email() ); ?></p>
<?php endif; ?>
</address>

<?php if ( $show_shipping ) : ?>

</div><!-- /.col-1 -->

<div class="woocommerce-column woocommerce-column--2 woocommerce-column--shipping-address col-2">
<h5 class="woocommerce-column__title"><?php esc_html_e( 'Shipping address', 'newspack' ); ?></h5>
<address>
<?php echo wp_kses_post( $order->get_formatted_shipping_address( esc_html__( 'N/A', 'newspack' ) ) ); ?>
</address>
</div><!-- /.col-2 -->

</section><!-- /.col2-set -->

<?php endif; ?>

<?php do_action( 'woocommerce_order_details_after_customer_details', $order ); ?>

</section>

0 comments on commit e487f0b

Please sign in to comment.