Product feature with Buy button

[alaczek]

This pattern comes from the Marl theme.

Screenshot:

<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"4vh","padding":{"top":"8vh","bottom":"8vh"}}}} -->
<div class="wp-block-group alignwide" style="padding-top:8vh;padding-bottom:8vh"><!-- wp:image {"align":"wide","id":6751,"sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":"10px"}}} -->
<figure class="wp-block-image alignwide size-large has-custom-border"><img src="https://dotcompatterns.files.wordpress.com/2022/09/toa-heftiba-srvmnmq_t-q-unsplash.jpeg?w=1024" alt="" class="wp-image-6751" style="border-radius:10px"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"54px"}}} -->
<h2 class="has-text-align-center" id="osaka-dinner-set" style="font-size:54px">Osaka Dinner Set</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><s>$200.00</s> $150.00</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/recurring-payments {"url":"https://dotcompatterns.wordpress.com/?p=6748\u0026recurring_payments=undefined","uniqueId":"recurring-payments-undefined"} -->
<div class="wp-block-jetpack-recurring-payments"><!-- wp:jetpack/button {"element":"a","uniqueId":"recurring-payments-id","text":"BUY NOW","borderRadius":50,"width":"50%","align":"center"} /--></div>
<!-- /wp:jetpack/recurring-payments --></div>
<!-- /wp:group -->

Preview: https://dotcompatterns.wordpress.com/?p=6748&preview=true

cc @onuro @iamtakashi

[iamtakashi]

Nice clean pattern. But I find the button is too wide at the moment.

[onuro]

Agreed w Takashi. Maybe half the size would make it fit. I also wonder if the price is too small compared to everything else in size.

[alaczek]

I increased the price font size to medium. I can't seem to do anything about the button width, the settings have no effect - I think it's a bug with the Payments button block.

[iamtakashi]

It looks like the pattern was drafted before the recent changes that made itself a "Payment Buttons" block. If you add the button with the block now, the setting should work.

[alaczek]

You're right, it did help!

[alaczek]

Published!