ahordii

Hey @doublezed2 , I am a developer and I need someone from your side who have an idea how your service (because it’s a third-party API for me) is working. Who should I ask about that, if not you?

Can I change the font of the Google Pay button, according to all we discussed above?

• This reply was modified 16 hours, 59 minutes ago by ahordii.

Hello @doublezed2 , thanks for your reply!

Yeah, I already went through the guide you sent. I’ve tried to implement the same way as it is there:

add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
  $removeFontFamily = function ( &$object ) use (&$removeFontFamily) {
    foreach ( $object as $key => &$value ) {
      if ( $key === 'fontFamily' ) {
        unset( $object->$key );
      } elseif ( is_object( $value ) ) {
        $removeFontFamily( $value );
      }
    }
 };

  // Removes all default font families set in appearance rules and sets a global fontFamily variable to sans-serif.
  if ( isset( $stripe_params['appearance'] ) && is_object( $stripe_params['appearance'] ) ) {
    $removeFontFamily( $stripe_params['appearance'] );
    $stripe_params['appearance']->variables = (object) [ 'fontFamily' => 'SF, Sans-serif'];
  }

  if ( isset( $stripe_params['upeAppearance'] ) && is_object( $stripe_params['upeAppearance'] ) ) {
    $removeFontFamily( $stripe_params['upeAppearance'] );
    $stripe_params['upeAppearance']->variables = (object) [ 'fontFamily' => 'SF, Sans-serif' ];
  }

  return $stripe_params;
} );

I can see the hook worked, and the style is applied on the frontend. But instead of showing SF font, it renders an Arial font instead (so sans-serif fallback worked): https://i.imgur.com/9qoLh2W.png.

So SF font is just not visible from your third party iframe. How can I add it?

Hello @jonayedhosen , yep, I can totally understand that custom coding is beyond your support scope, that’s totally fine. I’m developer, so I don’t need to contact other developers to work on this. The thing is it’s not a WooCommerce dev thing. We can’t do anything from the WooCom side on your, third-party iframe, except this few hooks, like wc_stripe_upe_params. That’s why I’m checking it with you, to see if it’s possible to include a custom font to your iframe. Of course, without editing your plugin’s code – because it’s also not an option.

Is there a way to add our theme font to your iframe, which is inserted by your plugin?

Thanks in advance!

Hello @jonayedhosen , sure, you can check the google pay button on the PDP page, like here https://kinship.jp/product/loro-piana-mens-superlight-crewneck/.

It’s already rounded for PDP, what I’m trying to achieve is to add a border to it, change the background, fill on hover etc (if it’s possible, of course, which I’m not sure).

I’ve tried to use the wc_stripe_upe_params hook (not CSS, because CSS can’t be applied to the third-party iframe).

Here is the code example I implemented to test if I can add the border to the Google Pay button:

add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
    $stripe_params['appearance'] = (object) [
        'rules' => (object) [
            // '.Input' => (object) [
            //     'fontSize' => '16px',
            //     'backgroundColor' => '#212D63',
            //     'border' => '20px solid var(--colorPrimary)',
            // ],
            '.GooglePayButton' => (object) [
              'border' => '1px solid #000000',
              'backgroundColor' => '#fff'
            ],
            '.Button' => (object) [
              'border' => '1px solid #000000',
              'backgroundColor' => '#fff'
            ],
        ],
        'variables' => (object) [
          'fontFamily' => '"SF", Sans-serif'
        ]
    ];

    return $stripe_params;
} );

From the doc https://docs.stripe.com/elements/appearance-api?platform=web, I can see there are some rules (like .Button), which I tried to use, but it didn’t work. As well as I tried to add my custom rule (CSS for .GooglePayButton) but it doesn’t work as well.

@shameemreza I tried to use the snippet you sent, but the frame doesn’t pull the font from the theme. So the font is displayed correctly everywhere on the website, except the Stripe iframe element.

At the same time, I can see that from my styling SF, Sans-serif sans-serif font was applied. So the rule was applied for sure, but the theme font wasn’t displayed.

Should I manually add the custom font somehow for it to be displayed inside the Stripe iframe?

Thanks in advance!

Hey @damianem , were you able to resolve your issue?

Hey @doublezed2 , thanks a lot for your reply!

