Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add filter for place order button label #7154

Merged
merged 20 commits into from Sep 29, 2022

Conversation

nielslange
Copy link
Member

@nielslange nielslange commented Sep 14, 2022

Fixes #5876

Note

Currently, the Place Order button either shows Place Order or the payment method label, e.g. Proceed to PayPal. However, it's not possible for a merchant to change the button label. This PR aims to add a filter to the Place Order button so that a merchant can change the label if needed.

While testing this PR with multiple payment method, I noticed that __experimentalRegisterCheckoutFilters was returning the same result for all payment methods. In p1663160361460549-slack-C8X6Q7XQ, I reached out to @senadir who updated the caching mechanism of packages/checkout/filter-registry/index.ts. This update is also part of this PR.

Testing

Verify that label filter works

  1. Create a test page and add the Checkout block to it.
  2. Install and activate the Simple Custom CSS and JS plugin.
  3. Head over to /wp-admin/edit.php?post_type=custom-css-js and add the following JS code snippet:
const label = () => 'Pay now';
const { __experimentalRegisterCheckoutFilters } = window.wc.blocksCheckout;
__experimentalRegisterCheckoutFilters( 'custom-place-order-button-label', {
	placeOrderButtonLabel: label,
} );
  1. Head over to the frontend, add a product to the cart and open the page with the Checkout block.
  2. Verify that the button label says Pay now.
Screenshot 2022-09-16 at 10 58 50

Verify that payment method label still works.

  1. Make sure that the code snippet from the previous test is deactivated.
  2. Install and activate the Code Snippets plugin.
  3. Head over to /wp-admin/admin.php?page=snippets and add the following PHP code snippet:
add_filter( 'woocommerce_should_load_paypal_standard', '__return_true' );
  1. Head over to /wp-admin/admin.php?page=wc-settings&tab=checkout&section=paypal and select the options Enable PayPal Standard and Enable PayPal sandbox.
  2. Head over to the frontend, add a product to the cart and open the page with the Checkout block.
  3. Select the payment method PayPal.
  4. Verify that the button label says Proceed to PayPal.
Screenshot 2022-09-16 at 11 01 29

Verify that default label still works.

  1. Make sure that the code snippet from the first test is still deactivated.
  2. Head over to the frontend, add a product to the cart and open the page with the Checkout block.
  3. Select a payment method apart from PayPal, e.g. Credit Card (Stripe).
  4. Verify that the button label says Place Order.
Screenshot 2022-09-16 at 11 07 51

Verify that i18n of the default label still works.

  1. Make sure that the code snippet from the first test is still deactivated.
  2. Head over to /wp-admin/options-general.php and select German as the Site Language.
  3. Head over to /wp-admin/update-core.php?force-check=1 and fetch translations.
  4. Head over to the frontend, add a product to the cart and open the page with the Checkout block.
  5. Select a payment method apart from PayPal, e.g. Credit Card (Stripe).
  6. Verify that the button label says Kostenpflichtig bestellen.
Screenshot 2022-09-16 at 11 17 21

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Add filter for place order button label.

@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7154.zip

@github-actions
Copy link
Contributor

github-actions bot commented Sep 14, 2022

Size Change: +96 B (0%)

Total Size: 916 kB

