在WooCommerce中为每个支付方式添加一个单独的支付按钮

Question

I want to add a separate payment button for each payment method in WooCommerce.I designed checkout page using cart flows

I tried in chrome developers tool by copying button html content and place in every div of payment methods but that was just temporarily changes.. I then go to plugin files editor and select cart flows plugin but don't know what's to do next

Answer 1

You should consider modifying the template files..

1. Locate the WooCommerce template files:

You can find the template files in the "wp-content/plugins/woocommerce/templates" directory.

2. Copy the "checkout/payment.php" file:

Make a backup of the original file and then copy the "payment.php" file to your theme directory.

3. Edit the copied file:

In the copied file, look for the section that displays the payment methods and modify it to add separate buttons for each payment method.

Example code (That's an old woocommerce version I found in my computer and edited it):

<input type="radio" id="payment_method_<?php echo esc_attr( $gateway->id ); ?>" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> />

<label for="payment_method_<?php echo esc_attr( $gateway->id ); ?>">
    <?php echo wp_kses_post( $gateway->get_title() ); ?> <?php echo wp_kses_post( $gateway->get_icon() ); ?>
</label>

<div class="payment_box payment_method_<?php echo esc_attr( $gateway->id ); ?>" <?php if ( ! $gateway->chosen ) : ?>style="display:none;"<?php endif; ?>>
    <?php $gateway->payment_fields(); ?>
</div>

Save and upload the file:

Save the changes and upload the edited file to your theme directory.