checkout-and-place-order-button

Posted2026年1月19日

Updated2026年1月19日

Byadmin_artws

チェックアウトと注文ボタン

以下のチェックアウトおよび注文ボタンフィルターが利用可能です：

proceedToCheckoutButtonLabel
proceedToCheckoutButtonLink
placeOrderButtonLabel

以下のオブジェクトはフィルター間で共有される：

カートオブジェクト
カートアイテムオブジェクト

`proceedToCheckoutButtonLabel`

説明

proceedToCheckoutButtonLabel　フィルタは、「チェックアウトに進む」ボタンのラベルを変更することができます。

パラメーター

defaultValue string (デフォルト: Proceed to Checkout) – "チェックアウトに進む "ボタンのラベル。
extensions object (default: {}) – 拡張機能オブジェクト。
args object – 以下のキーを持つ引数オブジェクト：
- cart object – カートオブジェクトを参照してください。

リターン

string – "チェックアウトに進む "ボタンのラベル。

コード例

基本例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyProceedToCheckoutButtonLabel = (
    defaultValue,
    extensions,
    args
) => {
    if ( ! args?.cart.items ) {
        return defaultValue;
    }

    return 'Go to checkout';
};

registerCheckoutFilters( 'example-extension', {
    proceedToCheckoutButtonLabel: modifyProceedToCheckoutButtonLabel,
} );

高度な例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyProceedToCheckoutButtonLabel = (
    defaultValue,
    extensions,
    args
) => {
    if ( ! args?.cart.items ) {
        return defaultValue;
    }

    const isSunglassesInCart = args?.cart.items.some(
        ( item ) => item.name === 'Sunglasses'
    );

    if ( isSunglassesInCart ) {
        return '😎 Proceed to checkout 😎';
    }

    return defaultValue;
};

registerCheckoutFilters( 'example-extension', {
    proceedToCheckoutButtonLabel: modifyProceedToCheckoutButtonLabel,
} );

フィルターは組み合わせることもできます。例としてCombined filtersを参照してください。

スクリーンショット

| 前
|:———————————————————————:|:———————————————————————:|
| レジに進むボタンのラベルフィルターを適用する前 | 商品名フィルターを適用した後 |｜…

`proceedToCheckoutButtonLink`

説明

proceedToCheckoutButtonLinkフィルタは、「チェックアウトに進む」ボタンのリンクを変更することができます。

パラメーター

defaultValue string (デフォルト: /checkout) – "チェックアウトに進む "ボタンのリンク。
extensions object (default: {}) – 拡張機能オブジェクト。
args object – 以下のキーを持つ引数オブジェクト：
- カートオブジェクトを参照してください。

リターン

string – 「チェックアウトに進む」ボタンのリンク。

コード例

基本例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyProceedToCheckoutButtonLink = (
    defaultValue,
    extensions,
    args
) => {
    if ( ! args?.cart.items ) {
        return defaultValue;
    }

    return '/custom-checkout';
};

registerCheckoutFilters( 'example-extension', {
    proceedToCheckoutButtonLink: modifyProceedToCheckoutButtonLink,
} );

高度な例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyProceedToCheckoutButtonLink = (
    defaultValue,
    extensions,
    args
) => {
    if ( ! args?.cart.items ) {
        return defaultValue;
    }

    const isSunglassesInCart = args?.cart.items.some(
        ( item ) => item.name === 'Sunglasses'
    );

    if ( isSunglassesInCart ) {
        return '/custom-checkout';
    }

    return defaultValue;
};

registerCheckoutFilters( 'example-extension', {
    proceedToCheckoutButtonLink: modifyProceedToCheckoutButtonLink,
} );

フィルターは組み合わせることもできます。例としてCombined filtersを参照してください。

スクリーンショット

| 前
|:———————————————————————:|:———————————————————————:|
|チェックアウトに進むボタン・リンク・フィルターを適用する前 | チェックアウトに進むボタン・リンク・フィルターを適用した後 |｜。

`placeOrderButtonLabel`

説明

placeOrderButtonLabelフィルタは、「注文する」ボタンのラベルを変更することができます。

パラメーター

defaultValue (type: string、default: Place order) – 「注文する」ボタンのラベル。
extensions object (default: {}) – 拡張オブジェクト。

リターン

string – 「注文する」ボタンのラベル。

コード例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyPlaceOrderButtonLabel = ( defaultValue, extensions ) => {
    return '😎 Pay now 😎';
};

registerCheckoutFilters( 'example-extension', {
    placeOrderButtonLabel: modifyPlaceOrderButtonLabel,
} );

フィルターは組み合わせることもできます。例としてCombined filtersを参照してください。

スクリーンショット

| 前
|:———————————————————————:|:———————————————————————:|
| 発注ボタンラベルフィルタ適用前 | 発注ボタンラベルフィルタ適用後 |｜…

カートオブジェクト

上記のフィルターのCartオブジェクトは以下のキーを持つ：

