Adjusting Amazon Pay Plugin to match my Theme - woocommerce/woocommerce-gateway-amazon-pay GitHub Wiki

CSS section

When incorporating the Amazon Pay plugin into your plugin, theme, or WooCommerce store, it is crucial to ensure seamless visual integration. To assist third-party developers in achieving this integration, it is essential to familiarize them with the specific CSS classes and IDs used in the plugin's output. By understanding and strategically utilizing these CSS classes and IDs, developers can create plugins and themes that seamlessly align with your plugin's functionality. This, in turn, offers a cohesive and polished shopping experience to end-users.

Note: This CSS guide applies to both Classic Checkout (Shortcode) and Checkout Blocks. Checkout Blocks share similar structural concepts but use different wrapper classes as shown below.

1. ID #amazon_customer_details: This ID corresponds to the container for Amazon Pay customer details on the 2nd step of the checkout after the customer logs in on Amazon and is redirected back to the site to complete the order.

   • Similar structure to WooCommerce’s section #customer_details, with an inner element (col2-set).
   • Contains 3 inner widgets: #shipping_address_widget, #payment_method_widget and #billing_address_widget.

2. ID #shipping_address_widget: The shipping address widget is composed of the following sections:

   • Title section: h3 element and a button (#shipping_address_widget_change) to update the information.
   • Content section: can be modified with the CSS class .shipping_address_display.

3. ID #payment_method_widget: The payment method widget is composed of the following sections:

   • Title section: h3 element and a button (#payment_method_widget_change) to update the information.
   • Content section: can be modified with the CSS class .payment_method_display.

4. ID #billing_address_widget: The payment method widget is composed of the following sections:

   • Title section: h3 element.
   • Content section: can be modified with the CSS class .billing_address_display.

5. Amazon Pay buttons:

   • ID #pay_with_amazon: The Amazon Pay button displayed on the checkout and the cart page.
   • ID #pay_with_amazon_cart: The Amazon Pay button displayed on the mini cart widget.
   • ID #pay_with_amazon_product: The Amazon Pay button displayed on the single product page.

6. A payment button is displayed on the cart page after the “Proceed to checkout” button. The section contains a payment button separator (class .wc-apa-button-separator) and the payment button (ID #pay_with_amazon).

7. Class woocommerce-mini-cart__buttons: The element displayed in the mini-cart widget.

   • Contains the payment button separator (class .wc-apa-button-separator) and the payment button (ID #pay_with_amazon_cart)

8. Class wc-amazon-checkout-message: This is the container for the message to be displayed on the checkout notices section. The content of the message depends on the status of the customer’s session.

   • When customers are not logged in to their Amazon account the plugin will display a message asking if the user has an Amazon account (class .wc-amazon-payments-advanced-info) and a payment button (ID #pay_with_amazon).
   • When customers are logged in to their Amazon account the message will display a message noticing the customer that is logged into the Amazon account (class .woocommerce-info) and a Log out button (ID #amazon-logout).

Checkout Blocks wrappers: The main express payment container is .wc-block-components-express-payment and the payment method container is fieldset#wc-block-checkout__payment-method with input #radio-control-wc-payment-method-options-amazon_payments_advanced.

Modifying the plugin’s behavior

In addition to styling the content displayed by the plugin, third-party plugins/themes can remove, modify, or change the location where this content is displayed.

Classic checkout hooks

1. Payment button on the single product page: the plugin uses the following hook to render the payment button on the single product page

add_action( 'woocommerce_single_product_summary', array( $this, 'maybe_separator_and_checkout_button_single_product' ), 30 );

This hook is in charge of rendering the payment button on the single product page.

2. Developers have the flexibility to remove the action entirely or change the button's rendering location. Here's an example of rendering the payment button on top of the product's template:

$amazon_instance = WC()->payment_gateways->get_available_payment_gateways()['amazon_payments_advanced'];

if ( ! empty( $amazon_instance ) ) {
	remove_action( 'woocommerce_single_product_summary', array( $amazon_instance, 'maybe_separator_and_checkout_button_single_product' ), 30 );
	add_action( 'woocommerce_before_single_product', array( $amazon_instance, 'maybe_separator_and_checkout_button_single_product' ), 10 );
}

// Additionally the button can be rendered on its own with the following hook.
$amazon_instance->checkout_button( true, 'div', 'pay_with_amazon_product' );

3. Payment Button on the Cart Page: The button is rendered through two hooks: one for the separator and another for the button itself. Both hooks are customizable, allowing you to remove, modify, or hook them to a different WooCommerce action.

add_action( 'woocommerce_proceed_to_checkout', array( $this, 'display_amazon_pay_button_separator_html' ), 20 );
add_action( 'woocommerce_proceed_to_checkout', array( $this, 'checkout_button' ), 25 );

You can also render the button on its own using this hook:

// Additionally the button can be rendered on its own with the following hook.
$amazon_instance = WC()->payment_gateways->get_available_payment_gateways()['amazon_payments_advanced'];
$amazon_instance->checkout_button();

4. Payment Button on the Mini-Cart: the plugin uses the following hook to render the payment button on the mini-cart. You can completely remove this section or change its priority by removing the original action and adding it back.

add_action( 'woocommerce_widget_shopping_cart_buttons', array( $this, 'maybe_separator_and_checkout_button' ), 30 );

5. Payment Message on the Checkout Page: The payment message on the checkout page is rendered using the following hooks. The message's content depends on whether the user is logged in to their Amazon account.
   • You can modify the message text when the customer is not logged in using the woocommerce_amazon_pa_checkout_message filter. This filter takes a single argument, which is the string to be displayed in the message.
   • Similarly, you can modify the text displayed when the user is logged in using the woocommerce_amazon_pa_checkout_logout_message filter. If needed, you can also customize the entire HTML element using the woocommerce_amazon_payments_logout_checkout_message_html filter.

add_action( 'woocommerce_before_checkout_form', array( $this, 'checkout_message' ), 5 );
add_action( 'before_woocommerce_pay', array( $this, 'checkout_message' ), 5 );

Checkout Blocks behavior (JavaScript filter)

In Checkout Blocks the buttons are rendered through JavaScript filters instead of PHP hooks.

Remove the Express button with:

wp.hooks.addFilter(
    'woocommerce_blocks_checkout_express_payment_methods',
    'your-namespace',
    (methods) => {
        return methods.filter(
            (method) => method.name !== 'amazon_payments_advanced_express'
        );
    }
);