WIP: Woocommerce 'Order Receipt' template possibly broken

Bugs
1

I’ve got the Woocommerce ‘Thank You’ template which shows the detail of the order that has been made. That’s working perfectly fine.

After some time (30 mins or so) when this TY page is re-loaded, the TY screen disappears and instead I get this message: To view this page, you must either login or verify the email address associated with the order. This screen provides a email field.

The page content now looks like this: Screen-Shot-2023-10-11-at-9-28-24-pm hosted at ImgBB — ImgBB

When email is confirmed, the Thank you page becomes visible again with the order detail.

I was hoping this could be the ‘Order Receipt’ template, but editing the template doesn’t change anything.

Could there possibly be a bug in the ‘Order Receipt’ template or should I be editing a different file?

Thanks, Jo

1 Like
2

Hi Jo,
Thanks so much for your report!

I reproduced the issue and added it to our bug tracker.

Best regards,
timmse

2 Likes
3

How do I trigger that page using the Order Receipt template without waiting for a time out?

4

You mean how you can reproduce the problem without waiting half an hour to hour? By logging out and reloading the page.

1 Like
5

Yeah, I see that works if you are purchasing logged in.

If you are not logged in and make a purchase, you have to wait for timeout. It was only 10 minutes to timeout.

6

Yes, I have encountered the same issue. Please add support for these parts within bricks.

Just wanted to add that there is a similar issue to password-protected posts. It will fall back to the “default” styling, not taking your template into account.

7

For protected posts, it’s expected since that template type is not currently supported. However, it’s in the ideas board :eyes:: Ideas – Bricks.

8

While you’re waiting for a fix you can use this global CSS to style the page. It uses variables from CF, so you may need to make changes suited to your website’s design.

#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login),
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) {
	padding: var(--space-2xl) 1.5rem;
}

@media (min-width: 478px) {
	#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login),
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) {
		padding: var(--space-2xl) 2rem;
	}
}

@media (min-width: 768px) {
	#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login),
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) {
		padding: var(--space-2xl) 4rem;
	}
}

@media (min-width: 1450px) {
	#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login),
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) {
		padding: var(--space-2xl) 5rem;
	}
}

@media (min-width: 1800px) {
	#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login),
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) {
		padding: var(--space-2xl) 15rem;
	}
}

@media (min-width: 2100px) {
	#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login),
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) {
		padding: var(--space-2xl) 25rem;
	}
}

#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login) .woocommerce,
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) .woocommerce {
	max-width: 45rem;
}

#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login) .woocommerce .woocommerce-thankyou-order-received,
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) .woocommerce .woocommerce-thankyou-order-received {
  display: none;
}

#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login) .woocommerce .woocommerce-info,
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) .woocommerce .woocommerce-info {
  border-radius: var(--radius-s);
}

#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login) .woocommerce .woocommerce-error,
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) .woocommerce .woocommerce-error {
  border-radius: var(--radius-s);
  margin-bottom: 2rem;
}

#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login) .woocommerce .form-row-first,
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login) .woocommerce .form-row-last,
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) .woocommerce .form-row {
  margin-top: 2rem;
  width: 100%;
}

#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login) .woocommerce label,
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) .woocommerce label {
  font-size: var(--text-m);
  font-weight: 400;
}

#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login) .woocommerce input,
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) .woocommerce input {
  padding: 1.5rem;
  border-radius: var(--radius-s);
  line-height: 1;
}

#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-form-login) .woocommerce .woocommerce-form-login__submit,
#brx-content:has(.woocommerce-thankyou-order-received):has(.woocommerce-verify-email) .woocommerce .woocommerce-button {
  background-color: var(--dark);
  color: var(--light);
  padding: 1.4rem 2.4rem;
  border-radius: var(--radius-s);
  margin-top: 2rem;
  font-weight: 400;
}
1 Like