[- billingAddress object – 以下のキーを持つ請求先住所オブジェクト：
– address_1 string – 住所の1行目。
– address_2 string – 住所の2行目。
– city string – 住所の都市。
– company string – 住所の会社。
– country string – 住所の国。
– email string – 住所のEメール。
– first_name string – 住所の姓。
– last_name string – 住所の姓。
– phone string – 住所の電話番号。
– postcode string – 住所の郵便番号。
– state string – 住所の都道府県。

coupons array – クーポン配列。
crossSells array – クロスセルアイテムの配列。
errors array – エラー配列。
extensions object (default: {}) – extensions オブジェクト。
fee array – fee 配列。
hasCalculatedShipping boolean – カートが送料を計算しているかどうか。
カートアイテムオブジェクトを参照ください。
itemsCount number – カート内のアイテム数。
itemsWeight number – カートアイテムの総重量。
needsPayment boolean – カートに支払いが必要かどうか。
needsShipping boolean – カートに配送が必要かどうか。
paymentMethods array – 支払い方法の配列。
paymentRequirements array – 支払い条件の配列。
shippingAddress object – 請求先住所オブジェクトと同じキーを持つ配送先住所オブジェクト。
shippingRates array – 配送料金の配列。
totals object – 以下のキーを持つ合計オブジェクト：
- currency_code string – 通貨コード。
- currency_decimal_separator string – 通貨の小数点セパレータ。
- currency_minor_unit number – 通貨の小単位。
- currency_prefix string – 通貨のプレフィックス。
- currency_suffix string – 通貨のサフィックス。
- currency_symbol string – 通貨記号。
- currency_thousand_separator string – 通貨の千の区切り文字。
- tax_lines array – 以下のキーを持つオブジェクトの配列：
  - name string – 税金の名前。
  - price string – 税金の価格。
  - rate string – 税率。
- total_discount string – 割引総額。
- total_discount_tax string – 割引税額の合計。
- total_fee string – 手数料の合計。
- total_fee_tax string – 料金にかかる税金の合計。
- total_items string – 項目の合計。
- total_items_tax string – 合計商品税。
- total_price string – 合計価格。
- total_shipping string – 送料の合計。
- total_shipping_tax string – 配送にかかる税金の合計。
- total_tax string – 税金の合計。

カートアイテムオブジェクト

上記のフィルターの Cart Item オブジェクトは以下のキーを持ちます：

backorders_allowed boolean – バックオーダーを許可するかどうか。
catalog_visibility string – カタログの表示。
decsription string – カートアイテムの説明。
extensions object (default: {}) – 拡張オブジェクト。
id number – アイテムID。
images array – アイテムの画像配列。
item_data array – アイテムデータの配列。
key string – アイテムのキー。
low_stock_remaining number – 残りの在庫数。
name string – アイテム名。
permalink string – アイテムのパーマリンク。
prices object – 以下のキーを持つアイテム価格オブジェクト：
- currency_code string – 通貨コード。
- currency_decimal_separator string – 通貨の小数点セパレータ。
- currency_minor_unit number – 通貨の小単位。
- currency_prefix string – 通貨のプレフィックス。
- currency_suffix string – 通貨のサフィックス。
- currency_symbol string – 通貨記号。
- currency_thousand_separator string – 通貨の千単位区切り文字。
- price string – 価格。
- price_range string – 価格帯。
- raw_prices object – 以下のキーを持つ生の価格オブジェクト：
  - precision number – 精度。
  - price number – 価格。
  - regular_price number – 通常価格。
  - sale_price number – セール価格。
- regular_price string – 通常価格。
- sale_price string – セール価格。
quantity number – 商品の数量。
quantity_limits object – 以下のキーを持つ数量制限オブジェクトです：
- editable boolean – 数量を編集可能かどうか。
- maximum number – 最大数量。
- minimum number – 最小量。
- multiple_of number – 数量の倍数。
short_description string – 商品の短い説明。
show_backorder_badge boolean – バックオーダーのバッジを表示するかどうか。
sku string – 商品のSKU。
sold_individually boolean – アイテムが個別に販売されているかどうか。
totals object – 以下のキーを持つ項目の合計オブジェクトです：
- currency_code string – 通貨コード。
- currency_decimal_separator string – 通貨の小数点セパレータ。
- currency_minor_unit number – 通貨の小単位。
- currency_prefix string – 通貨のプレフィックス。
- currency_suffix string – 通貨のサフィックス。
- currency_symbol string – 通貨記号。
- currency_thousand_separator string – 通貨の千の区切り文字。
- line_subtotal string – 行の小計。
- line_subtotal_tax string – 行の小計の税金。
- line_total string – 行の合計。
- line_total_tax string – 行の合計税額。
type string – 商品のタイプ。
variation array – 項目のバリエーション配列。

Japanized for WooCommerce

拡張可能なブロック

カートとチェックアウトブロック

チェックアウトの決済方法

カートとチェックアウトのフィルター

product-collection-block

checkout-and-place-order-button

チェックアウトと注文ボタン

`proceedToCheckoutButtonLabel`

説明

パラメーター

リターン

コード例

基本例

高度な例

スクリーンショット

`proceedToCheckoutButtonLink`

説明

パラメーター

リターン

コード例

基本例

高度な例

スクリーンショット

`placeOrderButtonLabel`

説明

パラメーター

リターン

コード例

スクリーンショット

カートオブジェクト

カートアイテムオブジェクト

お買い物カゴ (アイテム: 0)