Yeah, as I already mentioned, I saw the customization docs you sent but wasn’t able to find any info about configuring Google Pay button stylings. I also checked the rules, which I can apply here https://docs.stripe.com/elements/appearance-api?platform=web#form-inputs—labels-above, but there is no rule for ‘.GooglePayButton’. I tried to implement rules for ‘.Button’, but stylings didn’t apply to the Google Pay button as well.

Yeah, I totally understand that you are not able to assist with custom code, that’s fine. Could you just let me know if there are some rules which can be applied to the Google Pay button?

Thanks in advance!

Hey @shameemreza, how can we edit it via custom code? The Google Pay button is an iframe, which comes from Stripe, so we can’t apply any stylings directly. Also, on this documentation page, https://docs.stripe.com/elements/appearance-api, I can’ see only options to edit the form but not this Google Pay button, https://i.imgur.com/gbOuHHg.png, which is inserted into the PDP page and cart page’t see any info about how to edit Google pay button. What I’ve tried:

add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
    $stripe_params['appearance'] = (object) [
        'rules' => (object) [
            // '.Input' => (object) [
            //     'fontSize' => '16px',
            //     'backgroundColor' => '#212D63',
            //     'border' => '20px solid var(--colorPrimary)',
            // ],
            '.GooglePayButton' => (object) [
              'border' => '1px solid #000000',
              'backgroundColor' => '#fff'
            ]
        ],
        'variables' => (object) [
          'fontFamily' => '"SF", Sans-serif'
        ]
    ];

    return $stripe_params;
} );

Neither .GooglePayButton rule, or .GooglePayButton-logo works. I can’t see any stylings applied to the Google Pay button. The commented code works, I can see applied stylings for inputs, so the hook is working correctly.

So the question is: How can we change the styling of this Google Pay button?

I also tried to change it on wp-admin area configs (/wp-admin/admin.php?page=wc-settings&tab=checkout&section=stripe&panel=methods&area=payment_requests), but it doesn’t work like supposed: the light version of the button (https://i.imgur.com/o7TxyEl.png) looks the same as Outline (https://i.imgur.com/V8vsYfh.png). So I can’t achieve border styling for the button inside an iframe.

• This reply was modified 2 weeks, 4 days ago by ahordii.

Sorry, any news here?

Unfortunately, the search results are not related at all. See the suggestions here https://prnt.sc/gr9o_GkE3CUu, it shows only 2 products with the search “heart”. However, we have a lot of “heart” products https://prnt.sc/LXrtppGrvgYy …

How can we show products, related to the request via your plugin? Is it even possible? I feel a bit lost on the results it shows and the real related products…

Thanks.

• This reply was modified 1 year, 2 months ago by ahordii.
• This reply was modified 1 year, 2 months ago by ahordii.

Hello there!

Any updates on the search suggestions logic issue?

Thanks!

Hey Kris, thanks for your answer.

I added the code snippet you provided, but doesn’t seem it is working correctly as well.

Here are the new instant search results https://prnt.sc/ds2470icA6Qq, which again contains not related products for some reason. Also, please check the search page here https://chromeworld.jp/?s=silver+ring&post_type=product&dgwt_wcas=1. It contains only 16 products as a result, with the random not related product there https://prnt.sc/DAjEL4CYov4i.

ok, even if I remove the “silver” tag https://prnt.sc/pvyKGeaHTmc1, the product is still appears on the search suggestions https://prnt.sc/-8pTvbbJT58w

Ok, thanks. Ping me if you’ll need smth from my side.

Hm, that’s ok, that plugin disables main qty. It is not a bug.

The bug is when I have Allowed backorder on the variation level https://prnt.sc/Kh4VuNp-wDTT, with your plugin Stock qty 0 https://prnt.sc/tHFwh4pD6V90 it shows as out of stock on the frontend https://prnt.sc/BJwLWlUJqdxZ. That’s a bug.

What I also noticed, maybe it will be helpful: I checked my Database, and for this variation _stock_status was “outofstock” https://prnt.sc/ejyYwCAB1xOo.

After I disabled the plugin, I need manually update the Stock quantity here https://prnt.sc/0cKjPy-uehj5 (I just need to manually put 0 here, and click save). After this action, the variation is available again, and _stock_status changes to “onbackorder” https://prnt.sc/iLMN8OS82AEi.

This bug happans only with 0 value, as I was able to notice.