Filename Size Change
build/blocks-checkout.js 17.5 kB -3 B (0%)
build/checkout-blocks/actions-frontend.js 1.8 kB +34 B (+2%)
build/checkout-blocks/terms-frontend.js 1.65 kB +34 B (+2%)
build/checkout-frontend.js 52.5 kB -1 B (0%)
build/checkout.js 40.2 kB +32 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.62 kB
build/active-filters.js 8.3 kB
build/all-products-frontend.js 26.5 kB
build/all-products.js 33.6 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter.js 13.3 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.63 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.66 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.12 kB
build/cart-blocks/cart-express-payment-frontend.js 798 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.26 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 783 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.73 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.73 kB
build/cart-blocks/order-summary-shipping-frontend.js 428 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/cart-frontend.js 50.3 kB
build/cart.js 46.4 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.94 kB
build/checkout-blocks/billing-address-frontend.js 925 B
build/checkout-blocks/contact-information-frontend.js 2.99 kB
build/checkout-blocks/express-payment-frontend.js 1.18 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.88 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js 602 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 7.89 kB
build/checkout-blocks/shipping-address-frontend.js 1.06 kB
build/checkout-blocks/shipping-methods-frontend.js 4.98 kB
build/checkout-blocks/totals-frontend.js 324 B
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.28 kB
build/legacy-template.js 2.83 kB
build/mini-cart-component-frontend.js 16.8 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/footer-frontend.js 3.18 kB
build/mini-cart-contents-block/items-frontend.js 236 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-contents-block/title-frontend.js 366 B
build/mini-cart-contents.js 17 kB
build/mini-cart-frontend.js 1.71 kB
build/mini-cart.js 4.58 kB
build/price-filter-frontend.js 13.5 kB
build/price-filter.js 9.4 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 225 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB
build/product-add-to-cart-frontend.js 1.24 kB
build/product-add-to-cart.js 6.47 kB
build/product-best-sellers.js 7.63 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 433 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-button-frontend.js 1.89 kB
build/product-button.js 1.58 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 879 B
build/product-category-list.js 501 B
build/product-category.js 8.61 kB
build/product-image-frontend.js 1.91 kB
build/product-image.js 1.61 kB
build/product-new.js 7.62 kB
build/product-on-sale.js 7.94 kB
build/product-price-frontend.js 1.91 kB
build/product-price.js 1.53 kB
build/product-query.js 648 B
build/product-rating-frontend.js 1.18 kB
build/product-rating.js 772 B
build/product-sale-badge-frontend.js 1.14 kB
build/product-sale-badge.js 817 B
build/product-search.js 2.61 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 379 B
build/product-stock-indicator-frontend.js 995 B
build/product-stock-indicator.js 623 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 875 B
build/product-tag-list.js 497 B
build/product-tag.js 7.99 kB
build/product-title-frontend.js 1.33 kB
build/product-title.js 939 B
build/product-top-rated.js 7.86 kB
build/products-by-attribute.js 8.52 kB
build/rating-filter-frontend.js 6.73 kB
build/rating-filter.js 5.53 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.01 kB
build/single-product-frontend.js 29.3 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.64 kB
build/stock-filter.js 7.6 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--04fe80d1-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.54 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/wc-blocks-data.js 15.9 kB
build/wc-blocks-editor-style-rtl.css 5.24 kB
build/wc-blocks-editor-style.css 5.24 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 932 B
build/wc-blocks-registry.js 2.79 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-style-rtl.css 24.1 kB
build/wc-blocks-style.css 24 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 62 kB
build/wc-blocks.js 2.62 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB

compressed-size-action

@nielslange nielslange changed the title WIP add filter for place order button label Add filter for place order button label Sep 16, 2022
@nielslange nielslange added status: needs review type: enhancement The issue is a request for an enhancement. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. block: checkout Issues related to the checkout block. labels Sep 16, 2022
@nielslange nielslange marked this pull request as ready for review September 16, 2022 04:20
@rubikuserbot rubikuserbot requested review from a team and opr and removed request for a team September 16, 2022 04:20
Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Niels, it's working great! Just a comment about the label name and some docs changes 😎

nielslange and others added 6 commits September 19, 2022 14:42
…able-filters.md

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
….com:woocommerce/woocommerce-blocks into add/5876-add-place-order-button-label-filter

# Conflicts:
#	docs/third-party-developers/extensibility/checkout-block/available-filters.md
Copy link
Member

@alexflorisca alexflorisca left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work @nielslange, just a minor suggestion and a question. I like the way you took the initiative to correct some of the documentation formatting errors, thanks for that!

assets/js/types/type-defs/payments.ts Outdated Show resolved Hide resolved
packages/checkout/filter-registry/index.ts Show resolved Hide resolved
Co-authored-by: Alex Florisca <alex.florisca@automattic.com>
@nielslange
Copy link
Member Author

Great work @nielslange, just a minor suggestion and a question.

Thanks for your review. I see that @senadir already answered the question, and I've committed your suggestion. Do you want to give it another review?

Copy link
Member

@alexflorisca alexflorisca left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work, looks good 👍

@sunyatasattva sunyatasattva modified the milestones: 8.6.0, 8.7.0 Sep 26, 2022
@nielslange nielslange self-assigned this Sep 26, 2022
@nielslange nielslange merged commit 4fcb6b2 into trunk Sep 29, 2022
@nielslange nielslange deleted the add/5876-add-place-order-button-label-filter branch September 29, 2022 08:46
senadir added a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
* WIP add filter for place order button label

* Solve TS issue

* Add display priority

* Refactor display priority

* WIP Implement useMemo()

* Try using a global cache

* Add docs for placeOrderLabel filter

* Update docs/third-party-developers/extensibility/checkout-block/available-filters.md

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* Adjust docs

* Rename “placeOrderLabel” to “placeOrderButtonLabel”

* Update assets/js/types/type-defs/payments.ts

Co-authored-by: Alex Florisca <alex.florisca@automattic.com>

Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Alex Florisca <alex.florisca@automattic.com>
Co-authored-by: Lucio Giannotta <lucio.giannotta@a8c.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support dynamic place order button label
5 participants