Remove title from checkout page #47529

nielslange · 2024-05-16T06:57:54Z

Changes proposed in this Pull Request:

Remove the title from the Checkout template so that it does no longer appear on the checkout page in the frontend.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Go to WP Admin » Apperances » Editor » Pages » Checkout.
Verify that the checkout page does not display the Checkout title.
Go to WP Admin » Apperances » Editor » Templates » WooCommerce » Page: Checkout.
Reset customisations, if there are any.
Verify that the checkout template does not display the Checkout title.
Go to the frontend.
Add a product to the cart.
Go to the checkout page.
Verify that the checkout page does not display the Checkout title.
Verify that the site title on the checkout page has the same bottom and top padding as the site title on the cart page.

Before:	After:

Go to /wp-admin/edit.php?post_type=page.
Create a test page and add the checkout shortcode to it:

[woocommerce_checkout]

Go to /wp-admin/admin.php?page=wc-settings&tab=advanced.
Define the test page with the checkout shortcode as the default checkout page.
Go back to the frontend.
Go to the checkout page with the checkout shortcode.
Verify that the checkout page does not display the Checkout title.

Before:	After:

Changelog entry

Automatically create a changelog entry from the details below.

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Remove title from checkout page

Comment

…mmerce

github-actions · 2024-05-16T07:08:45Z

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

WunderBart · 2024-05-16T15:01:51Z

plugins/woocommerce-blocks/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts

@@ -21,7 +21,7 @@ test.describe( 'Test the checkout template', () => {
 		await expect(
 			page
 				.frameLocator( 'iframe[title="Editor canvas"i]' )
-				.locator( 'h1:has-text("Checkout")' )
+				.locator( 'div:has-text("Place Order · <price/>")' )


I've found it a good practice to let Playwright determine the selectors for me as it takes care of the recommended practices and the selector uniqueness on the page. It sometimes needs to be tweaked a little bit (e.g., we use editor.canvas.* instead of explicit page.frameLocator( 'iframe[title="Editor canvas"i]' ).*), but it does the job right most of the time.

I've recorded a little vid to demo how I use the Plawright codegen for that in the WC context, as it's easier than writing the steps! :D

Screen.Recording.2024-05-16.at.16.53.09.mov

To run the npx playwright open localhost:8889 command, you must be in the /woocommerce/plugins/woocommerce-blocks/ folder. Also, the local e2e test env must be running (pnpm env:start).

Thanks a lot for pointing this out, @WunderBart. I went ahead and replaced all page.frameLocator( 'iframe[title="Editor canvas"i]' ).*) sections.

github-actions · 2024-05-17T08:34:59Z

Hi @WunderBart, @wavvves,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

nielslange · 2024-05-17T08:51:13Z

@WunderBart As I've improved a few e2e tests, based on your feedback, I would appreciate it if you could review the test-related changes. As the tests are passing, they should be fine. It's just to be on the save side. 😀

WunderBart

It looks great from the test perspective! 🎉 Thank you for applying the editor.canvas.* convention everywhere! 🙇

nielslange · 2024-05-17T09:22:44Z

It looks great from the test perspective! 🎉 Thank you for applying the editor.canvas.* convention everywhere! 🙇

Thank you for reviewing the test-related changed, @WunderBart.

nielslange · 2024-05-17T09:23:26Z

@wavvves As Bart reviewed the test-related changes, you can focus on the functional changes.

senadir

Thank you for working on this Niels, it's testing fine for me, just note that you need to reset customization for this to work.

nielslange · 2024-05-20T18:56:27Z

Thank you for working on this Niels, it's testing fine for me, just note that you need to reset customization for this to work.

Thanks for reviewing and approving this PR, @senadir. I'll merge it for now, to get it in before the code freeze, and will update the testing instructions the next days.

nielslange added 3 commits May 16, 2024 13:08

Remove title Checkout page templates

f1893f2

Merge branch 'trunk' into update/47509-remove-checkout-page-title

ad71850

Fix checkout header site title padding

f48fd23

nielslange added the team: Rubik Store API checkout endpoints, Mini-Cart, Cart and Checkout related issues label May 16, 2024

nielslange self-assigned this May 16, 2024

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label May 16, 2024

Add changefile(s) from automation for the following project(s): wooco…

2d842ba

…mmerce

nielslange closed this May 16, 2024

nielslange reopened this May 16, 2024

nielslange added 4 commits May 16, 2024 15:02

Fix failing e2e tests

a527d6f

Merge branch 'trunk' into update/47509-remove-checkout-page-title

a74d1dd

Fix failing e2e test

5020201

Merge branch 'trunk' into update/47509-remove-checkout-page-title

d4a92c8

github-actions bot added the focus: e2e tests Issues related to e2e tests label May 16, 2024

Fix failing e2e test

12c6c99

WunderBart reviewed May 16, 2024

View reviewed changes

nielslange added 3 commits May 17, 2024 13:37

Merge branch 'trunk' into update/47509-remove-checkout-page-title

c42e3e6

Substitute frameLocator in e2e tests

31be497

Fix failing e2e tests

0b3b742

nielslange marked this pull request as ready for review May 17, 2024 08:34

woocommercebot requested review from a team and wavvves and removed request for a team May 17, 2024 08:34

nielslange requested a review from WunderBart May 17, 2024 08:50

WunderBart approved these changes May 17, 2024

View reviewed changes

senadir approved these changes May 20, 2024

View reviewed changes

nielslange merged commit 622f2d3 into trunk May 20, 2024
42 of 43 checks passed

nielslange deleted the update/47509-remove-checkout-page-title branch May 20, 2024 18:56

github-actions bot added this to the 9.0.0 milestone May 20, 2024

github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label May 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove title from checkout page #47529

Remove title from checkout page #47529

nielslange commented May 16, 2024 •

edited

github-actions bot commented May 16, 2024 •

edited

WunderBart May 16, 2024 •

edited

nielslange May 17, 2024

github-actions bot commented May 17, 2024 •

edited

nielslange commented May 17, 2024

WunderBart left a comment

nielslange commented May 17, 2024

nielslange commented May 17, 2024

senadir left a comment

nielslange commented May 20, 2024

Remove title from checkout page #47529

Remove title from checkout page #47529

Conversation

nielslange commented May 16, 2024 • edited

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Changelog entry

Significance

Type

Message

Comment

github-actions bot commented May 16, 2024 • edited

Test using WordPress Playground

WunderBart May 16, 2024 • edited

Choose a reason for hiding this comment

nielslange May 17, 2024

Choose a reason for hiding this comment

github-actions bot commented May 17, 2024 • edited

nielslange commented May 17, 2024

WunderBart left a comment

Choose a reason for hiding this comment

nielslange commented May 17, 2024

nielslange commented May 17, 2024

senadir left a comment

Choose a reason for hiding this comment

nielslange commented May 20, 2024

nielslange commented May 16, 2024 •

edited

github-actions bot commented May 16, 2024 •

edited

WunderBart May 16, 2024 •

edited

github-actions bot commented May 17, 2024 •

edited